美文网首页
Flutter UI基础- padding,margin(转)

Flutter UI基础- padding,margin(转)

作者: 程序猿南哥 | 来源:发表于2019-08-20 18:01 被阅读0次

今天我们来看一下UI布局中常用的东西,padding,margin

这两个属性还是比较好理解,首先,我们要知道,在哪些widget 中有这两个属性
Container
Expanded

Container
4182047-dac3a05f4e2cec89.png
在属性中可以清晰的看到 padding,margin 两个属性。

我们来详细了解一下这两个属性的作用效果。

通过代码,还是截图的方式给大家展示效果。
首先上代码:


4182047-ac5e5e4bda1f77cc.png
代码效果:
4182047-54fad14217cb9169.png
很明显,这里的效果 可以清楚的看到 padding 的效果,是 修改的子控件child 在父控件上的内边距。
接下来看一下 Expanded
Expanded
代码:
4182047-91f4d12e5da68710.png
代码效果: 4182047-ac151e6f511670a8.png

很明显,效果不会印象内部空间的位置,而是 修改当前控件在父控件 上的内边距 (修改的是自己)

经过这两个测试,能清楚的明白padding 和margin 的区别是效果。

相关文章

  • Flutter UI基础- padding,margin(转)

    今天我们来看一下UI布局中常用的东西,padding,margin 这两个属性还是比较好理解,首先,我们要知道,在...

  • Flutter UI基础- padding,margin

    今天我们来看一下UI布局中常用的东西,padding,margin 这两个属性还是比较好理解,首先,我们要知道...

  • css中的内外边距和背景

    css中margin、padding和background margin与padding margin常用代码有 ...

  • js拖拽元素互换位置

    *{margin: 0;padding: 0;} body,ul,li{margin:0;padding:0;...

  • css基础——margin和padding

    代码: 总结: 1、外边距:margin,自己不增加2、内边距:padding,效果会是自己也增加,其实自己没变,...

  • margin?padding?

    用margin还是用padding这个问题是每个学习CSS进阶时的必经之路。 CSS边距属性定义元素周围的空间。通...

  • Qss样式的盒子模型

    Margin: 在border外面 Border:在margin和padding中间绘制边框 padding:填充...

  • Flutter - Container(容器)

    前端大家都知道有div用来布局,可以设置margin,padding等等,Flutter里面相对应的就是Conta...

  • day03

    盒子模型margin,padding的传参 margin,padding参数规律:上(top) 右(right) ...

  • CSS笔记10:盒子模型

    28 盒子模型 29 padding padding不能为负值 30 margin 31. margin塌陷现象 ...

网友评论

      本文标题:Flutter UI基础- padding,margin(转)

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