美文网首页小白学Flutter
Flutter UI基础- padding,margin

Flutter UI基础- padding,margin

作者: leowwh | 来源:发表于2018-11-29 11:01 被阅读344次

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

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

Container

Expanded

Container

Container

在属性中可以清晰的看到 padding,margin 两个属性。

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

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

首先上代码:

padding 代码

代码效果

效果

很明显,这里的效果 可以清楚的看到 padding 的效果,是  修改的子控件child 在父控件上的内边距。

接下来看一下

Expanded

代码部分

代码部分

代码效果

代码效果

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

经过这两个测试,能清楚的明白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/zujxcqtx.html