美文网首页
2019-10-20 Flutter学习(六)Padding

2019-10-20 Flutter学习(六)Padding

作者: 六桥明月夜 | 来源:发表于2019-10-20 17:42 被阅读0次

    今儿个主要学习一下几个基本组件
    Padding Row Column Expended 四个组件

    Padding 组件用法

    Flutter提供的组件是没有padding属性的,所以在处理内边距的时候,就需要用到Padding组件来设置容器和子元素之间的间距 ,贴代码

    class LayoutDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
          child: GridView.count(
            crossAxisCount: 2,
            childAspectRatio: 1.7,
            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),
              )
            ],
        ));
      }
    }
    

    fit的几个属性
    BoxFit.fill:充满父容器。 可能会拉伸变形
    BoxFit.contain:尽可能大,保持图片分辨率。不变形,填不满
    BoxFit.cover:充满容器,不变形可能会被截断。
    BoxFit.none:图片居中显示,不改变分大小,可能会被截断。
    BoxFit.fitWidth:图片填满宽度,高度可能会被截断
    BoxFit.fitHeight:图片填满高度,宽度可能会被截断
    BoxFit.scaleDown:图片可以完整显示,但是可能不能填充满。

    Row组件横向

    void main() => runApp(MyApp());
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
            home: Scaffold(
          appBar: AppBar(title: Text('FlutterDemo')),
          body: LayoutDemo(),
        ));
      }
    }
    class LayoutDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 800.0,
          width: 400.0,
          color: Colors.pink,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,    
            crossAxisAlignment: CrossAxisAlignment.start,     //用的比较少
            children: <Widget>[
              IconContainer(Icons.search,color: Colors.blue),
              IconContainer(Icons.home,color: Colors.orange),
              IconContainer(Icons.select_all,color: Colors.red),
            ],
          ),
        );
      }
    }
    class IconContainer extends StatelessWidget{
      double size=32.0;
      Color color=Colors.red;
      IconData icon;
      IconContainer(this.icon,{this.color,this.size});
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          height: 100.0,
          width: 100.0,
          color: this.color,
          child: Center(
            child: Icon(this.icon,size: this.size,color: Colors.white)
          ),
        );
      }
    }
    

    MainAxisAlignment.start表示居于Container容器X轴开始位置也就是左侧
    CrossAxisAlignment.start表示居于Container容器Y轴最上边
    MainAxisAlignment.spaceEvenly表示控件均匀铺开

    Column水平布局跟ROW用法一样

    class LayoutDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 800.0,
          width: 400.0,
          color: Colors.pink,
          child: Column(    
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.end,   
            children: <Widget>[
              IconContainer(Icons.search,color: Colors.blue),
              IconContainer(Icons.home,color: Colors.orange),
              IconContainer(Icons.select_all,color: Colors.red),
            ],
          ),
        );
      }
    }
    

    Flutter Expanded 类似 Web 中的 Flex 布局(权重的方式布局)

    class LayoutDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child:   Container(
                    height: 180,
                    color: Colors.black,
                    child: Text('你好Flutter'),
                  ),
                )
              ],
            ),
            SizedBox(height: 10),
            Row(
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 180,
                    child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover),
                  )
                ),
                SizedBox(width: 10),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 180,
                    child: ListView(
                      children: <Widget>[
                        Container(
                          height: 85,
                          child: Image.network("https://www.itying.com/images/flutter/3.png",fit: BoxFit.cover),
                        ),
                        SizedBox(height: 10),
                        Container(
                          height: 85,
                          child: Image.network("https://www.itying.com/images/flutter/4.png",fit: BoxFit.cover),
                        )
                      ],
                    )
                  )
                ),
              ],
            )
          ],
        );
      }
    }
    

    flex表示权重比例,同android 中的 weight。
    内容比较简单,看代码 ,就不多说了。

    相关文章

      网友评论

          本文标题:2019-10-20 Flutter学习(六)Padding

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