当前位置：首页 > news >正文

Compose | UI组件(九) | Column,Row - 线性布局

news 2025/6/22 8:33:40

文章目录

前言
- Column 的含义
- Column 的使用
- - 给 Column 加边框
  - Column 使用 verticalArrangement 定位子项位置
  - Column 使用 horizontalAlignment 定位子组件位置
  - Column 设置了大小，可使用Modifier.align修饰符设置子组件对齐方式
- Row 的含义
- - Row 的使用
总结

前言

传统的View中使用的线性布局是 LinearLayout，Compose根据纵向和横向的方向不同分为 Column 和 Row 两种组件

Column 的含义

Column 是一个垂直线性布局组件，可将子组件按顺序从上到下垂直排列

@Composable
inline fun Column(modifier: Modifier = Modifier,                                //修饰符verticalArrangement: Arrangement.Vertical = Arrangement.Top, //垂直位置horizontalAlignment: Alignment.Horizontal = Alignment.Start, //水平位置content: @Composable ColumnScope.() -> Unit                  //垂直作用域
)

注：Column 默认垂直位置靠上，水平位置靠左

Column 的使用

Column{Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium)Text(text = "Jetpack Compose")
}

给 Column 加边框

Column(modifier = Modifier.border(1.dp, Color.Red)){Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium)Text(text = "Jetpack Compose")
}

注：
加了边框后可以看出来，内容是包裹起来的

Column默认是没有指定宽高的，也就无法定位 Column 中的 子组件的位置定位 ，也就是无法使用 verticalArrangement，horizontalAlignment 定位 子组件位置

如果宽度和高度都指定了，就可以使用 verticalArrangement，horizontalAlignment 定位 子组件位置

Column 使用 verticalArrangement 定位子项位置

Column(modifier = Modifier.border(1.dp, Color.Red).size(200.dp),verticalArrangement = Arrangement.Center){Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium)Text(text = "Jetpack Compose")
}

注：Arrangement.Center 为居中

Column 使用 horizontalAlignment 定位子组件位置

Column(modifier = Modifier.border(1.dp, Color.Red).size(200.dp),verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally){Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium)Text(text = "Jetpack Compose")
}

注：Alignment.CenterHorizontally 为水平居中

Column 设置了大小，可使用Modifier.align修饰符设置子组件对齐方式

Column(modifier = Modifier.border(1.dp, Color.Red).size(200.dp),verticalArrangement = Arrangement.Center){Text(text     = "Hello,World",style    = MaterialTheme.typography.titleMedium,modifier = Modifier.align(Alignment.CenterHorizontally))Text(text = "Jetpack Compose")
}

注：modifier = Modifier.align(Alignment.CenterHorizontally)) 设置子组件 水平居中，Modifier.align 修饰符优先于 Column 的 horizontalAlignment 参数

Row 的含义

Row组件是水平线性布局组件，可将子组件按顺序从左往右 水平排列

@Composable
inline fun Row(modifier: Modifier = Modifier,                                     //修饰符horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, //水平位置verticalAlignment: Alignment.Vertical = Alignment.Top,             //垂直位置content: @Composable RowScope.() -> Unit                           //水平作用域
)

Row 的使用

Row(modifier = Modifier.fillMaxWidth().padding(top = 30.dp),horizontalArrangement = Arrangement.SpaceAround) {IconButton(onClick = {  }) {Icon(imageVector = Icons.Filled.Favorite, contentDescription = null)}IconButton(onClick = {  }) {Icon(imageVector = Icons.Filled.ShoppingCart, contentDescription = null)}IconButton(onClick = {  }) {Icon(imageVector = Icons.Filled.MailOutline, contentDescription = null)}
}