前言前两节课我们学会了可组合函数、状态定义、按钮点击交互。目前直接连续摆放组件时元素会默认纵向堆叠这个默认布局并不灵活。本课学习三大基础容器 Column 、 Row 、 Box 掌握元素横向、纵向、层叠排布学会对齐与间距设置。前置完成第1、2课可正常运行Compose示例项目一、完整可运行示例源码packagecom.example.composefirstimportandroid.os.Bundleimportandroidx.activity.ComponentActivityimportandroidx.activity.compose.setContentimportandroidx.compose.foundation.layout.Boximportandroidx.compose.foundation.layout.Columnimportandroidx.compose.foundation.layout.Rowimportandroidx.compose.foundation.layout.Spacerimportandroidx.compose.foundation.layout.heightimportandroidx.compose.foundation.layout.sizeimportandroidx.compose.foundation.layout.widthimportandroidx.compose.material3.Buttonimportandroidx.compose.material3.Textimportandroidx.compose.runtime.Composableimportandroidx.compose.runtime.getValueimportandroidx.compose.runtime.mutableIntStateOfimportandroidx.compose.runtime.rememberimportandroidx.compose.runtime.setValueimportandroidx.compose.ui.Alignmentimportandroidx.compose.ui.Modifierimportandroidx.compose.ui.tooling.preview.Previewimportandroidx.compose.ui.unit.dpclassMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{LayoutDemoPage()}}}ComposablefunLayoutDemoPage(){varcountbyremember{mutableIntStateOf(0)}Column{Text(text布局演示计数$count)Spacer(modifierModifier.height(16.dp))Row{Button(onClick{count}){Text(1)}Spacer(modifierModifier.width(12.dp))Button(onClick{count--}){Text(-1)}}Spacer(modifierModifier.height(20.dp))Box(modifierModifier.size(200.dp),contentAlignmentAlignment.Center){Text(Box居中文字)}}}PreviewComposablefunLayoutPreview(){LayoutDemoPage()}二、逐行代码解读Column 纵向布局容器Column{// 子元素从上到下垂直依次排列}等价传统安卓 LinearLayout(vertical) 内部组件垂直排布。可以设置垂直、水平对齐方式控制整体位置。Row 横向布局容器Row{// 子元素从左到右水平依次排列}等价传统安卓 LinearLayout(horizontal) 内部组件水平排布。案例里两个按钮放在Row里面实现左右并排。Box 层叠布局容器Box(modifierModifier.size(200.dp),contentAlignmentAlignment.Center){Text(Box居中文字)}子组件重叠堆叠渲染后写的组件绘制在上层。contentAlignment 用来设置内部子元素默认对齐位置示例实现文字居中。Spacer 占位空白间隔组件Spacer(modifier Modifier.height(16.dp)) 纵向空隙Spacer(modifier Modifier.width(12.dp)) 横向空隙专门用来控制两个组件之间留白间距替代手动边距。Modifier 修饰器Modifier 是链式配置尺寸、边距、背景、内边距全部依靠Modifier设置。本课仅使用size、height、width后面课程系统讲解Modifier。状态联动逻辑计数器状态沿用第2课知识点布局只负责摆放界面业务状态独立布局与状态互相解耦。三、三大布局核心特点Column排列方向垂直从上向下常用对齐 horizontalAlignment 水平对齐、 verticalArrangement 纵向排布Row排列方向水平从左向右常用对齐 verticalAlignment 垂直对齐、 horizontalArrangement 横向排布Box排列方向图层堆叠重叠显示常用对齐 contentAlignment 设置子元素整体对齐嵌套布局容器可以互相嵌套Row里面放Column、Column里面放Row搭建复杂界面。四、综合练习题填空题Compose 垂直排列组件使用布局容器________。实现组件水平并排摆放需要使用布局容器________。需要元素重叠层叠显示选用布局容器________。答案与解析Column 解析Column子项垂直自上而下排列。Row 解析Row子项水平从左向右排列。Box 解析Box为堆叠布局子控件图层叠加。判断题Row 内部组件默认垂直排列。答案错误。理由Row是横向布局子元素水平排列。Box 的多个子组件会互相重叠显示。答案正确。理由Box属于层叠容器后声明的控件绘制在上层。Spacer 必须搭配 Modifier 设置宽或者高否则看不到留白效果。答案正确。理由Spacer本身没有默认尺寸必须显式指定宽高。简答题Column、Row、Box三者排布逻辑有什么区别参考答案Column垂直依次摆放Row水平依次摆放Box图层堆叠重叠摆放。布局可以多层嵌套实现复杂页面。代码实操题改写示例代码在外层Column内部新增一个Row放入两个Text文字A、文字B中间间隔20dp。写出对应代码片段。参考答案Row{Text(文字A)Spacer(modifierModifier.width(20.dp))Text(文字B)}解析放置在Row容器内横向排布Spacer设置横向间距隔开两段文字。五、本课小结Column垂直布局Row水平布局Box堆叠布局Spacer 用来设置空白间距Modifier 修饰器控制尺寸布局之间可以互相嵌套布局只管控元素摆放状态数据独立实现界面与数据分离。下一课Modifier修饰器边距、尺寸、背景样式。