前言：了解了 Compose 内部，接下来自己往里面添加各种组件，尝试各种属性
组件及组件属性：
首先自己在布局里添加一个 Text 组件
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
Text(text = "添加的第一个组件")
}
运行后会发现两个组件叠加在一起了：
添加的第一个 Compose 组件
一、Compose 提供的 标准组件
1. Column
Column {
Text(text = "Hello $name!")
Text(text = "添加的第一个组件")
}
Column
使用 Column 可将多个项垂直地放置在屏幕上。
2. Row
Row(verticalAlignment = Alignment.CenterVertically) {
Image(
painter = painterResource(id = R.mipmap.bg_ana_totle),
contentDescription = null,
//居中裁剪
contentScale = ContentScale.Crop,
//设置修饰符相关属性，设置其宽高为80，然后居中裁剪
modifier = Modifier
.width(80.dp)
.height(80.dp)
//设置圆角图片，50即为圆形图片
.clip(shape = RoundedCornerShape(50))
//在border属性中给这个图片指定了一个宽度2dp，颜色为红色，圆形的边框
.border(
width = 2.dp,
color = Color.Red,
shape = RoundedCornerShape(50)
)
)
Column {
Text(text = "Hello $name!")
Text(text = "添加的第一个组件")
}
}
Row
使用 Row 可将多个项水平地放置在屏幕上。 Column 和 Row 都支持配置它们所含元素的对齐方式
3. Box
如需在 Row 中设置子项的位置，请设置 horizontalArrangement 和 verticalAlignment 参数。对于 Column，请设置 verticalArrangement 和 horizontalAlignment 参数：
Row(
Modifier
.size(150.dp)
.background(Color.Yellow),
horizontalArrangement = Arrangement.End,
verticalAlignment = Alignment.CenterVertically
) {
Box(modifier = Modifier.size(50.dp).background(Color.Red))
Box(modifier = Modifier.size(50.dp, 5.dp).background(Color.Blue))
}
Box
二、修饰符
借助修饰符，您可以修饰或扩充可组合项。您可以使用修饰符来执行以下操作：
- 更改可组合项的大小、布局、行为和外观
- 添加信息，如无障碍标签
- 处理用户输入
- 添加高级互动，如使元素可点击、可滚动、可拖动或可缩放
修饰符是标准的 Kotlin 对象。您可以通过调用某个 Modifier 类函数来创建修饰符。您可以将以下函数连在一起以将其组合起来：
Column(
modifier = Modifier
/*设置当前组件的内边距
* 注意：内边距和点击事件顺序不一样效果也不一样*/
.padding(8.dp)
//点击事件
.clickable(onClick = onClick)
/*设置为屏幕的 最大宽度 及 最大高度，
类似于铺满*/
.fillMaxWidth()
//.fillMaxHeight()
) {
Row(verticalAlignment = Alignment.CenterVertically) {
Image(
painter = painterResource(id = R.mipmap.bg_ana_totle),
contentDescription = null,
//居中裁剪
contentScale = ContentScale.Crop,
//设置修饰符相关属性，设置其宽高为80，然后居中裁剪
modifier = Modifier
.width(80.dp)
.height(80.dp)
//设置圆角图片，50即为圆形图片
.clip(shape = RoundedCornerShape(50))
/*在border属性中给这个图片指定了一个宽度2dp，
颜色为红色，圆形的边框*/
.border(
width = 2.dp,
color = Color.Red,
shape = RoundedCornerShape(50)
)
)
Column {
Text(text = "Hello $name!")
Text(text = "添加的第一个组件")
}
}
}
