概述

Compose 中的线性布局对应的是Android传统视图中的LinearLayout,不一样的地方是，Compose根据Orientation的不同又将布局分为Column和Row, Column对应传统视图LinearLayout中orientation = “vertical”的情况，Row对应传统视图LinearLayout中orientation = “horizontal”的情况.由于两者内部元素在父容器中的布局和对其方式不同，分成两个组件有助于提供类型安全的Modifier修饰符。而Compose中的帧布局对应的是Android传统View中的FrameLayout,它可以让自己的子组件依次按照顺序推叠。

实例解析

1.线性布局

在Compose中，线性布局根据使用场景的不同，分为Column和Row,Column 是垂直线性布局组件，Row是水平线性布局组件

1.1 Column组件

@Composable
inline fun Column(
    modifier: Modifier = Modifier,
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
    content: @Composable ColumnScope.() -> Unit
)

上面是Column的参数列表，其中verticalArrangement和horizontalAlignment参数分别可以帮助我们安排子项的垂直/水平位置，在默认情况下，子项会以垂直方向靠上（Arrangment.Top）、水平方向靠左来布置子项的摆放

我们可以以一个例子看下Column的使用

@Composable
fun LinearLayoutDemo() {
    Column(
        modifier = Modifier
            .border(1.dp, color = Color.Red)
            .size(150.dp),
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = "Hello World",
            style = MaterialTheme.typography.h6,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        Text(
            text = "JetPack",
            style = MaterialTheme.typography.h6,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
        Text(
            text = "zhongxj",
            style = MaterialTheme.typography.h6,
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
    }
}

运行结果：

在上面的代码中，我们通过verticalArrangement参数，将Column中的Text摆放到了组件的中间，然后使用Modifier.align修饰符来独立设置子项的对齐规则
这里可能有人会问，不是有horizontalAlignment参数吗，水平方向为啥还要用Modifier.align呢？因为对于垂直布局中的子项，Modifier.align只能设置自己在水平方向的位置，反之水平布局的子项，只能设置自己在垂直方向的位置，就比如我们正在介绍的Column组件，当Column组件中有多个子项时，他们在垂直方向永远是线性排列的，如果允许子项被单独设置，就会出现不好的情况，比如Column中有A,B,C三项，如果配置A的对齐方向是Aligment.Bottom,B为Aligment.Top，这显然是无法实现的，所以Column的子项在垂直方向布局只能通过verticalArragnment进行整体设置。（注意：这里不是说Column只能使用verticalArragnment参数）

注意：在不给Column指定高度、宽度、大小的情况下，Column组件会默认包裹里面的子项，在这个时候我们是无法使用Column参数中的verticalArrangement或者horizontalAlignment来定位子项在Column中的整体位置的

1.2 Row组件

Row组件可以将内部子项按照从左到右的方向水平排列，和Cloumn组件配合使用就可以构建出很丰富美观的界面。下面是一个使用Row组件和Column组件制作的文章卡片，代码如下：

@Composable
fun ArticleCard() {
    Surface(
        shape = RoundedCornerShape(8.dp),
        modifier = Modifier
            .padding(horizontal = 12.dp)
            .fillMaxWidth(),
        elevation = 10.dp,
    ) {
        Surface(modifier = Modifier.padding(12.dp), color = Color(0xeeeeeeee)) {
            Column(modifier = Modifier.padding(12.dp)) {
                Text(
                    text = "JetPack Compose",
                    style = MaterialTheme.typography.h6
                )

                Spacer(modifier = Modifier.padding(vertical = 5.dp))
                Text(
                    text = " Jetpack Compose是第一个使用Kotlin正在开发中的大型项目," +
                            "因此Android团队正在探索Kotlin API指南的新世界,以创建一组特定于Compose API的指南," +
                            "该工作仍在进行中,仍然有很长的路要"
                )

                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            imageVector = Icons.Filled.Favorite,
                            contentDescription = null, modifier = Modifier.size(16.dp)
                        )
                    }

                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            painterResource(id = R.drawable.comment),
                            contentDescription = null, modifier = Modifier.size(16.dp)
                        )
                    }

                    IconButton(onClick = { /*TODO*/ }) {
                        Icon(
                            painterResource(id = R.drawable.share),
                            contentDescription = null, modifier = Modifier.size(16.dp)
                        )
                    }
                }
            }
        }
    }
}

运行结果：

从上面的代码中可知，Row的horizontalArrangement参数帮助我们合理配置了按钮的水平位置。可以看到，图标部分，喜欢和分享按钮呈左右两端对齐，Arrangement定义了很多子项对齐的方式，除了Center（居中），Start（水平靠左），End(水平靠右）等常见的对齐方式，还有一些特定场景下的对齐方式，如Space Between，Space Evenly等。

2.帧布局

2.1 Box组件

Box组件是一个能够将里面的子项依次按照顺序堆叠的布局组件，在使用上类似于传统布局的FrameLayout,这个很简单，我们看下一段代码了解下它的使用。

@Composable
fun BoxDemo(){
    Box(modifier = Modifier
        .size(150.dp)
        .background(Color.Green))
    Box(modifier = Modifier
        .size(80.dp)
        .background(Color.Red))

    Text(text = "Hello World")
}

运行结果：

2.2 Surface组件

Surface从字面上理解是一个平面，在Material Design设计准则中也同样如此，我们可以将很多的组件摆放在这个平台之上，可以设置这个平面的边框，圆角，颜色等.例如，使用Surface实现一个卡片效果，代码如下：

@Composable
fun SurfaceDemo() {
    Surface(
        shape = RoundedCornerShape(8.dp),
        elevation = 10.dp,
        modifier = Modifier
            .width(300.dp)
            .height(100.dp),
        color = Color.Gray
    ) {
        Row(modifier = Modifier.clickable {}) {
            Image(
                painter = painterResource(id = R.drawable.portrait),
                contentDescription = null,
                modifier = Modifier.size(100.dp),
                contentScale = ContentScale.Crop
            )

            Spacer(modifier = Modifier.padding(horizontal = 12.dp))
            Column(
                modifier = Modifier.fillMaxHeight(),
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = "zhongxj", style = MaterialTheme.typography.h6)
                Spacer(modifier = Modifier.padding(vertical = 8.dp))
                Text(text = "海塔灯")
            }
        }
    }
}

运行结果：

从上面的代码中我们可以看到，在Surface中我们主要编写UI代码，而Surface主要负责整个组件的形状，阴影，背景等，Surface可以帮助我们解耦一些代码，而不必在单个组件上添加很多的Modifier修饰符方法。

很多读者可能会有疑问有了Box为啥还要加一个Surface组件，其实Box和Surface组件还是有区别的，如果我们需要快速设置界面的形状，阴影，边框，颜色等，我们使用Surface会更好，因为这样可以减少Modifier的使用量。而如果我们只是需要简单设置界面背景颜色，大小，且需要简单布局下子项的位置，则可以使用Box

3.Spacer留白

在很多时候，我们需要让组件之间留有空白的间隙，这时候就可以使用Compose提供的Spacer组件，简单用一个demo展示Spacer的使用。

@Composable
fun SpacerDemo(){
   Row {
       Box(modifier = Modifier
           .size(100.dp)
           .background(Color.Green))
       Spacer(modifier = Modifier.width(20.dp))
       Box(modifier = Modifier
           .size(100.dp)
           .background(Color.Yellow))
       Spacer(modifier = Modifier.weight(1f))
       Box(modifier = Modifier
           .size(100.dp)
           .background(Color.Magenta))
   }
}

运行结果

从上面的代码中可以看出Spacer的另一种使用场景，那就是在代码中使用Box绘制占位的矩形块在没有内容的时候完成可以使用Spacer来替代。

总结

本文主要讲了线性布局和帧布局在Compose中如何使用，其实非常简单，就需要我们多加练习，没有啥技巧。等啥时候我们写Compose的UI和写XML的UI一样熟练的时候，我们的工作效率就会大大的提升，可以用更少的代码实现更炫的UI效果，而且Kotlin和Java还可以混合使用，现在我已经在用Compose写测试的界面了，非常方便，推荐读者也动起来，使用Java的小伙伴可以使用Compose写界面，Java写功能，而使用Kotlin的小伙伴，则可以更方便的使用Compose，一种语言，完成界面和功能，真的特别酷。