android compose 设置 padding 和 margin

第一种方法, 直接看代码!!

Kotlin 复制代码
@Preview(name = "Test Margin")
@Composable
fun TestMargin() {
    Box(modifier = Modifier.fillMaxWidth()) {
        Text(
            modifier = Modifier
                // 设置 margin
                .padding(start = 10.dp)
                .width(100.dp)
                .height(100.dp)
                .background(color = Color.Red)
                // 设置 padding
                .padding(start = 50.dp),
            text = "Hello World!"
        )
    }
}

再看看 ChatGPT 的回答

在 Jetpack Compose 中,ConstraintLayout 是一个非常灵活的布局工具。要在 ConstraintLayout 中设置 paddingmargin,需要分别使用 padding 修饰符和 Modifier.constrainAs 中的 margin 参数。

设置 padding

padding 是为整个 ConstraintLayout 或其子元素添加内边距。

Kotlin 复制代码
ConstraintLayout(
    modifier = Modifier.padding(16.dp) // 为整个 ConstraintLayout 设置 padding
) {
    val (box) = createRefs()

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Red)
            .padding(8.dp) // 为 Box 设置 padding
            .constrainAs(box) {
                top.linkTo(parent.top)
                start.linkTo(parent.start)
            }
    )
}

设置 margin

margin 是为子元素在 ConstraintLayout 中设置外边距。

Kotlin 复制代码
ConstraintLayout {
    val (box) = createRefs()

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Red)
            .constrainAs(box) {
                top.linkTo(parent.top, margin = 16.dp) // 设置 marginTop
                start.linkTo(parent.start, margin = 16.dp) // 设置 marginStart
            }
    )
}

综合使用

你可以同时设置 paddingmargin 来控制布局内外的间距。

Kotlin 复制代码
ConstraintLayout(
    modifier = Modifier.padding(16.dp) // 整个布局的 padding
) {
    val (box1, box2) = createRefs()

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Blue)
            .constrainAs(box1) {
                top.linkTo(parent.top, margin = 8.dp) // 外边距
                start.linkTo(parent.start, margin = 8.dp)
            }
            .padding(4.dp) // 内边距
    )

    Box(
        modifier = Modifier
            .size(100.dp)
            .background(Color.Green)
            .constrainAs(box2) {
                top.linkTo(box1.bottom, margin = 16.dp)
                start.linkTo(box1.end, margin = 16.dp)
            }
            .padding(4.dp)
    )
}

在这个例子中,ConstraintLayout 本身有一个 16dp 的 padding,而每个 Box 有它们自己的 paddingmargin

相关推荐
流***陌1 小时前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
可触的未来,发芽的智生2 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
大熊的瓜地2 小时前
Android automotive 框架
android·android car
烛阴2 小时前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python
前端开发爱好者2 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
why技术2 小时前
从18w到1600w播放量,我的一点思考。
java·前端·后端
欧阳呀2 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
清风徐来QCQ2 小时前
css总结
前端
私人珍藏库3 小时前
[Android] Alarm Clock Pro 11.1.0一款经典简约个性的时钟
android·时钟
天***88963 小时前
js封装一个双精度算法实现
开发语言·前端·javascript