美文网首页
Flutter 基本组件之Padding组件

Flutter 基本组件之Padding组件

作者: 翻滚吧王咸鱼 | 来源:发表于2019-10-17 15:51 被阅读0次

    在 html 中常见的布局标签都有 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。

    常用属性

    属性名 功能
    padding padding 值, EdgeInsetss 设置填充的值
    child 子组件
    /*
     * padding 组件 , 间距 组件 
     */
    
    class PaddinView extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
          child: GridView.count(
            crossAxisCount: 2,
            childAspectRatio: 2.0,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network('https://www.itying.com/images/flutter/1.png',
                    fit: BoxFit.cover),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network('https://www.itying.com/images/flutter/2.png',
                    fit: BoxFit.cover),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network('https://www.itying.com/images/flutter/3.png',
                    fit: BoxFit.cover),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network('https://www.itying.com/images/flutter/4.png',
                    fit: BoxFit.cover),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network('https://www.itying.com/images/flutter/5.png',
                    fit: BoxFit.cover),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
                child: Image.network('https://www.itying.com/images/flutter/6.png',
                    fit: BoxFit.cover),
              ),
            ],
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:Flutter 基本组件之Padding组件

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