Jetpack Compose 探索控件篇（四）：布局之 Box、Row、Column

布局基础：构建 UI 架构

在 Android 开发中，布局是至关重要的，它决定了应用程序用户界面的结构和组织方式。Jetpack Compose 作为现代 Android 开发工具包，提供了强大的布局控件，包括 Box、Row 和 Column，使我们能够轻松创建各种布局。

Box：自由定位控件

Box 控件允许我们自由定位其子控件，提供最大程度的灵活性。我们可以使用它来创建重叠布局、绝对定位元素，甚至实现画布绘图。通过指定子控件的 left、top、right 和 bottom 属性，我们可以精确控制它们的放置。

示例代码：

Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = "Hello Compose",
        modifier = Modifier
            .align(Alignment.Center)
            .offset(x = 50.dp, y = 100.dp)
    )
}

Row：水平排列控件

Row 控件用于水平排列子控件，类似于 LinearLayout。我们可以使用它来创建水平菜单、导航栏或任何需要水平排列元素的布局。Row 控件支持权重分配，允许我们根据需要动态调整子控件的宽度。

示例代码：

Row(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}, modifier = Modifier.weight(1f)) {
        Text(text = "Button 1")
    }
    
    Button(onClick = {}, modifier = Modifier.weight(1f)) {
        Text(text = "Button 2")
    }
}

Column：竖直排列控件

Column 控件与 Row 类似，但用于竖直排列子控件。它支持权重分配，允许我们根据需要动态调整子控件的高度。Column 控件常用于创建列表、表格或任何需要竖直排列元素的布局。

示例代码：

Column(modifier = Modifier.fillMaxHeight()) {
    Text(text = "Item 1", modifier = Modifier.weight(1f))
    Text(text = "Item 2", modifier = Modifier.weight(1f))
    Text(text = "Item 3", modifier = Modifier.weight(1f))
}

结语：Compose 布局的强大功能

Box、Row 和 Column 控件是 Jetpack Compose 提供的强大布局工具，使我们能够创建直观且可响应的 Android 用户界面。通过理解这些控件的工作原理并结合示例代码，我们可以构建各种布局，满足应用程序的需求。在接下来的文章中，我们将继续探索 Compose 的布局功能，涵盖更高级的主题，例如约束布局和滑动布局。