Jetpack Compose 控件参数速查手册

发表于 2026-07-12 更新于 2026-07-12 分类于 android 阅读次数：

本文是 Compose 系列配套参考手册，包含每个控件的完整参数、示例和注意事项。配合 Compose 从 0 到 1 食用更佳。

前言：Compose 控件体系概览

@Composable 函数（所有 UI 都是函数）
├── Text（文本）
├── Button（按钮）
├── TextField / OutlinedTextField（输入框）
├── Image（图片）
├── Checkbox（复选框）
├── Switch（开关）
├── RadioButton（单选按钮）
├── Slider（滑动条）
├── Column（纵向布局）
├── Row（横向布局）
├── Box（层叠布局）
├── LazyColumn / LazyRow（列表控件）
├── Scaffold（页面骨架）
│   ├── TopAppBar（顶部栏）
│   ├── BottomAppBar / NavigationBar（底部栏）
│   └── FloatingActionButton（浮动按钮）
└── Modifier（外观修饰，适用于所有控件）

Modifier 是所有控件共用的外观修饰系统，详见第十四章。

Text —— 文本

作用

显示文字。Compose 中最基础的控件，替代传统 TextView。

核心属性

参数	类型	说明
`text`	`String`	显示的文本内容
`modifier`	`Modifier`	外观修饰（大小、边距、背景等）
`color`	`Color`	文字颜色，如 `Color.Blue`、`Color(0xFF333333)`
`fontSize`	`TextUnit`	字号，如 `16.sp`
`fontStyle`	`FontStyle`	`FontStyle.Normal` / `FontStyle.Italic`
`fontWeight`	`FontWeight`	字重：`Thin` / `Light` / `Normal` / `Medium` / `Bold` / `Black` 等
`fontFamily`	`FontFamily`	字体，如 `FontFamily.Default` / `FontFamily.Monospace`
`letterSpacing`	`TextUnit`	字母间距，如 `1.sp`
`textDecoration`	`TextDecoration`	`None` / `Underline` / `LineThrough`
`textAlign`	`TextAlign`	对齐方式：`Left` / `Center` / `Right` / `Justify` / `Start` / `End`
`lineHeight`	`TextUnit`	行高，如 `24.sp`
`maxLines`	`Int`	最大行数，超出后按 `overflow` 处理
`overflow`	`TextOverflow`	超出处理：`Ellipsis`（省略号）/ `Clip`（裁剪）/ `Visible`（可见）
`softWrap`	`Boolean`	是否自动换行，默认 `true`
`style`	`TextStyle`	统一样式对象，可一次性设置多个文字属性
`onTextLayout`	`(TextLayoutResult) -> Unit`	文字布局完成回调

示例

Text(
    text = "Hello Compose",
    fontSize = 20.sp,
    fontWeight = FontWeight.Bold,
    color = Color.Blue,
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

适用场景

页面标题、正文、标签、提示信息等一切需要显示文字的地方

⚠️ 注意

fontSize 必须带单位 .sp，否则编译报错
overflow = TextOverflow.Ellipsis 只在 maxLines 设置后生效
需要渐变文字或复杂样式时，使用 buildAnnotatedString + ClickableText

Button —— 按钮

作用

用户点击触发操作。Compose 中最核心的交互控件，Material 3 风格。

核心属性

参数	类型	说明
`onClick`	`() -> Unit`	点击回调
`modifier`	`Modifier`	外观修饰
`enabled`	`Boolean`	是否可点击，`false` 时变灰，默认 `true`
`colors`	`ButtonColors`	颜色配置，由 `ButtonDefaults.buttonColors()` 创建
`elevation`	`ButtonElevation`	阴影高度，由 `ButtonDefaults.buttonElevation()` 创建
`shape`	`Shape`	按钮形状，如 `RoundedCornerShape(8.dp)`
`border`	`BorderStroke?`	边框，如 `BorderStroke(1.dp, Color.Gray)`
`contentPadding`	`PaddingValues`	内容内边距，默认 `ButtonDefaults.ContentPadding`
`interactionSource`	`MutableInteractionSource`	交互状态源（高级用法）
`content`	`@Composable RowScope.() -> Unit`	按钮内部内容（通常是 Text + 图标组合）

示例

Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Blue
    )
) {
    Text("点击我")
}

文字按钮（TextButton）

1
2
3

TextButton(onClick = { }) {
    Text("取消")
}

描边按钮（OutlinedButton）

1
2
3

OutlinedButton(onClick = { }) {
    Text("了解更多")
}

适用场景

提交表单、页面跳转、确认/取消操作等点击交互

⚠️ 注意

content 中使用 RowScope，可以横向排列多个元素（如图标 + 文字）
Material 3 默认没有阴影，区别于传统 MaterialButton
ButtonDefaults.buttonColors() 可配置：containerColor、contentColor、disabledContainerColor、disabledContentColor

TextField —— 输入框

作用

用户输入文字。Material 3 提供两种样式：TextField（填充）和 OutlinedTextField（描边）。

核心属性

参数	类型	说明
`value`	`String`	当前输入内容，必填
`onValueChange`	`(String) -> Unit`	输入变化回调，必填
`modifier`	`Modifier`	外观修饰
`enabled`	`Boolean`	是否可用，默认 `true`
`readOnly`	`Boolean`	是否只读，默认 `false`
`label`	`@Composable (() -> Unit)?`	浮动标签，如 `{ Text("用户名") }`
`placeholder`	`@Composable (() -> Unit)?`	占位文字，如 `{ Text("请输入") }`
`leadingIcon`	`@Composable (() -> Unit)?`	左侧图标
`trailingIcon`	`@Composable (() -> Unit)?`	右侧图标（常用于清除按钮）
`isError`	`Boolean`	是否显示错误状态，默认 `false`
`supportingText`	`@Composable (() -> Unit)?`	底部辅助文字（错误提示 / 字符计数）
`singleLine`	`Boolean`	是否单行，默认 `false`
`maxLines`	`Int`	最大行数
`keyboardOptions`	`KeyboardOptions`	键盘类型：`KeyboardOptions(keyboardType = KeyboardType.Password)`
`keyboardActions`	`KeyboardActions`	键盘动作：`KeyboardActions(onDone = { ... })`
`colors`	`TextFieldColors`	颜色配置
`textStyle`	`TextStyle`	文字样式
`visualTransformation`	`VisualTransformation`	视觉变换，如 `PasswordVisualTransformation()`
`shape`	`Shape`	形状

KeyboardType 常用值

值	场景
`KeyboardType.Text`	普通文本
`KeyboardType.Password`	密码
`KeyboardType.Number`	数字
`KeyboardType.Decimal`	带小数点数字
`KeyboardType.Phone`	电话号码
`KeyboardType.Email`	邮箱地址
`KeyboardType.Uri`	网址

示例

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("用户名") },
    placeholder = { Text("请输入") },
    singleLine = true
)

适用场景

⚠️ 注意

value 和 onValueChange 是必填参数，缺一不可
必须配合 remember { mutableStateOf("") } 使用，否则无法输入
密码框用 visualTransformation = PasswordVisualTransformation()
OutlinedTextField 参数与 TextField 几乎相同，只是外观为描边样式

Image —— 图片

作用

显示图片，支持本地资源、网络图片、位图等。

核心属性

参数	类型	说明
`painter`	`Painter`	图片资源，`painterResource(R.drawable.xxx)`
`contentDescription`	`String?`	无障碍描述，必填（纯装饰可传 `null`）
`modifier`	`Modifier`	外观修饰
`alignment`	`Alignment`	图片在控件内的对齐方式，默认 `Alignment.Center`
`contentScale`	`ContentScale`	缩放方式（见下表）
`alpha`	`Float`	透明度，`0f` ~ `1f`，默认 `1f`
`colorFilter`	`ColorFilter?`	颜色滤镜，如 `ColorFilter.tint(Color.Red)`

ContentScale 常用值

值	效果
`Crop`	裁剪填满，保持比例（类似 centerCrop）
`Fit`	等比缩放，完全显示（类似 fitCenter）
`FillBounds`	拉伸填满，不保持比例（类似 fitXY）
`FillWidth`	宽度填满，高度按比例
`FillHeight`	高度填满，宽度按比例
`None`	原始尺寸，不缩放

示例

Image(
    painter = painterResource(id = R.drawable.ic_launcher),
    contentDescription = "应用图标",
    modifier = Modifier.size(100.dp),
    contentScale = ContentScale.Crop
)

适用场景

头像、商品图、Banner、图标、背景图等

⚠️ 注意

contentDescription 应始终提供有意义的描述，纯装饰性图片传 null
加载网络图片需要引入图片加载库（Coil / Glide），painterResource 只能加载本地资源
圆形头像裁剪用 Modifier.clip(CircleShape)

Checkbox —— 复选框

作用

多选开关，用户勾选/取消勾选。

核心属性

参数	类型	说明
`checked`	`Boolean`	是否勾选
`onCheckedChange`	`((Boolean) -> Unit)?`	勾选状态变化回调
`modifier`	`Modifier`	外观修饰
`enabled`	`Boolean`	是否可用，默认 `true`
`colors`	`CheckboxColors`	颜色配置，`CheckboxDefaults.colors()`

示例

var checked by remember { mutableStateOf(false) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(checked = checked, onCheckedChange = { checked = it })
    Text("我同意用户协议")
}

三态复选框（TriStateCheckbox）

var state by remember { mutableStateOf(ToggleableState.Off) }

TriStateCheckbox(state = state, onClick = {
    state = when (state) {
        ToggleableState.Off -> ToggleableState.Indeterminate
        ToggleableState.Indeterminate -> ToggleableState.On
        ToggleableState.On -> ToggleableState.Off
    }
})

适用场景

协议勾选、多选列表、设置项开关

⚠️ 注意

onCheckedChange 是可空的，设为 null 可禁用交互（但不改变外观）
通常搭配 Row + Text 组成完整的选项行
TriStateCheckbox 支持三个状态：未选 / 半选 / 全选，适合全选场景

Switch —— 开关

作用

开关控件，用于切换两种互斥状态（如开关某项功能）。

核心属性

参数	类型	说明
`checked`	`Boolean`	是否开启
`onCheckedChange`	`((Boolean) -> Unit)?`	状态变化回调
`modifier`	`Modifier`	外观修饰
`enabled`	`Boolean`	是否可用，默认 `true`
`colors`	`SwitchColors`	颜色配置，`SwitchDefaults.colors()`
`thumbContent`	`@Composable (() -> Unit)?`	滑块内部内容（可放图标）

示例

1
2
3

var isOn by remember { mutableStateOf(true) }

Switch(checked = isOn, onCheckedChange = { isOn = it })

带图标的开关

Switch(
    checked = isWiFi,
    onCheckedChange = { isWiFi = it },
    thumbContent = if (isWiFi) {
        { Icon(Icons.Default.Wifi, contentDescription = null, modifier = Modifier.size(16.dp)) }
    } else null
)

适用场景

设置页功能开关（WiFi、蓝牙、通知等）

⚠️ 注意

Switch 和 Checkbox 语义不同：Switch 表示即时生效的状态切换，Checkbox 表示需要提交的选项
colors 可配置：checkedThumbColor、checkedTrackColor、uncheckedThumbColor、uncheckedTrackColor 等

RadioButton —— 单选按钮

作用

多选一，用户从一组选项中选择一个。

核心属性

参数	类型	说明
`selected`	`Boolean`	是否被选中
`onClick`	`(() -> Unit)?`	点击回调
`modifier`	`Modifier`	外观修饰
`enabled`	`Boolean`	是否可用，默认 `true`
`colors`	`RadioButtonColors`	颜色配置，`RadioButtonDefaults.colors()`

示例

val options = listOf("男", "女", "保密")
var selected by remember { mutableStateOf(options[0]) }

options.forEach { option ->
    Row(verticalAlignment = Alignment.CenterVertically) {
        RadioButton(
            selected = (option == selected),
            onClick = { selected = option }
        )
        Text(option)
    }
}

适用场景

性别选择、支付方式选择、任何互斥选项场景

⚠️ 注意

RadioButton 本身不包含文字，需要手动组合 Row + Text
和传统的 RadioGroup 不同，Compose 中需要手动管理互斥逻辑（通过状态变量）
colors 可配置：selectedColor、unselectedColor、disabledSelectedColor、disabledUnselectedColor

Slider —— 滑动条

作用

通过拖动滑块在连续范围内选择一个值。

核心属性

参数	类型	说明
`value`	`Float`	当前值
`onValueChange`	`(Float) -> Unit`	拖动回调
`modifier`	`Modifier`	外观修饰
`enabled`	`Boolean`	是否可用，默认 `true`
`valueRange`	`ClosedFloatingPointRange<Float>`	取值范围，如 `0f..100f`
`steps`	`Int`	分段数，`0` 表示连续，`1` 表示 1 段
`colors`	`SliderColors`	颜色配置，`SliderDefaults.colors()`
`onValueChangeFinished`	`(() -> Unit)?`	拖动结束回调

示例

var sliderValue by remember { mutableStateOf(0.5f) }

Slider(
    value = sliderValue,
    onValueChange = { sliderValue = it },
    valueRange = 0f..1f
)

Text("当前值：${"%.0f".format(sliderValue * 100)}%")

带刻度的 Slider

var volume by remember { mutableStateOf(5f) }

Slider(
    value = volume,
    onValueChange = { volume = it },
    valueRange = 0f..10f,
    steps = 9  // 10 个档位需要 9 个分段
)

适用场景

音量调节、亮度调节、进度条、价格区间选择

⚠️ 注意

steps = 0 表示连续拖动，steps = n 表示分成 n+1 档
onValueChangeFinished 适合在拖动结束时触发保存或网络请求
需要显示范围标签时，配合 Row + Text 放在 Slider 两端

Column —— 纵向布局

作用

子元素纵向依次排列。等同于传统 LinearLayout(orientation=vertical)。

核心属性

参数	类型	说明
`modifier`	`Modifier`	外观修饰
`verticalArrangement`	`Arrangement.Vertical`	垂直排列方式（见下表）
`horizontalAlignment`	`Alignment.Horizontal`	水平对齐方式：`Start` / `CenterHorizontally` / `End`
`content`	`@Composable ColumnScope.() -> Unit`	子元素内容

Arrangement.Vertical 常用值

值	效果
`Arrangement.Top`	顶部对齐（默认）
`Arrangement.Center`	垂直居中
`Arrangement.Bottom`	底部对齐
`Arrangement.SpaceBetween`	两端对齐，中间均匀留空
`Arrangement.SpaceAround`	每个元素两侧有相同间距
`Arrangement.SpaceEvenly`	所有间距相等
`Arrangement.spacedBy(8.dp)`	每个元素之间固定间距

示例

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Text("第一行")
    Text("第二行")
    Text("第三行")
}

适用场景

表单页面、设置列表、任何需要纵向排列内容的场景

⚠️ 注意

verticalArrangement 只在 Column 高度大于子元素总高度时生效
子元素默认靠左对齐，通过 horizontalAlignment 控制水平位置
使用 Modifier.weight(1f) 可以让子元素按比例分配剩余空间

Row —— 横向布局

作用

子元素横向依次排列。等同于传统 LinearLayout(orientation=horizontal)。

核心属性

参数	类型	说明
`modifier`	`Modifier`	外观修饰
`horizontalArrangement`	`Arrangement.Horizontal`	水平排列方式（同 Column 中的 Arrangement 值，方向改为水平）
`verticalAlignment`	`Alignment.Vertical`	垂直对齐方式：`Top` / `CenterVertically` / `Bottom`
`content`	`@Composable RowScope.() -> Unit`	子元素内容

示例

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
) {
    Text("左边")
    Text("右边")
}

适用场景

工具栏、操作栏、表单行、任何需要横向排列的场景

⚠️ 注意

horizontalArrangement 只在 Row 宽度大于子元素总宽度时生效
子元素默认顶部对齐，通过 verticalAlignment 控制垂直位置
常用 Modifier.weight(1f) 让文字填充剩余空间（搭配 TextOverflow.Ellipsis）

Box —— 层叠布局

作用

子元素层叠排列，后写的盖在先写的上面。等同于传统 FrameLayout。

核心属性

参数	类型	说明
`modifier`	`Modifier`	外观修饰
`contentAlignment`	`Alignment`	所有子元素的对齐方式，默认 `TopStart`
`propagateMinConstraints`	`Boolean`	是否传递最小约束给子元素，默认 `false`
`content`	`@Composable BoxScope.() -> Unit`	子元素内容

子元素独立对齐

在 Box 内，子元素可通过 Modifier.align() 独立控制自己的对齐位置：

值	位置
`Alignment.TopStart`	左上
`Alignment.TopCenter`	上中
`Alignment.TopEnd`	右上
`Alignment.CenterStart`	左中
`Alignment.Center`	正中
`Alignment.CenterEnd`	右中
`Alignment.BottomStart`	左下
`Alignment.BottomCenter`	下中
`Alignment.BottomEnd`	右下

示例

Box(
    modifier = Modifier.size(200.dp),
    contentAlignment = Alignment.Center
) {
    Image(painter = painterResource(R.drawable.bg), contentDescription = null)
    Text("盖在图片上的文字", color = Color.White)
}

不同位置叠加

Box(modifier = Modifier.fillMaxSize()) {
    Text("左上角", modifier = Modifier.align(Alignment.TopStart))
    Text("正中间", modifier = Modifier.align(Alignment.Center))
    Text("右下角", modifier = Modifier.align(Alignment.BottomEnd))
}

适用场景

图文叠加（文字盖在图片上）、角标（Badge）、加载覆盖层、水印

⚠️ 注意

Box 的大小由最大的子元素决定（除非指定了固定尺寸）
子元素默认对齐左上角，通过 contentAlignment 统一设置或 Modifier.align() 单独设置
BoxScope 提供了 matchParentSize() 修饰符，让子元素匹配 Box 的大小

LazyColumn / LazyRow —— 列表控件

作用

高性能列表，自带回收复用机制，只渲染屏幕上可见的 item。替代传统 RecyclerView。

核心属性

参数	类型	说明
`modifier`	`Modifier`	外观修饰
`state`	`LazyListState`	列表状态（滚动位置、首个可见项等）
`contentPadding`	`PaddingValues`	列表内边距
`reverseLayout`	`Boolean`	是否反转布局，默认 `false`
`verticalArrangement` / `horizontalArrangement`	`Arrangement.Vertical` / `Arrangement.Horizontal`	item 间距排列方式
`flingBehavior`	`FlingBehavior`	滑动惯性行为
`userScrollEnabled`	`Boolean`	是否允许用户滚动，默认 `true`
`content`	`LazyListScope.() -> Unit`	列表内容

LazyListScope 常用方法

方法	说明
`item { }`	添加单个 item
`items(count) { index -> }`	添加 count 个 item
`items(list) { item -> }`	遍历集合添加 item
`itemsIndexed(list) { index, item -> }`	遍历集合（带索引）
`stickyHeader { }`	粘性头部

示例

val items = List(1000) { "第 ${it + 1} 项" }

LazyColumn {
    items(items) { item ->
        Text(
            text = item,
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            fontSize = 18.sp
        )
        Divider()
    }
}

横向列表

LazyRow {
    items(20) { index ->
        Box(
            modifier = Modifier
                .size(100.dp)
                .padding(8.dp)
                .background(Color.Gray)
        ) {
            Text("$index")
        }
    }
}

带头部的列表

LazyColumn {
    item { Text("头部", fontSize = 24.sp) }
    items(dataList) { item -> Text(item) }
    item { Text("底部", fontSize = 12.sp) }
}

适用场景

聊天列表、商品列表、新闻列表、任何数据量较大需要滚动的场景

⚠️ 注意

不要在 LazyColumn 外套 Column 或 Row，会导致性能问题和布局异常
LazyVerticalGrid 可实现网格列表，LazyHorizontalGrid 可实现横向网格
使用 rememberLazyListState() 可程序化控制滚动位置
contentPadding + Arrangement.spacedBy() 可控制列表边距和 item 间距

Scaffold —— 页面骨架

作用

快速搭建标准 App 页面结构：顶部栏 + 内容区 + 底部栏 + 浮动按钮。

核心属性

参数	类型	说明
`modifier`	`Modifier`	外观修饰
`topBar`	`@Composable () -> Unit`	顶部栏，通常放 `TopAppBar`
`bottomBar`	`@Composable () -> Unit`	底部栏，放 `BottomAppBar` 或 `NavigationBar`
`floatingActionButton`	`@Composable () -> Unit`	浮动按钮，通常放 `FloatingActionButton`
`floatingActionButtonPosition`	`FabPosition`	FAB 位置：`FabPosition.Center` / `FabPosition.End`
`snackbarHost`	`@Composable () -> Unit`	Snackbar 宿主
`containerColor`	`Color`	内容区背景色
`content`	`@Composable (PaddingValues) -> Unit`	页面主体内容，必须在内容上加上 `innerPadding`

示例

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("我的应用") },
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = Color.Blue,
                titleContentColor = Color.White
            )
        )
    },
    bottomBar = {
        NavigationBar {
            NavigationBarItem(
                icon = { Icon(Icons.Default.Home, contentDescription = "首页") },
                label = { Text("首页") },
                selected = true,
                onClick = { }
            )
            NavigationBarItem(
                icon = { Icon(Icons.Default.Person, contentDescription = "我的") },
                label = { Text("我的") },
                selected = false,
                onClick = { }
            )
        }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { }) {
            Icon(Icons.Default.Add, contentDescription = "添加")
        }
    }
) { innerPadding ->
    Column(modifier = Modifier.padding(innerPadding)) {
        Text("页面内容在这里")
    }
}

TopAppBar 核心属性

参数	类型	说明
`title`	`@Composable () -> Unit`	标题内容
`modifier`	`Modifier`	外观修饰
`navigationIcon`	`@Composable () -> Unit`	左侧导航图标（返回键）
`actions`	`@Composable RowScope.() -> Unit`	右侧操作按钮组
`colors`	`TopAppBarColors`	颜色配置
`scrollBehavior`	`TopAppBarScrollBehavior?`	滚动行为

NavigationBar 核心属性

参数	类型	说明
`modifier`	`Modifier`	外观修饰
`containerColor`	`Color`	背景色
`contentColor`	`Color`	内容主色
`tonalElevation`	`Dp`	色调高度
`content`	`@Composable RowScope.() -> Unit`	导航项内容

FloatingActionButton 核心属性

参数	类型	说明
`onClick`	`() -> Unit`	点击回调
`modifier`	`Modifier`	外观修饰
`shape`	`Shape`	形状，默认 `CircleShape`
`containerColor`	`Color`	背景色
`contentColor`	`Color`	内容色
`content`	`@Composable () -> Unit`	内部内容

适用场景

几乎任何需要标准 App 页面的场景（首页、设置、个人中心等）

⚠️ 注意

**必须使用 innerPadding**，否则内容会被 TopAppBar / BottomBar 遮挡
Scaffold 自身不滚动，列表内容需要放在 content 内部的 LazyColumn 中
BottomAppBar 和 NavigationBar 的区别：前者是通用底部栏，后者专用于底部导航
FloatingActionButton 的 shape 默认圆形，可用 RoundedCornerShape(16.dp) 改为圆角矩形

Modifier 速查表

作用

Modifier 是所有 Compose 控件共用的外观修饰系统，控制控件的尺寸、边距、背景、形状、点击等。

常用 Modifier 速查

Modifier	类别	说明
`fillMaxWidth()`	尺寸	宽度填满父容器
`fillMaxHeight()`	尺寸	高度填满父容器
`fillMaxSize()`	尺寸	宽高都填满
`size(width, height)`	尺寸	固定宽高，如 `size(100.dp, 50.dp)`
`width(dp)`	尺寸	固定宽度，如 `width(200.dp)`
`height(dp)`	尺寸	固定高度，如 `height(48.dp)`
`wrapContentWidth()`	尺寸	宽度包裹内容
`wrapContentHeight()`	尺寸	高度包裹内容
`wrapContentSize()`	尺寸	包裹内容尺寸
`padding(all)`	内边距	四边相同内边距，如 `padding(16.dp)`
`padding(horizontal, vertical)`	内边距	水平和垂直内边距
`padding(start, top, end, bottom)`	内边距	分别设置四边内边距
`background(color)`	外观	背景色，如 `background(Color.Red)`
`background(color, shape)`	外观	带形状的背景色
`clip(shape)`	外观	裁剪形状，`RoundedCornerShape(12.dp)` / `CircleShape`
`border(width, color)`	外观	边框，`border(1.dp, Color.Gray)`
`border(width, color, shape)`	外观	带形状的边框
`shadow(elevation, shape)`	外观	阴影，`shadow(4.dp, RoundedCornerShape(8.dp))`
`alpha(float)`	外观	透明度，`0f`(全透明) ~ `1f`(不透明)
`clickable { }`	交互	点击事件
`combinedClickable(onClick, onLongClick)`	交互	点击 + 长按
`weight(float)`	布局	按权重分配空间（Row/Column 内使用）
`offset(x, y)`	布局	偏移位置，不影响布局计算
`align(alignment)`	布局	在父容器中的对齐方式（Box 内使用）
`scrollable(state, orientation)`	滚动	使控件可滚动
`verticalScroll(rememberScrollState())`	滚动	垂直滚动（Column 内使用）
`horizontalScroll(rememberScrollState())`	滚动	水平滚动（Row 内使用）
`animateContentSize()`	动画	内容尺寸变化时自动动画过渡
`testTag(string)`	测试	测试标签

综合示例

Box(
    modifier = Modifier
        .size(100.dp)
        .clip(RoundedCornerShape(12.dp))
        .background(Color.Blue)
        .border(2.dp, Color.White, RoundedCornerShape(12.dp))
        .clickable { },
    contentAlignment = Alignment.Center
) {
    Text("点我", color = Color.White)
}

⚠️ 注意

Modifier 顺序很重要：先 padding 再 background，背景色包含 padding 区域；反之则不包含
链式调用顺序是从外到内包裹的：Modifier.padding(16.dp).background(Color.Red) 等效于先包一层红色，再在红色内部加 16dp 边距
同一个 Modifier 只能使用一次（如不能写两个 .padding()），但可以通过链式组合其他 Modifier