美文网首页
Jetpack Compse 组件 内边距(padding)和外

Jetpack Compse 组件 内边距(padding)和外

作者: 雨来 | 来源:发表于2022-05-21 23:10 被阅读0次

以我目前的储备是 Compose中组件的内边距和外边距是由 pading和background 相互作用组成的

Margin

image.png
@Composable
fun Margin(): Unit {
    //padding函数在前面 background在后面就是margin效果
    Text(
        text = "margin",
        textAlign = TextAlign.Center,
        modifier = Modifier
            .padding(horizontal = 4.dp, vertical = 10.dp)
            .background(Color.Red)
            .height(20.dp)
            .fillMaxWidth(1f)
    )

}

Padding

image.png
@Composable
fun Margin(): Unit {
    //background函数在前面 pading在后面就是padding效果
    Text(
        text = "margin",
        textAlign = TextAlign.Left,
        modifier = Modifier
            .background(Color.Red)
            .padding(start = 40.dp,top = 30.dp,bottom = 60.dp)
            .height(20.dp)
            .fillMaxWidth(1f)
    )

}

如果没有background 直接使用padding的效果就是margin

image.png

注意点:

pading和background一定要写在height和width前面不然会不起作用


image.png

一个总结的挺好的博客链接:
https://www.jianshu.com/p/f4f5f3004d37

相关文章

  • Jetpack Compse 组件 内边距(padding)和外

    以我目前的储备是 Compose中组件的内边距和外边距是由 pading和background 相互作用组成的 M...

  • 内边距

    内边距 1.内边距为边框和内容之间的内边距 2.格式 padding-top padding-right padd...

  • 04-盒子

    padding-top:100px 内边距 背景会延伸到内边距 修改内边距会影响和子的大小 padding:上...

  • HTML+CSS进阶

    输入 设置单一边距:padding-top(上内边距)、padding-bottom(下内边距)、padding-...

  • 学习第八天

    外边距和内边距的简写方式: padding:padding: 上下左右; 0 padding: 上下...

  • css盒子-内外边距

    内边距(padding) padding属性用于设置内边距。 是指 边框与内容之间的距离。 padding-to...

  • 盒模型(Box Model)

    盒模型由元素内容,内边距,外边距,边框组成。 一、内边距(padding) .box{ padding-top:...

  • HTML CSS学习笔记(二)-----页面布局

    padding & margin 有三个影响HTML元素布局的重要属性:padding(内边距)、margin(外...

  • 内边距padding

    内边距 padding 边框和内容之间的距离 2.格式2.1非连写padding-top: ;padding-r...

  • padding 内边距

    一个值 :上下左右 比如: padding:1px 两个值:上下 左右 三个值:上 左右 下 四个值:上右下左(顺时针)

网友评论

      本文标题:Jetpack Compse 组件 内边距(padding)和外

      本文链接:https://www.haomeiwen.com/subject/zhuhprtx.html