[移动开发]Android Compose（二）布局

基础知识

1. 目标

• 高性能
• 轻松编写自定义布局

2. 基础知识

@Composable
fun CardInfo() {
    Text(text = "杰洛特")
    Text(text = "来自利维亚")
}

3. 标准布局组件

3-1. 纵向布局

使用Column沿垂直方向布局

@Composable
fun CardInfo() {
    Column {
        Text(text = "杰洛特")
        Text(text = "来自利维亚")
    }
}

注意，两个Text默认是左对齐的

3-2. 横向布局

使用Row沿水平方向布局

@Composable
fun CardInfo() {
    Row {
        Text(text = "杰洛特")
        Text(text = "来自利维亚", fontSize = 8.sp)
    }
}

修改了字体大小，可以发现组件沿顶部对齐

3-3. 搭配使用

@Composable
fun CardInfo() {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = painterResource(id = R.drawable.witcher),
            contentDescription = null,
            modifier = Modifier
                .padding(12.dp, 12.dp)
                .height(40.dp)
                .width(40.dp)
                .clip(RoundedCornerShape(20.dp)),
            contentScale = ContentScale.Crop
        )
        
        Column(modifier = Modifier.padding(end = 12.dp)) {
            Text(text = "杰洛特")
            Text(text = "来自利维亚", fontSize = 8.sp)
        }
    }
}

3-4. Box

不添加Box布局作用域的情况下，其实已经是对应的布局方式了

@Preview
@Composable
fun DefaultPreview() {
//    Box {
        Text(像搭积木像搭积木
            text = "1",
            modifier = Modifier.background(Color.Blue)
                .width(40.dp)
                .height(20.dp),
            fontSize = 15.sp
        )
        Text(
            text = "2",
            modifier = Modifier.background(Color.Yellow)
                .height(15.dp)
                .width(30.dp),
            fontSize = 10.sp
        )
        Text(
            text = "3",
            modifier = Modifier.background(Color.Green)
                .height(8.dp)
                .width(8.dp),
            fontSize = 5.sp
        )
//    }
}

三个带背景色的文本组件，按照顺序叠在一起，先绘制的在下，后绘制的在上
默认的情况下，都是以Android布局的原点，即左上角对齐的

然后解除注释，使用Box似乎没有任何改变

实质上，这里Box的意义在于，每一个元素相对于上一个元素的位置关系，将自己的父元素作为参照，找到自己的定位

Box (contentAlignment = Alignment.BottomCenter) {
	// 省略
}

如果为其添加对齐属性，那么其中每个元素向上一个看齐

这个布局就像搭积木一样，以俯视的角度，一层层的往上垒

3-5. 常用属性

Row的作用域中

Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceAround,
            modifier = Modifier
                .width(100.dp)
                .height(100.dp)
        ) {
            Text(
                text = "1",
                modifier = Modifier
                    .background(Color(106, 90, 205, 255))
                    .width(30.dp)
                    .height(30.dp),
                fontSize = 15.sp
            )
            Text(
                text = "2",
                modifier = Modifier
                    .background(Color(127, 255, 212))
                    .height(15.dp)
                    .width(15.dp),
                fontSize = 10.sp
            )
            Text(
                text = "3",
                modifier = Modifier
                    .background(Color(255, 140, 105))
                    .height(8.dp)
                    .width(8.dp),
                fontSize = 5.sp
            )
        }

借用CSS中Flex布局相关的概念进行理解
当前布局中的元素是沿着水平方向进行排列，因为这是Row赋予的，默认情况下按照顺序从左至右，这个方向为图中红色箭头的方向，暂且称为主轴
我们会用Row是因为我们想让元素整体呈现出水平的排布，那么垂直方向上的排布则属于需要调整的细节或者说是次要的，垂直方向上由上而下，沿着绿色箭头方向，暂且称为副轴

接下来，就对应到了需要用到的属性Arrangement和Alignment，主轴对应Arrangement，副轴对应Alignment

无论是Row，Column我们都能够直接了解到其主轴的方向，Arrangement可以理解为是沿着主轴方向的分布，可能更加贴切

而Alignment是对齐，那么对齐的其实是前一个创建的元素，这就是参考，那么第一个元素对齐的就是容器

然后加上主轴的方向，就是对应与Row和Column的属性了

4. 修饰符

主要用途：

• 更改可组合项的大小、布局、行为和外观
• 添加信息，如无障碍标签
• 处理用户输入
• 添加高级互动，如使元素可点击、可滚动、可拖动或可缩放

4-1. 修饰符顺序

修饰符是Modifier对象，可进行链式调用，每次设置完属性会返回自身，因此调用顺序不同可能造成截然不同的结果

整个调用修饰的过程就像车间的流水线，过程是环环相扣的，每一次调用便是一次加工，我们使用时的先想想我们要的是什么样的产品，然后布置一下对应的加工流程

之前的代码其实有一处能拿来说事，这个padding的顺序不同会造成影响，先看现在的UI

这个padding是图片四周的边距

再换个位置

可以发现得到的结果是不一样的

4-2. 内置修饰符

内置修饰附表
Compose中对于修饰符给出了多种操作，可以应用到修饰符上，也就是modifier上体现出来的节点

这里就是3个内置修饰符

附录：

Compose布局
Flex布局
Compose内置修饰符表