Android Compose基础布局——从传统XML的视角切入了解

0 为什么要有布局

和传统XML一样，若不使用具体的布局，所有控件将堆叠在一起，无法呈现所想的视图效果。

例如，下面在界面中声明了两个文本控件，但却未用布局包裹，就会导致两个控件重叠。

@Preview
@Composable
fun ArtistCard() {
    Text("Alfred Sisley")
    Text("3 minutes ago")
}

一 垂直布局 Column

被Column布局包裹的控件将会垂直排列，就像传统XML中的LinearLayout将orientation设置为了vertical。

如下，用Column对控件进行包裹，便实现了垂直布局。

@Preview
@Composable
fun ArtistCardColumn() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

二 水平布局 Row

被Row布局包裹的控件将会水平排列，就像传统XML中的LinearLayout将orientation设置为了horizontal。

@Preview
@Composable
fun ArtistCardColumn() {
    Row {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}

三 堆叠排列布局Box

从Box这个单词来理解这个布局的特性，Box即"箱子"，箱子中存放的物品都是堆叠或排列起来的，所以我将其称为堆叠排列布局。

Box布局的使用比较复杂，需要通过属性参数才能 实现对子控件的布局排列。下面简单介绍下Box的两个常用属性。

contentAlignment

这个属性主要用于设置Box中子控件的位置，如上下左右中。

Modifier

Modifier是Compose中各个控件最常用到的修饰属性，几乎可以为每个控件设置Modifier属性。它可以设置如同传统xml中的matchParent、padding、width、height、background等一样的效果，且可以链式调用，简化了传统xml的很多代码。

@Preview
@Composable
fun BoxTest() {
    Box(
        modifier = Modifier
            .size(300.dp)
            .background(Color.Cyan),
        contentAlignment = Alignment.BottomStart
    ) {
        Image(painter = painterResource(R.drawable.ic_launcher_background), "")
        Icon(painter = painterResource(R.drawable.ic_launcher_foreground), "")
    }
}

四 其余布局

除了上述所提及的基础布局外，Compose还提供了很多其他的布局。如BoxWithConstraints对应xml中的ConstraintLayout；LazyVerticalGrid对应xml中的GridLayout布局等等。还有Compose提供了许多开箱即用的布局，例如ModalNavigationDrawer、TopAppBar等，只需要再进行具体的元素填充即可完成所需要的界面。