Jetpack Compose：线性布局与帧布局

一、线性布局

1、Column

Column 是一个垂直的线性布局组件，它的子项从上到下按照顺序垂直排列。

下面代码演示了使用 Column 组件的 verticalArrangement 和 horizontalAlignment 参数来使子项垂直水平居中。

Column(
	modifier = Modifier
    	.padding(10.dp)
    	.background(Color.White)
    	.size(200.dp)
    	.border(width = 1.dp, Color.Black),
    // 必须指定高度
    verticalArrangement = Arrangement.Center,
    // 必须指定宽度
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("Hello Jetpack Compose", color = Color.Blue)
    Text("Android", color = Color.Red)
}

Arrangement 参数展示：

2、Row

Row 是一个水平的线性布局组件，它的子项从左到右按照顺序水平排列。

下面代码演示了使用 Row 组件的 horizontalArrangement 参数来配置按钮的水平位置。

Column(
        modifier = Modifier.fillMaxSize().padding(10.dp)
    ) {
        // Equal Weight
        Row(
            modifier = Modifier.fillMaxWidth()
        ) {
            Button(onClick = {}, Modifier.weight(1f)) {
                Text("A")
            }
            Button(onClick = {}, Modifier.weight(1f)) {
                Text("B")
            }
            Button(onClick = {}, Modifier.weight(1f)) {
                Text("C")
            }
        }
        // Space Between
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Button(onClick = {}) {
                Text("A")
            }
            Button(onClick = {}) {
                Text("B")
            }
            Button(onClick = {}) {
                Text("C")
            }
        }
    
        // Space Around
        Row(
            ···,
            horizontalArrangement = Arrangement.SpaceAround
        ) { ··· }
    
        // Space Evenly
        Row(
            ···,
            horizontalArrangement = Arrangement.SpaceEvenly
        ) { ··· }
    
        // End
        Row(
            ···,
            horizontalArrangement = Arrangement.End
        ) { ··· }
    
        // Center
        Row(
            ···,
            horizontalArrangement = Arrangement.Center
        ) { ··· }
    
        // Start
        Row(
            ···,
            horizontalArrangement = Arrangement.Start
        ) { ··· }
    }

二、帧布局

1、Box

Box 组件能将子项依照顺序依次堆叠，类似于传统视图中的 FrameLayout。

代码如下所示：

Box(Modifier.size(180.dp).background(Color.Red)) {
	Box(Modifier.size(100.dp).background(Color.Yellow)) {
        Box(Modifier.size(60.dp).background(Color.Green)) {

        }
    }
}

2、Surface

Surface 是 Box 组件的一个封装，同时提供了很多样式的设置，它减少了 Modifier 的使用量。

代码如下所示：

Surface(
    shape = RoundedCornerShape(8.dp),
    elevation = 8.dp,
    modifier = Modifier.size(160.dp),
    contentColor = Color.Red
) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Hello Surface")
    }
}