美文网首页程序员
Flutter学习笔记15-填充(Padding)

Flutter学习笔记15-填充(Padding)

作者: zombie | 来源:发表于2020-10-21 09:33 被阅读0次

    Padding可以给其子节点添加填充(留白),和边距效果类似。源码如下:

      ... 
      const Padding({
        Key key,
        @required this.padding,
        Widget child,
      }) : assert(padding != null),
           super(key: key, child: child);
    
      final EdgeInsetsGeometry padding;
      ...
    

    EdgeInsets

    EdgeInsets提供的方法:

    • fromLTRB(double left, double top, double right, double bottom)
      分别指定四个方向的填充。
    • all(double value) :
      所有方向均使用相同数值的填充。
    • only({left, top, right ,bottom })
      可以设置具体某个方向的填充(可以同时指定多个方向)。
    • symmetric({ vertical, horizontal })
      用于设置对称方向的填充,vertical指top和bottom,horizontal指left和right。

    代码示例:

    class PaddingDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Padding(
          // 上下左右各添加16像素补白
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(left: 8.0),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ),
              Padding(
                // 上下各添加8像素补白
                padding: EdgeInsets.symmetric(vertical: 8.0),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
              Padding(
                // 分别指定四个方向的补白
                padding: EdgeInsets.fromLTRB(20.0, .0, 20.0, 20.0),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.orange,
                ),
              ),
            ],
          ),
        );
      }
    }
    

    代码运行效果图如下:


    代码传送门

    相关文章

      网友评论

        本文标题:Flutter学习笔记15-填充(Padding)

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