Jetpack Compose | 控件篇（四）-- Box、Row、Column

本文链接：https://blog.youkuaiyun.com/a774057695/article/details/120051289

这篇博客介绍了Jetpack Compose中的Box、Row和Column布局组件。Box允许内容按需求调整，Row和Column分别对应横向和纵向布局，支持灵活的对齐方式和权重分配。文中通过示例展示了不同布局在不同尺寸屏幕下的效果，并提供了WorkShop中的代码示例以加深理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在上一篇中，我们完成了 Switch、CheckBox、RadioButton 相关内容的学习，至此，最基本的简单控件我们已经学完，接下来我们将学习 基本的布局。

以Android 为例，我们已经完成了：TextView、Edittext、Button、ImageView、CheckBox、SwitchButton、RadioButton 等内容的学习。

接下来将开始学习布局规则，例如：FrameLayout、LinearLayout、RelativeLayout、ConstraintLayout 等

文中代码均基于 1.0.1版本

如无特殊说明，文中的 Compose 均指代 Jetpack compose

文中代码均可在 WorkShop 中获取，本篇代码集中于 post29 包下

完整系列目录: Github Pages | 掘金 | csdn

Box

类似Android中的 FrameLayout。

在UI设计中，不可避免的会将一些UI元素组合在一起，从外观上进行整体改变，将他们从环境中 “独立” 开来。很自然地诞生了这一方式：以一个节点包裹这些UI元素，
将整体外观设计运用于这一节点上。

注意：这个节点可以根据排布元素的需求灵活的选择布局 – 在Compose中，这个节点可以是Box，但不一定必须是Box！

使用方式

@Composable
inline fun Box(
    modifier: Modifier = Modifier,
    contentAlignment: Alignment = Alignment.TopStart,
    propagateMinConstraints: Boolean = false,
    content: @Composable BoxScope.() -> Unit
)

很显然，这是一个内联函数，意味着它类似Facade模式的运用，其底层实现较为复杂，这里针对需求场景做了封装，隐匿了大量细节

在当前的学习阶段，我们克制住好奇心，先不探索细节。

参数含义：

modifier: 修饰器
contentAlignment：内容对齐方式 注意：这和FrameLayout有区别
propagateMinConstraints：是否运用最小尺寸到内容，如果为TRUE，内容的最小尺寸将按照modifier中的信息进行设定，否则仅作用于Box
content：内容 Android中子View的概念

在WorkShop中，我们沿用了 Google的一个demo

Box {
   
    Box(Modifier.fillMaxSize().background(Color.Cyan))
    Box(
            Modifier.matchParentSize().padding(top = 20.dp, bottom = 20.dp).background(Color.Yellow)
    )
    Box(
            Modifier.matchParentSize().padding(40.dp)