×

浅尝flutter中的flex布局

96
YuTao_
2018.04.02 10:03* 字数 420

假设你已经掌握了flutter的一些基础知识,比如环境搭建,简单的dart语法,及flutter组件化思想。那么你适合阅读本篇教程,本教程演示一些flutter中的flex用法的简单示例.

在不懂height: 170.0,width:100.0如何适配不同分辨率的时候,只能用flex搞事情,所以咱看看flex如何在flutter中搞事情。

先看效果图:

效果图

分析一下需求:

分析需求

整个布局最外层是一个Row,左边是一个Column里面再嵌套一个Row,代码实现如下:

import 'package:flutter/material.dart';
class FluterFlex extends StatelessWidget {
  @override
  Widget  build(BuildContext context){   
    return new Center(
      child: new Row(
        children: <Widget>[
           new Column(
              children: <Widget>[
                new Text(
                  "为什么说Flutter是革命性的1",
                  style: new TextStyle(
                    fontSize: 18.0
                  ),
                ),   
                new Row(
                  children: <Widget>[
                    new Text(
                      '央视网',
                    ), 
                    new Text(
                        '2018-03-11',
                    ), 
                  ],
                ),               
              ],
            ),
            new Image.asset(
              'images/head.jpg',
              height: 100.0,
              fit: BoxFit.cover,
              ),
        ],
      ),    
    );
  }
}

这只是纯组件代码,还没有添加任何样式

最外层的Row,有2个子组件,它们主轴为水平方向,起点为左端,和flex的flex-direction: row同样效果,子组件的对齐方式为两端对齐,flex代码为 justify-content: space-between。

然后左侧布局为Column,主轴方向为垂直方向,两个子组件的布局方式为两端对齐,flex代码为: justify-content:space-between。

左侧底部同理。在flutter如果实现呢,代码如下:


import 'package:flutter/material.dart';

class FluterFlex extends StatelessWidget {
  @override
  Widget  build(BuildContext context){
    
   return new Center(
    child:new Container(
      height: 120.0,
      padding:new EdgeInsets.only(left:20.0,right:20.0),//给最外层添加padding
      decoration: new BoxDecoration(
        border:new Border.all(//新手建议给每一个组件写一个border
          color:const Color(0xff6d9eeb),
        )
      ),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐
        children: <Widget>[
          new Expanded(
            flex:2,//这个item占据剩余空间的份数,因为总数为3,所以此处占据2/3
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,//子组件的在交叉轴的对齐方式为起点
              mainAxisAlignment:MainAxisAlignment.spaceBetween ,//子组件在主轴的排列方式为两端对齐
              children: <Widget>[
                new Container(
                  padding:new EdgeInsets.only(top:15.0),//标题写一个top-padding
                  decoration: new BoxDecoration(
                    border:new Border.all(
                        color:const Color(0xff6d999b),
                    )
                  ),
                  child:new Text(
                  "为什么说Flutter是革命性的",
                  style: new TextStyle(
                    fontSize: 18.0
                  ),

                  ), 
                ),
                 new Container(
                  padding:const EdgeInsets.only(right:13.0,bottom:15.0),
                  decoration: new BoxDecoration(
                    border:new Border.all(
                        color:const Color(0xff6d999b),
                    )
                  ),
                  child:new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件在主轴的排列方式为两端对齐
                    children: <Widget>[
                      new Text(
                        '央视网',
                      ), 
                       new Text(
                        '2018-03-11',
                      ), 
                    ],
                  )
                 
                ),
                
              ],
            ),
          ),
          new Expanded(
            flex:1,//这个item占据剩余空间的份数,因为总数为3,所以此处占据1/3
            child: new Image.asset(//本地图片加载,需在pubspec.yaml配置
              'images/head.jpg',
              height: 100.0,
              fit: BoxFit.cover,
              ),
          ),
        ],
      ),
    ),
   );
  }
}


效果如图:

效果图

在上面代码中,还添加了一些其他样式,并且给每一个组件都加了border,这样便于新手布局。我们把多余的代码删掉然后稍作改进,完整代码如下:


import 'package:flutter/material.dart';

class FluterFlex extends StatelessWidget {
  @override
  Widget  build(BuildContext context){
    
   return new Center(
    child:new Container(
      height: 120.0,
      padding:new EdgeInsets.only(left:20.0,right:20.0),//给最外层添加padding
      decoration: new BoxDecoration(
        border:new Border(
          bottom: new BorderSide(width: 1.0,color:const Color(0xff999999))
          // color:const Color(0xff6d9eeb),
        )
      ),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐
        children: <Widget>[
          new Expanded(
            flex:2,//这个item占据剩余空间的份数,因为总数为3,所以此处占据2/3
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,//子组件的在交叉轴的对齐方式为起点
              mainAxisAlignment:MainAxisAlignment.spaceBetween ,//子组件的排列方式为主轴两端对齐
              children: <Widget>[
                new Container(
                  padding:new EdgeInsets.only(top:15.0),//标题写一个top-padding
                  child:new Text(
                  "为什么说Flutter是革命性的",
                  style: new TextStyle(
                    fontSize: 18.0
                  ),
                  ), 
                ),
                 new Container(
                  padding:const EdgeInsets.only(right:13.0,bottom:15.0),
                  child:new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐
                    children: <Widget>[
                      new Text(
                        '央视网',
                      ), 
                       new Text(
                        '2018-03-11',
                      ), 
                    ],
                  )
                 
                ),
                
              ],
            ),
          ),
         
          new Expanded(
            flex:1,//这个item占据剩余空间的份数,因为总数为3,所以此处占据1/3
            child: new Image.asset(//本地图片加载,需在pubspec.yaml配置
              'images/head.jpg',
              height: 100.0,
              fit: BoxFit.cover,
              ),
          ),
        ],
      ),
    ),  
   );
  }
}


代码都是参考官网英文文档撸的,但是本人是英语渣,所以如果有不对的地方,欢迎大家指正!

YuTao的flutter之路
Web note ad 1