前言上一课我们学习了 Column / Row / Box 三大基础布局容器学会组件摆放。在Compose中组件的大小、边距、背景、圆角等样式不靠XML属性全部由 Modifier 链式修饰器完成。Modifier是可组合组件的样式核心支持链式连续调用顺序会影响最终效果。本课掌握尺寸、padding内边距、背景色理解Modifier链式执行规则。前置完成1~3课熟悉Column、Row、Box布局一、完整可运行示例源码packagecom.example.composefirstimportandroid.os.Bundleimportandroidx.activity.ComponentActivityimportandroidx.activity.compose.setContentimportandroidx.compose.foundation.backgroundimportandroidx.compose.foundation.layout.Boximportandroidx.compose.foundation.layout.Columnimportandroidx.compose.foundation.layout.paddingimportandroidx.compose.foundation.layout.sizeimportandroidx.compose.material3.Textimportandroidx.compose.runtime.Composableimportandroidx.compose.ui.Modifierimportandroidx.compose.ui.graphics.Colorimportandroidx.compose.ui.tooling.preview.Previewimportandroidx.compose.ui.unit.dpclassMainActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{ModifierDemoPage()}}}ComposablefunModifierDemoPage(){Column(modifierModifier.padding(20.dp)// 整体页面外边距){Text(textModifier演示尺寸内边距背景,modifierModifier.padding(bottom16.dp))Box(modifierModifier.size(220.dp,100.dp)// 宽220dp高100dp.background(Color(0xFF42A5F5)).padding(16.dp)// 内边距文字距离盒子边框){Text(text蓝色背景盒子,modifierModifier.background(Color.White).padding(8.dp))}}}PreviewComposablefunModifierPreview(){ModifierDemoPage()}二、逐行代码解读Modifier 基础概念Modifier 是修饰器对象链式调用顺序非常关键从左到右、从上到下依次执行。一句话先写的修饰先生效后写的修饰作用在前一个结果之上。.size(width, height) 尺寸.size(220.dp,100.dp) 设置固定宽高还有两个常用变体.width(220.dp) 仅设置宽度.height(100.dp) 仅设置高度单位 dp 安卓密度无关像素适配不同分辨率屏幕。.padding() 内边距padding 代表内部留白元素内容和自身边框之间的距离。padding(16.dp) 四个方向统一16dppadding(horizontal 16.dp, vertical 8.dp) 水平、垂直分开设置padding(top8.dp, bottom8.dp, start12.dp, end12.dp) 四边单独设置⚠️ 重点区分padding 写在 background 之前 / 之后效果完全不一样padding 在 background 前面padding区域不会有背景色padding 在 background 后面背景会铺满整个组件padding是背景内部留白我们示例就是这种最常用.background() 背景颜色设置组件的背景填充色支持Color、渐变。Color(0xFF42A5F5) 写法 0xFF 十六进制RGBFF代表完全不透明。组件参数 modifier Modifier.xxx几乎所有Compose基础组件第一个可选参数都是 modifier 。最佳实践modifier作为组件的第一个参数方便阅读和复用。三、核心知识点Modifier顺序陷阱高频易错// 示例A推荐先背景再内边距Modifier.size(200.dp).background(Color.Blue).padding(20.dp)// 示例B效果完全不同先padding再背景Modifier.size(200.dp).padding(20.dp).background(Color.Blue)A蓝色方块大小200dp内部文字距离边框20dp背景铺满整个200dp方块Bpadding向外撑开布局背景只绘制padding之后剩下的区域蓝色区域会缩小口诀样式background在前padding在后。四、综合练习题填空题Compose中用来设置组件样式的链式API是________。设置组件内边距的Modifier方法是________。设置背景颜色的Modifier方法是________。答案与解析Modifier 解析所有尺寸、边距、背景、圆角等样式全部由Modifier链式配置。.padding() 解析padding代表组件内部留白。.background() 解析为组件填充背景颜色。判断题Modifier链式调用代码书写顺序不影响最终UI效果。答案错误。理由Modifier从上到下依次执行顺序会改变渲染结果padding和background顺序是典型坑。.padding() 是外边距用来控制组件和外部其他组件之间的距离。答案错误。理由padding是内边距是组件内容与自身边框之间距离Compose没有单独margin外部间距一般用外层padding或者Spacer实现。dp是密度无关像素适配不同屏幕分辨率。答案正确。理由dp会根据屏幕像素密度自动缩放是安卓推荐UI单位。简答题简述下面两段Modifier代码渲染效果差别Modifier.size(100.dp).background(Color.Red).padding(10.dp)Modifier.size(100.dp).padding(10.dp).background(Color.Red)参考答案第一段整体100dp方块铺满红色背景内部文字距离边框10dp第二段先预留10dp空白红色背景仅绘制中间剩下区域红色方块尺寸缩小。代码实操题写一个Box组件宽150dp高80dp绿色背景整体内边距12dp内部放Text文字 Modifier练习 。参考答案Box(modifierModifier.size(150.dp,80.dp).background(Color(0xFF4CAF50)).padding(12.dp)){Text(Modifier练习)}解析先设置尺寸、背景再设置padding背景铺满整个盒子文字在盒子内部留出12dp留白。五、本课小结Modifier 链式修饰顺序决定渲染结果size 设置宽高padding 内边距background 背景色推荐写法size → background → padding几乎所有Compose组件都接收modifier参数。下一课状态提升把状态抽到父组件实现组件解耦复用。要不要直接写第5课的完整教程保持完全一致的格式
