Jetpack Compose布局组件&列表组件
1. 线性布局
概述
Compose 中的线性布局对应的是Android传统视图中的LinearLayout,不一样的地方是,Compose根据Orientation的不同又将布局分为Column和Row, Column对应传统视图LinearLayout中orientation = “vertical”的情况,Row对应传统视图LinearLayout中orientation = “horizontal”的情况.由于两者内部元素在父容器中的布局和对其方式不同,分成两个组件有助于提供类型安全的Modifier修饰符。
Column = 垂直
Row = 横向
1.1 Column
@Composable
inline fun Column(
modifier: Modifier = Modifier, // 修饰符
verticalArrangement: Arrangement.Vertical = Arrangement.Top, //verticalArrangement 参数来定位子项在 Column 中的垂直位置。
horizontalAlignment: Alignment.Horizontal = Alignment.Start, // horizontalAlignment 参数来定位子项在 Column 中的水平位置
content: @Composable ColumnScope.() -> Unit
) {
Arrangement有如下枚举值:
Arrangement.Start // 子view排列在头部
Arrangement.End // 子view排列在尾部
Arrangement.Center // 子view排列在中间
Arrangement.SpaceBetween // 首尾没有空隙,且子view之间均匀分散
Arrangement.SpaceAround // 首尾空隙是每个子view之间空隙的一半
Arrangement.SpaceEvenly // 让每个子view之间的空隙均匀分散,包括首尾
垂直排列 Column
ComposeDemoTheme {
Column(
modifier = Modifier
.border(1.dp, color = Color.Red)
.size(150.dp),
verticalArrangement = Arrangement.Center
) {
Text(
text = "Hello World",
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "Column 是垂直",
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "Column 是垂直",
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.align(Alignment.CenterHorizontally)
)
}
}
垂直排列 Column 改变子的垂直方向和水平方向的位置
ComposeDemoTheme {
Column(
modifier = Modifier
.border(1.dp, color = Color.Red)
.size(150.dp),
verticalArrangement = Arrangement.Top, // 改变子的垂直位置为顶部
horizontalAlignment = Alignment.End // 改变子的水平位置为后
) {
Text(
text = "Hello World",
style = MaterialTheme.typography.bodyLarge,
// modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "Column 是垂直",
style = MaterialTheme.typography.bodyLarge,
// modifier = Modifier.align(Alignment.CenterHorizontally)
)
Text(
text = "Column 是垂直",
style = MaterialTheme.typography.bodyLarge,
// modifier = Modifier.align(Alignment.CenterHorizontally)
)
}
}
1.1 Row
@Composable
inline fun Row(
modifier: Modifier = Modifier,//修饰符
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,//水平对齐方式
verticalAlignment: Alignment.Vertical = Alignment.Top,//垂直对齐方式
content: @Composable RowScope.() -> Unit
){
}
水平排列 Row
ComposeDemoTheme {
Row(
modifier = Modifier
.border(5.dp, color = Color.Red)
.size(350.dp