5-flutter 布局和列表

布局和列表

类型	作用特点
Container	只有一个子 Widget。默认充满，包含了padding、margin、color、宽高、decoration 等配置。
Padding	只有一个子 Widget。只用于设置Padding，常用于嵌套child，给child设置padding。
Center	只有一个子 Widget。只用于居中显示，常用于嵌套child，给child设置居中。
Stack	可以有多个子 Widget。 子Widget堆叠在一起。
Column	可以有多个子 Widget。垂直布局。
Row	可以有多个子 Widget。水平布局。
Expanded	只有一个子 Widget。在 Column 和 Row 中充满。
ListView	可以有多个子 Widget。自己意会吧。

1 container 的使用

new Container(
      ///四周10大小的maring
      margin: EdgeInsets.all(10.0),
      height: 120.0,
      width: 500.0,
      decoration: new BoxDecoration(
          ///弧度为4.0
          borderRadius: BorderRadius.all(Radius.circular(4.0)),
          ///设置了decoration的color，就不能设置Container的color。
          color: Colors.red,
          ///边框
          border: new Border.all(color:Colors.blue, width: 5)),
          child:new Text("666666"))
      ), 

2 Row 横向 布局 和 Column 布局

主轴方向是 start 或 center 等；副轴方向方向是 start 或 center 等；mainAxisSize 是充满最大尺寸，或者只根据子 Widget 显示最小尺寸。

//主轴方向，Column的竖向、Row我的横向
mainAxisAlignment: MainAxisAlignment.start, 
//默认是最大充满、还是根据child显示最小大小
mainAxisSize: MainAxisSize.max,
//副轴方向，Column的横向、Row我的竖向
crossAxisAlignment :CrossAxisAlignment.center,

    _showItem(IconData icon,String text){
      // 充满Row 的横向布局
      return new Expanded(
        flex: 1,
        // 居中显示
        child: new Center(
            // 横向布局
              child: new Row(
              // 主轴居中
                mainAxisAlignment: MainAxisAlignment.center,
              // // 大小按照最大充满
                mainAxisSize: MainAxisSize.max,
              // // 竖向居中
                crossAxisAlignment: CrossAxisAlignment.center,
               children: <Widget>[
              //一个图标
               new Icon(icon,size:20,color:Colors.red),
              // 间隔
              new Padding(padding: new EdgeInsets.only(left:10)),
              //   // 显示文本
              new Text(text,
              style:new TextStyle(color: Colors.black,fontSize: 20),
              //   // // 超过的省略显示为省略号
               overflow: TextOverflow.ellipsis,
              //   // // 最长1行
               maxLines: 1,
               ),
               ],
             ),
        ),
      );
  }

3 RelativeLayout 相对布局

用于使widget 相对于彼此位置排。

4 分层布局

Stack 控件将其子项相对于框的边缘定位。如果您只想重叠多个子窗口小部件，这个类很有用。

譬如说 图片上面添加一个标签

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: const Alignment(0.5, 0.5),
      children: <Widget>[
        CircleAvatar(backgroundImage: NetworkImage("http://img.redocn.com/sheying/20150213/mulanweichangcaoyuanfengjing_3951976.jpg"),),            
        Container(decoration: BoxDecoration(color: Colors.red),
        child: Text("Ye Ge"),)    
      ],
    );
  }

5 设置布局样式

用以下的方式进行布局

• padding
• center
• column
• row

6 LIstView 列表组件

scrollView 和 Tableview 的作用

更新列表方法 setState()

Flutter 渲染引擎会检查widget 树来查看widget 树 是否有什么地方改变了

动态的添加数据使用ListView.builder 来构建列表

class _MyCanvas extends StatelessWidget{
    @override
    Widget build(BuildContext context) {

      // 制作一些数据
      _makeSomeData(){
        // 创建一个存放widget的数组
        List<Widget> arr = [];
        for (int i =0;i < 100;i ++){
          arr.add(Padding(padding: EdgeInsets.all(20),child: Text("第 $i 行"),));
        }     
        return arr;
      }

      // TODO: implement build
      return Scaffold(
        appBar: AppBar(title: Text("Alex Code"),),
        body: Center(
          child: ListView(children: _makeSomeData()),          
        ),
      );
        
}