美文网首页
Flutter 容器 Padding

Flutter 容器 Padding

作者: 态度哥 | 来源:发表于2020-04-28 22:51 被阅读0次

容器类Widget 不同于 布局类Widget:

  1. 首先,布局类Widget 的子Widget 一般都是数组,而容器类Widget 的子Widget 一般只有一个。
  2. 布局类Widget 是按照一定的排列方式对其 子Widget 进行排列,而 容器类Widget 用于嵌套其他 Widget,对 Widget 添加一些修饰(补白或背景色等)、变换(旋转或剪裁等)、或限制(大小等)。

Padding

Padding 通过给自己指定内边距来添加 子Widget。

Padding 的必填参数是 padding,然后其 child 参数就是你想要添加 padding 的 Widget

构造函数:

const Padding({
    Key key,
    @required this.padding, // 容器内边距
    Widget child,
  }) : assert(padding != null),
       super(key: key, child: child);
属性 定义
EdgeInsets.all(double value) 上、下、左、右 边距都一样
EdgeInsets.only({this.left = 0.0,this.top = 0.0,this.right = 0.0,this.bottom = 0.0}) 可以单独指定一个的边距
EdgeInsets.fromLTRB(10, 20, 30, 40) 分别指定四个方向的值
EdgeInsets.symmetric({double vertical = 0.0,double horizontal = 0.0,}) vertical 的值是上、下边距, horizontal 是左右边距的值
Padding(
  //指定四个方向相同的值
  //padding: EdgeInsets.all(10),
  //分别指定四个方向的值
  //padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
  //可以单独指定一个的边距 left、right、bottom、top
  //padding: EdgeInsets.only(bottom: 10),
  //vertical 的值是上、下边距, horizontal 是左右边距的值
  padding: EdgeInsets.symmetric(vertical: 10, horizontal: 50),
  child: Text("Padding"),
),

相关文章

  • Flutter 容器 Padding

    容器类Widget 不同于 布局类Widget: 首先,布局类Widget 的子Widget 一般都是数组,而容器...

  • Flutter容器组件<填充Padding>

    Flutter入门笔记系列文章部分内容来源于《Flutter 实战》,如有侵权请联系删除! 在介绍组件和布局的时候...

  • 【Flutter】常用布局容器一

    Container 以 html box 容器为标准,给容器设置宽高 padding margin padding...

  • flutter Padding

    Padding Padding可以给其子节点添加补白(填充),我们在前面很多示例中都已经使用过它了,现在来看看它的...

  • 菜鸟认识前端标签

    1、padding 内填充 设置后会撑大容器大小,即大小为padding + 容器大小 2、margin 外边距...

  • css中如何做到容器按比例缩放

    这次主要讨论应用padding属性实现容器的高度根据容器的宽度按比例缩放。 padding: css paddin...

  • web前端

    margin和padding的区别: margin是指容器边框到父空间的距离; padding是指内容到容器bor...

  • Flutter快速上手3:边距容器Padding

    主要用于设置控件之间的边距,用法参见?Container[https://www.jianshu.com/p/99...

  • flutter之Padding, Align控件

    Padding 对于前端同学来说Padding只是一个属性,但是在flutter里边Padding确是一个控件;对...

  • Flutter学习--Padding组件

    一、介绍 Flutter 中很多 Widget 是没有 padding 属 性。这个时候我们可以用 Padding...

网友评论

      本文标题:Flutter 容器 Padding

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