文章目录
- 前言
- 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)}
}
注:Arrangement.SpaceAround 内容 撑满Row的宽度,最左边和最右边的组件与Row的间距是 组件与组件之间的间距的一半
总结
- Column 是一个垂直线性布局组件,可将子组件按顺序从上到下垂直排列
- Column和Row 默认是包裹的,需要设置宽高才可以定子组件具体位置显示
- Column 通过 verticalArrangement 定位垂直位置
- Row 是水平线性布局组件,可将子组件按顺序从左往右 水平排列
- Row 通过 horizontalArrangement 定位水平位置