标准布局组件

Row

同样，使用 Row 可将多个项水平地放置在屏幕上。Column 和 Row 都支持配置它们所含元素的对齐方式。

Row 中设置子项的位置 horizontalArrangement 和 verticalAlignment 参数

  Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) 

Column

使用 Column 可将多个项垂直地放置在屏幕上。

Column 中设置子项的位置 horizontalArrangement 和 verticalAlignment 参数

Box

使用 Box 可将元素放在其他元素上。Box 还支持为其包含的元素配置特定的对齐方式。

布局模型

在布局模型中，通过单次传递即可完成界面树布局。首先，系统会要求每个节点对自身进行测量，然后以递归方式完成所有子节点的测量，并将尺寸约束条件沿着树向下传递给子节点。再后，确定叶节点的尺寸和放置位置，并将经过解析的尺寸和放置指令沿着树向上回传。

简而言之，父节点会在其子节点之前进行测量，但会在其子节点的尺寸和放置位置确定之后再对自身进行调整

性能

Compose 通过只测量一次子项来实现高性能。单遍测量对性能有利，使 Compose 能够高效地处理较深的界面树。

如果布局由于某种原因需要多次测量，Compose 会提供一个特殊的系统，即“固有特性测量”。

由于测量和放置是布局传递的不同子阶段，因此任何仅影响项的放置而不影响测量的更改都可以单独执行。

在布局中使用修饰符

使用修饰符来修饰或扩充可组合项

@Composable
fun ArtistCard(
    artist: Artist,
    onClick: () -> Unit
) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) { /*...*/ }
        Spacer(Modifier.size(padding))
        Card(elevation = 4.dp) { /*...*/ }
    }
}

请注意，在上面的代码中，结合使用了不同的修饰符函数。

• clickable 使可组合项响应用户输入，并显示涟漪。
• padding 在元素周围留出空间。
• fillMaxWidth 使可组合项填充其父项为它提供的最大宽度。
• size() 指定元素的首选宽度和高度。

可滚动布局

滚动布局

列表布局

自适应布局

约束条件BoxWithConstraints

@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        Text("My minHeight is $minHeight while my maxWidth is $maxWidth")
    }
}

基于槽位的布局

Material 组件大量使用槽位 API，这是 Compose 引入的一种模式，它在可组合项之上带来一层自定义设置。**这种方法使组件变得更加灵活，因为它们接受可以自行配置的子元素，而不必公开子元素的每个配置参数。槽位会在界面中留出空白区域，让开发者按照自己的意愿来填充。例如，下面是您可以在 TopAppBar 中自定义的槽位：

可组合项通常采用 content 可组合 lambda (content: @Composable () -> Unit)。槽位 API 会针对特定用途公开多个 content 参数。 例如，TopAppBar 可让您为 title、navigationIcon 和 actions 提供内容。

[Scaffold] 可让您实现具有基本 Material Design 布局结构的界面。Scaffold 可以为最常见的顶级 Material 组件（如 [TopAppBar]、[BottomAppBar]、[FloatingActionButton] 和 [Drawer]提供槽位。通过使用 Scaffold，可轻松确保这些组件得到适当放置且正确地协同工作。