企业官网建设流程全解析

前言

前两节课我们学会了可组合函数、状态定义、按钮点击交互。
目前直接连续摆放组件时，元素会默认纵向堆叠，这个默认布局并不灵活。
本课学习三大基础容器： 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(modifier=Modifier.height(16.dp))Row{Button(onClick={count++}){Text("+1")}Spacer(modifier=Modifier.width(12.dp))Button(onClick={count--}){Text("-1")}}Spacer(modifier=Modifier.height(20.dp))Box(modifier=Modifier.size(200.dp),contentAlignment=Alignment.Center){Text("Box居中文字")}}}@Preview@ComposablefunLayoutPreview(){LayoutDemoPage()}

二、逐行代码解读

1. Column 纵向布局容器

Column{// 子元素从上到下垂直依次排列}

等价传统安卓 LinearLayout(vertical) ，内部组件垂直排布。
可以设置垂直、水平对齐方式，控制整体位置。

2. Row 横向布局容器

Row{// 子元素从左到右水平依次排列}

等价传统安卓 LinearLayout(horizontal) ，内部组件水平排布。
案例里两个按钮放在Row里面，实现左右并排。

3. Box 层叠布局容器

Box(modifier=Modifier.size(200.dp),contentAlignment=Alignment.Center){Text("Box居中文字")}

子组件重叠堆叠渲染，后写的组件绘制在上层。
contentAlignment 用来设置内部子元素默认对齐位置，示例实现文字居中。

4. Spacer 占位空白间隔组件

• Spacer(modifier = Modifier.height(16.dp)) ：纵向空隙
• Spacer(modifier = Modifier.width(12.dp)) ：横向空隙
  专门用来控制两个组件之间留白间距，替代手动边距。

5. Modifier 修饰器
   Modifier 是链式配置，尺寸、边距、背景、内边距全部依靠Modifier设置。

本课仅使用size、height、width，后面课程系统讲解Modifier。

6. 状态联动逻辑
   计数器状态沿用第2课知识点，布局只负责摆放界面，业务状态独立，布局与状态互相解耦。

三、三大布局核心特点

1. Column

• 排列方向：垂直，从上向下
• 常用对齐： horizontalAlignment 水平对齐、 verticalArrangement 纵向排布

2. Row

• 排列方向：水平，从左向右
• 常用对齐： verticalAlignment 垂直对齐、 horizontalArrangement 横向排布

3. Box

• 排列方向：图层堆叠，重叠显示
• 常用对齐： contentAlignment 设置子元素整体对齐

嵌套：布局容器可以互相嵌套，Row里面放Column、Column里面放Row，搭建复杂界面。

四、综合练习题

填空题

1. Compose 垂直排列组件使用布局容器________。
2. 实现组件水平并排摆放，需要使用布局容器________。
3. 需要元素重叠层叠显示，选用布局容器________。

答案与解析

1. Column ；解析：Column子项垂直自上而下排列。
2. Row ；解析：Row子项水平从左向右排列。
3. Box ；解析：Box为堆叠布局，子控件图层叠加。

判断题

1. Row 内部组件默认垂直排列。（）

答案：错误。理由：Row是横向布局，子元素水平排列。

2. Box 的多个子组件会互相重叠显示。（）

答案：正确。理由：Box属于层叠容器，后声明的控件绘制在上层。

3. Spacer 必须搭配 Modifier 设置宽或者高，否则看不到留白效果。（）

答案：正确。理由：Spacer本身没有默认尺寸，必须显式指定宽高。

简答题

1. Column、Row、Box三者排布逻辑有什么区别？

参考答案：Column垂直依次摆放；Row水平依次摆放；Box图层堆叠重叠摆放。布局可以多层嵌套，实现复杂页面。

代码实操题

改写示例代码：在外层Column内部，新增一个Row，放入两个Text：文字A、文字B，中间间隔20dp。写出对应代码片段。

参考答案

Row{Text("文字A")Spacer(modifier=Modifier.width(20.dp))Text("文字B")}

解析：放置在Row容器内，横向排布，Spacer设置横向间距隔开两段文字。

五、本课小结

1. Column：垂直布局；Row：水平布局；Box：堆叠布局；
2. Spacer 用来设置空白间距；
3. Modifier 修饰器控制尺寸，布局之间可以互相嵌套；
4. 布局只管控元素摆放，状态数据独立，实现界面与数据分离。

下一课：Modifier修饰器，边距、尺寸、背景样式。