android jetpack compose布局

左丘梦凡

345人浏览 · 2025-11-07 18:35:34

左丘梦凡 · 2025-11-07 18:35:34 发布

记录一些容器及基本用法

Box：类似于帧布局
Column：垂直排列组件
Row：水平排列组件
BoxWithConstraints: 响应式容器,可以根据容器的尺寸调整布局
Card：卡片
LazyColumn：垂直滚动列表，只渲染可见项
LazyRow：水平滚动列表，只渲染可见项
LazyVerticalGrid：垂直网格列表，只渲染可见项
ConstraintLayout：约束布局

Box：类似于帧布局

Box (modifier = Modifier.size(200.dp)
	.background(MaterialTheme.colorScheme.onPrimary),
	contentAlignment = Alignment.Center //设置ziview的放置
){
	Text(text = "这是背景文字")
	Button(onClick = {  },
		modifier = Modifier.align(Alignment.BottomEnd))//Modifier.align()设置自身的放置
	{
   	Text(text = "按钮", color = MaterialTheme.colorScheme.onPrimary)
   }
}

效果图如下
在这里插入图片描述
Box可以用contentAlignment 设置子view的摆放方式,子view也可以通过modifier = Modifier.align(Alignment.BottomEnd)来设置自身在父view中的摆放

Column：垂直排列组件

Column (modifier = Modifier.fillMaxWidth().padding(10.dp)
	.background(MaterialTheme.colorScheme.onPrimary)
	){
		Text(text = "这是背景文字")
		Button(onClick = {  })
		{
			Text(text = "按钮", color = MaterialTheme.colorScheme.onPrimary)
		}
}

效果图如下
在这里插入图片描述
可以通过verticalArrangement控制垂直方向的排列,horizontalAlignment控制水平方向的排列

Row：水平排列组件

代码如下

Row (modifier = Modifier.fillMaxWidth().padding(10.dp)
	.background(MaterialTheme.colorScheme.onPrimary)
	){
		Text(text = "这是背景文字")//modifier = Modifier.weight(1f),它会占满除button剩余的空间
		Button(onClick = {  })
		{
			Text(text = "按钮", color = MaterialTheme.colorScheme.onPrimary)
		}
}

效果图如下
在这里插入图片描述

BoxWithConstraints: 响应式容器

BoxWithConstraints (modifier = Modifier
	.fillMaxWidth()
	.padding(10.dp)
	.background(MaterialTheme.colorScheme.onPrimary)
	){
		// 根据容器尺寸调整布局
		if (maxWidth < 600.dp) {
 			//小屏幕
			Column {
				Text(text = "这是背景文字")
				Button(onClick = {  })
         {
					Text(text = "按钮", color = MaterialTheme.colorScheme.onPrimary)
				}
			}
		}else{
			//大屏幕
			Row {
				Text(text = "这是背景文字")
				Button(onClick = {  })
 				{
					Text(text = "按钮", color = MaterialTheme.colorScheme.onPrimary)
				}
			}
		}
}

效果如下
在这里插入图片描述
这里使用它的maxWidth来判断,它还有minWidth,minHeight,maxHeight几个属性

Card:卡片容器

Card (modifier = Modifier.fillMaxWidth()
	.padding(10.dp),
	shape = MaterialTheme.shapes.medium,
	colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.primaryContainer),
	elevation = CardDefaults.cardElevation(4.dp),
	border = BorderStroke(1.dp,MaterialTheme.colorScheme.outlineVariant)
	){
		Column (modifier = Modifier.padding(10.dp)){
			Text(text = "这是背景文字")
		}
}

效果如下
在这里插入图片描述
LazyColumn:垂直列表

val listItems = listOf("item1", "item2", "item3", "item4", "item5")
LazyColumn  (modifier = Modifier.fillMaxWidth(),
	contentPadding = PaddingValues(10.dp),
	verticalArrangement = Arrangement.spacedBy(8.dp),//设置间隔
	){
		item {
			Text(text = "这是背景文字",modifier = Modifier.padding(10.dp))
		}
		items(count = listItems.size) { index ->
			Card (modifier = Modifier.height(60.dp).fillMaxWidth()){
				Text(text = listItems.get(index), modifier = Modifier.padding(10.dp))
			}
		}
		item {
			Text(text = "没有更多了",modifier = Modifier.padding(10.dp))
		}
}

效果如下
在这里插入图片描述

LazyRow:水平列表

LazyRow (modifier = Modifier.fillMaxWidth(),
	contentPadding = PaddingValues(10.dp),
	horizontalArrangement = Arrangement.spacedBy(8.dp),
	){
		item {
			Text(text = "这是背景文字",modifier = Modifier.padding(10.dp))
		}
		items(count = listItems.size) { index ->
			Card (modifier = Modifier.height(60.dp).fillMaxWidth()){
				Text(text = listItems.get(index), modifier = Modifier.padding(10.dp))
			}
		}
		item {
			Text(text = "没有更多了",modifier = Modifier.padding(10.dp))
		}
}

效果如下
在这里插入图片描述

LazyVerticalGrid:垂直网格

LazyVerticalGrid (modifier = Modifier.fillMaxWidth(),
	columns = GridCells.Fixed(2),//设置列数
	contentPadding = PaddingValues(10.dp),
	verticalArrangement = Arrangement.spacedBy(8.dp),//设置间隔
	horizontalArrangement = Arrangement.spacedBy(8.dp)//设置间隔
	){
		items(count = listItems.size) { index ->
			Card (modifier = Modifier.height(60.dp)){
				Text(text = listItems.get(index), modifier = Modifier.padding(10.dp))
			}
		}
}

效果如下
在这里插入图片描述

ConstraintLayout：约束布局

ConstraintLayout (modifier = Modifier.fillMaxWidth()
	.padding(10.dp)
	){
		//创建引用
		val (startRef, endRef, contentRef) = createRefs()

		Text(text = "start",modifier = Modifier.constrainAs(startRef){ //设置引用
			top.linkTo(parent.top)//顶部跟父view的顶部对齐
 			start.linkTo(parent.start)//开始位置跟父view的开始位置对齐
		})

		Text(text = "end",modifier = Modifier.constrainAs(endRef){
			top.linkTo(parent.top)
			end.linkTo(parent.end)//结束位置跟父view的结束位置对齐
		})

		Text(text = "这是中间的内容啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦",modifier = Modifier.constrainAs(contentRef){
			top.linkTo(parent.top)
			start.linkTo(startRef.end, margin = 8.dp)//开始位置跟startRef引用的对应的view的结束位置对齐,margin 8dp
			end.linkTo(endRef.start, margin = 8.dp)//结束位置跟endRef引用对应的view的开始位置对齐, margin 8dp
			width = Dimension.fillToConstraints //宽度占满
		})
}