Compose（二）

前言：了解了 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

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 = "添加的第一个组件")
            }
        }
    }