Compose 修饰符 - 外观（尺寸、样式、布局、行为）

原创 已于 2026-01-06 21:33:35 修改 · 705 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android

于 2025-09-23 19:05:11 首次发布

通过链式调用串接API，因此顺序会影响最终结果（例如边距padding）。

一、尺寸

1.1 指定具体值

设置首选值（如果指定的大小不满足父布局的约束，则尺寸将会无效。如果强制设置而不考虑父控件约束使用 requiredSize）。

width

.width(width: Dp)

.width(intrinsicSize: IntrinsicSize)        //参数为 IntrinsicSize.Min 或 IntrinsicSize.Max

height

.height(height: Dp)

.height(intrinsicSize: IntrinsicSize)

size

.size(size: Dp)        //同时设置宽高

.size(width: Dp, height: Dp)        //分开设置宽高

Modifier.width(5.dp).height(5.dp)
Modifier.size(5.dp)    //同时设置宽高

1.2 强制使用指定值

.requiredWidth(width: Dp)
.requiredHeight(height: Dp)
.requiredSize(size: Dp)

@Preview(showBackground = true)
@Composable
fun Demo1() {
    Column(modifier = Modifier.size(100.dp)) {
        Image(
            painter = painterResource(id = R.drawable.logo_wechat_rectangle),
            contentDescription = null,
            modifier = Modifier.size(150.dp)    //大于父控件尺寸，无效
        )
    }
}

@Preview(showBackground = true)
@Composable
fun Demo2() {
    Column(modifier = Modifier.size(100.dp)) {
        Image(
            painter = painterResource(id = R.drawable.logo_wechat_rectangle),
            contentDescription = null,
            modifier = Modifier.requiredSize(150.dp)    //强制使用指定值
        )
    }
}

1.3 占可用空间百分比

取值范围0.0~1.0。

.fillMaxWidth(fraction: Float = 1f)

.fillMaxHeight(fraction: Float = 1f)

.fillMaxSize(fraction: Float = 1f)

Modifier.fillMaxWidth(0.5f).fillMaxHeight(0.5f)
Modifier.fillMaxSize(0.5f)    //同时设置宽高

1.4 设置范围

限定在最大值和最小值之间。

.widthIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified)

.heightIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified)

.sizetIn(min: Dp = Dp.Unspecified, max: Dp = Dp.Unspecified)

父容器和子元素width一致，只看height
父heightIn(min=10、max=40)子 < 父：子显示3，父显示10
子 = 父：高度显示一致
子 > 度：都为父最大值40
父heightIn(min=50)子 < 父：子显示30，父显示50
子 = 父：高度显示一致
子 > 度：都为子高度100
父height(max=50)子 < 父：都为子高度30
子 = 父：高度显示一致
子 > 度：都为父最大值50
@Composable
fun Demo() {
    Box(Modifier
        .background(Color.Blue)
        .width(50.dp)
        .heightIn(min = 10.dp,max = 40.dp)
    ){
        Box(Modifier
            .background(Color.Red)
            .width(25.dp)
//            .height(30.dp)  //子元素在范围内，蓝色和红色一样高
//            .height(900.dp)  //子元素高于最大值，红色蓝色都显示40dp
            .height(3.dp)  //子元素低于最小值，红色显示3dp，蓝色显示10dp
        )
    }
}

1.5 权重

其它组件正常设置尺寸，设置了 weight(1F) 的组件会填充剩余布局。

    fun Modifier.weight(
        @FloatRange(from = 0.0, fromInclusive = false) weight: Float,
        fill: Boolean = true,        //为 true 时元素将占据所分配的全部高度
    ): Modifier

1.6 根据自身内容决定大小

例如可以让 Image 根据自身内容来决定控件的大小。根据子元素的宽高来确定自身的大小，如果自身设置了最小宽高的话则会被忽略。当无边界 unbounded = true 的时候，自身设置了最大宽高的话也会被忽略。

.wrapContentWidth(
    align: Alignment.Horizontal = Alignment.CenterHorizontally,        //对齐方式
    unbounded: Boolean = false
)
.wrapContentHeight(
    align: Alignment.Vertical = Alignment.CenterVertically,
    unbounded: Boolean = false
)
.wrapContentSize(
    align: Alignment = Alignment.Center,
    unbounded: Boolean = false
)
@Composable
fun Demo() {
    Column(modifier = Modifier.width(50.dp)) {
        Image(
            painter = painterResource(id = R.drawable.logo_baidu),
            contentDescription = null,
            modifier = Modifier.wrapContentSize()
        )
    }
}

二、样式

2.1 边距 padding

由于调整链式调用的顺序就能实现内外边距，因此是没有margin的。

分别设置：上下左右.padding(
    start = 0.dp,
    top = 0.dp,
    end: Dp = 0.dp,
    bottom: Dp = 0.dp
)
分别设置：水平、垂直.padding(
    horizontal: Dp = 0.dp,
    vertical: Dp = 0.dp
)
同时设置.padding(all: Dp)

val paddingValues = PaddingValues(10.dp,20.dp,30.dp,40.dp)

@Composable
fun Demo() {
    //传入一个PaddingValues对象
    Box(Modifier.padding(paddingValues)) {}
}

2.3 背景 background

.background(
    color: Color,        //颜色
    shape: Shape = RectangleShape        //形状
)

.background(

    brush: Brush,        //

    shape: Shape = RectangleShape,

    @FloatRange(from = 0.0, to = 1.0)

    alpha: Float = 1.0f

)

2.4 剪裁 clip

根据传入的 Shape 可以裁剪成对应的形状。

.clip(shape: Shape)

可传：CircleShape圆形、RectangleShape矩形、RoundedCornerShape圆角矩形、CutCornerShape切角矩形

@Composable
fun Demo() {
    Image(
        painter = painterResource(id = R.drawable.logo_wechat_square),
        contentDescription = null,
        modifier = Modifier.clip(CircleShape)
    )
}

2.5 边框 border

.border(width: Dp, brush: Brush, shape: Shape)

@Composable
fun Demo() {
    Image(
        painter = painterResource(id = R.drawable.logo_wechat_square),
        contentDescription = null,
        modifier = Modifier.border(
            width = 2.dp,
            color = Color.Blue,
            shape = CircleShape
        )
    )
}

2.6 阴影 shadow

详见

2.7 透明度 alpha

fun Modifier.alpha(
    alpha: Float        //取值范围0~1F
)

@Composable
fun Demo() {
    Column {
        Image(
            painterResource(id = R.drawable.logo_wechat_square),
            contentDescription = null,
            modifier = Modifier.alpha(0.8F)
        )
        Image(
            painterResource(id = R.drawable.logo_wechat_square),
            contentDescription = null,
            modifier = Modifier.alpha(0.3F)
        )
    }
}

2.8 模糊 blur

fun Modifier.blur(
    radius: Dp,
    edgeTreatment: BlurredEdgeTreatment = BlurredEdgeTreatment.Rectangle,
)

预设两种通过 BlurredEdgeTreatment 伴生对象调用：Rectangle和Unbounded。或者通过构造传个 Shape，Shape 不包含的区域不会显示。

@Composable
fun BlurScreen() {
    Row {
        Image(
            modifier = Modifier.size(100.dp),
            painter = painterResource(R.drawable.rainbow),
            contentDescription = ""
        )
        Image(
            modifier = Modifier.size(100.dp)
                .blur(
                    radius = 30.dp,
                    edgeTreatment = BlurredEdgeTreatment.Unbounded
                ),
            painter = painterResource(R.drawable.rainbow),
            contentDescription = ""
        )
        Image(
            modifier = Modifier.size(100.dp)
                .blur(
                    radius = 10.dp,
                    edgeTreatment = BlurredEdgeTreatment.Rectangle
                ),
            painter = painterResource(R.drawable.rainbow),
            contentDescription = ""
        )
        Image(
            modifier = Modifier.size(100.dp)
                .blur(
                    radius = 10.dp,
                    edgeTreatment = BlurredEdgeTreatment(CircleShape)
                ),
            painter = painterResource(R.drawable.rainbow),
            contentDescription = ""
        )
    }
}

三、布局

3.1 子元素对齐 align

Compose能理解当前代码所处作用域，例如给一个纵向布局设置子元素对齐，IDE给出的选项自动变成 Alignment.Horizontal，说明只能在水平方向上指定对齐方式。

具体选项和效果详见  

.align(alignment: Alignment)

四、行为

4.1 偏移 offset

.offset(x: Dp = 0.dp, y: Dp = 0.dp)

@Composable
fun Demo() {
    Image(
        painter = painterResource(id = R.drawable.logo_wechat_square),
        contentDescription = null,
        modifier = Modifier.offset(x = 10.dp, y = 30.dp)
    )
}

4.2 旋转 rotate

围绕其中心点旋转的角度。

.rotate(degrees: Float)

@Composable
fun Demo() {
    Image(
        painter = painterResource(id = R.drawable.logo_wechat_square),
        contentDescription = null,
        modifier = Modifier.rotate(180F)
    )
}

4.3 可见性追踪

4.3.1 可见性变化时 onVisibilityChanged

用于需要根据组件可见性变化触发副作用的场景，如自动播放/暂停视频或启动动画。

fun Modifier.onVisibilityChanged(
    @IntRange(from = 0) minDurationMs: Long = 0,        //达到该最小可见时间才触发（避免频繁触发带来的性能开销）
    @FloatRange(from = 0.0, to = 1.0) minFractionVisible: Float = 1f,        //最小可见比例
    viewportBounds: LayoutBoundsHolder? = null,
    callback: (Boolean) -> Unit,
)
Box(modifier = Modifier
    .size(100.dp)
    .background(Color.White)
    .onVisibilityChanged(
        minDurationMs = 500,
        minFractionVisible = 1F
    ) { visible ->
        if (visible) ... else ...
    }
) {}

4.3.2 第一次出现在屏幕上 onFirstVisible

处理元素首次出现在屏幕上的场景，如记录曝光日志。

fun Modifier.onFirstVisible(
    @IntRange(from = 0) minDurationMs: Long = 0,         //达到该最小可见时间才触发（避免频繁触发带来的性能开销）
    @FloatRange(from = 0.0, to = 1.0) minFractionVisible: Float = 1f,        //最小可见比例
    viewportBounds: LayoutBoundsHolder? = null,
    callback: () -> Unit,
)
Box(modifier = Modifier
    .size(100.dp)
    .background(Color.White)
    .onFirstVisible(
        minDurationMs = 500,
        minFractionVisible = 1F
    ) {
        //当元素可见超过500ms时...
    }
) {}

4.3.4 尺寸发生变化时 onSizeChanged

如需实现组件间的尺寸联动（即一个组件的尺寸影响另一个组件的尺寸），应当使用 Layout 或 SubcomposeLayout 布局组件。

fun Modifier.onSizeChanged(

    onSizeChanged: (IntSize) -> Unit        //拿到的是元素的新尺寸

)

JetPack Compose理解
jackzhouyu的专栏
09-17 1336
每次点击该按钮时，调用方都会更新 clicks 的值。Compose 会再次调用 lambda 与 Text 函数以显示新值；此过程称为“重组”。不依赖于该值的其他函数不会进行重组。 重组过程 组合只能通过初始组合生成且只能通过重组进行更新。重组是修改组合的唯一方式。 重组通常由对 State 对象的更改触发。Compose 会跟踪这些操作，并运行组合中读取该特定 State 的所有可组合项以及这些操作调用的无法跳过的所有可组合项。 在重组期间，可组合项调用的可组合项与上个组合期间调用的可组合项不同，Com
Jetpack Compose | Modifier常用修饰符的使用(一)
小马快跑的博客
12-06 1917
设置内外边距，传统的View 体系中有padding和margin的区分，而在Compose中只有一个padding修饰符，根据不同的位置可以表示内、外边距。而如果改为使用fillMaxSize，则会被设置为父组件所允许的最大尺寸。对于border而言，在其前面的设置padding 可以认为是外边距，在其后面设置的 padding可以认为是内边距。上述示例中是一个综合示例，不仅使用了weight修饰符，还是用的clip、border等，最终展示是三个均分的底部Tab控件，其中图片大小不受父控件的约束。
compose——侧边栏（抽屉）
wy313622821的博客
09-19 1190
【代码】compose——侧边栏。
为 Kotlin 的函数添加作用域限制（以 Compose 为例）
xiaokangss的博客
12-07 609
不知道各位是否已经开始了解 Jetpack Compose？如果已经开始了解并且上手写过。那么，不知道你们有没有发现，在 Compose 中对于作用域（Scopes）的应用特别多。比如， 修饰符只能用在 或者 作用域中。又比如， 组件只能用在 作用域中。如果你还没有了解过 Compose 的话，那你也应该知道，kotlin 标准库中有 5 个作用域函数： ，这 5 个函数会以不同的方式持有和返回上下文对象，即调用这些函数时，在它们的 lambda 参数中写的代码将处于特定的作用域。不知道你们
Android Compose边框样式输入框
简单记录工作和学习
09-03 1633
【代码】Android Compose边框样式输入框。
探索Jetpack Compose修饰符：Compose-Modifiers-Playground源码解析
根据您提供的文件信息，我们可以从中提取以下知识点： 1. Kotlin编程语言知识： ...了解这些知识点有助于开发者更好地掌握Jetpack Compose修饰符的使用，并能利用相关的IDEA插件进行交互式学习和界面设计实践。
compose-samples-main.zip
07-17
Compose的布局系统基于`Modifier`，它允许开发者通过一系列的修饰符来定义组件的大小、位置和样式。例如，可以使用`padding`、`width`、`height`等修饰符来控制组件的外观。 6. **动画与过渡**： 动画和过渡在...
Android开发之Compose基础学习-Modifier用法：可以修饰控件的很多属性，大小，布局，样式，可点击等
xiayiye5的博客
06-10 916
Modifier修饰符基本用法
Compose_Modifier 修饰符的常见使用
mikimo的博客
07-20 626
Compose_Modifier 修饰符的常见使用
JetpackCompose布局与修饰符全解析
在 Jetpack Compose 中，修饰符是控制可组合函数视觉外观和行为的优雅方式。以 `background()` 为例，它是 `Modifier` 的扩展函数，接收一个 `Modifier` 实例，调用 `then()` 方法并返回结果（一个连接后的修饰符）...
Compose 学习笔记（一）—— Compose 初探
chuyouyinghe的专栏
11-14 1302
Google 毕竟憋了两年，怎么说也得有两把刷子的。Compose 是 Google 新推出的适用于 Android 的新式声明性界面工具包。个人理解的声明性的意思是：UI 的控件只需要我们一开始的时候声明创建出来，绑定了数据就可以了，后续的更新可以全部交给 Compose 处理。Google 是考虑到现在的应用展示的绝大多数不是静态数据，更多的是会实时更新的。而现有的 xml 界面，更新比较复杂繁琐，很容易出现同步错误。
Compose | UI组件(一) | Modifier修饰符
让 学习 成为一种 习惯 ( 谭祖爱 & 技术博客 )
01-26 1358
Modifier通过链式调用方式为所有Compose组件设置样式（大小，背景色，边框，间隙，位移等等）这些都是常用到的Compose组件修饰符，可以修饰我们的界面。
android Compose Modifier介绍
sinat_35541927的博客
11-25 1773
android Compose的 Modifier修饰符几种使用方式介绍
compose--修饰符Modifier
aruba的博客
12-09 3022
上次介绍了compose中大多数的标准组件，此外还有两个重要的组件：列表LazyColumn和LazyRow，以及约束布局ConstraintLayout，在使用它们之前，先来认识Modifier 修饰符Modifier Modifier之前已经运用过，它能做的事情很多，不仅仅是改变组件的样式，还能够改变组件的位置，以及自定义交互事件，关于Modifier的所有用法，可以查看官方文档：https:...
Compose学习 -＞ Button()
qq_27400335的博客
12-09 2109
【代码】Compose学习 -> Button()
Jetpack Compose布局之Row
chxip的博客
12-02 9030
基本使用 Row纵向线性布局，类似于LinearLayout设置为android:orientation="horizontal"时的效果： Row() { Text(text = "千里之行,") Text(text = "始于足下") } 上方两个Text将按照垂直排列布局，Row默认大小为内部子控件的大小，类似于wrap_content 大小调整 可以使用modifier来设置Row的大小： Row(modifier = Modifier .height(200.dp) .
实战！如何在 Jetpack Compose 中拥有一个与众不同的 Modifier
datian1234的博客
06-15 859
相信大家既然已经学习了Compose，那想必也非常熟悉如何使用 Modifer 了，由于Compose 被Android 团推设计的非常容易上手，所以有不了解如何使用的朋友可以去看看 [文档]
Compose_03--设置布局参数
weixin_42404361的博客
11-18 2273
在Compose中，如果需要设置控件的布局参数，需要设置控件modifier属性。 一、设置控件的宽高 1.设置宽度铺满全屏：modifier = Modifier.fillMaxWidth()； 2.设置高度铺满全屏：modifier = Modifier.fillMaxHeight()； 3.设置宽高铺满全屏：modifier = Modifier.fillMaxWidth().fillMaxHeight() 或modifier = Modifier.fillMaxSize() 二..
Compose 文本设置表格
最新发布
Dev Blog
03-04 92
默认是1.dp 的，还可以针对不同单元格设置border。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值