flutter Padding

作者: CQ_TYL | 来源:发表于2019-02-20 11:02 被阅读0次
Padding

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

Padding({
  ...
  EdgeInsetsGeometry padding,
  Widget child,
})

EdgeInsetsGeometry是一个抽象类,开发中,我们一般都使用EdgeInsets,它是EdgeInsetsGeometry的一个子类,定义了一些设置补白的便捷方法。

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 _home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _homeState();
  }
}

class _homeState extends State<_home> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("title"),
          centerTitle: true,
        ),
        body: //通过ConstrainedBox来确保Stack占满屏幕
            Padding(
          //上下左右各添加16像素补白
          padding: EdgeInsets.all(16.0),
          child: Column(
            //显式指定对齐方式为左对齐,排除对齐干扰
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                //左边添加8像素补白
                padding: const EdgeInsets.only(left: 8.0),
                child: Text("Hello world"),
              ),
              Padding(
                //上下各添加8像素补白
                padding: const EdgeInsets.symmetric(vertical: 8.0),
                child: Text("I am Jack"),
              ),
              Padding(
                // 分别指定四个方向的补白
                padding: const EdgeInsets.fromLTRB(20.0, .0, 20.0, 20.0),
                child: Text("Your friend"),
              )
            ],
          ),
        ));
  }
}

相关文章

网友评论

    本文标题:flutter Padding

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