flutter-widget-ListBody

ListBody是一个“列表组件”，作用是按给定轴的方向，按照顺序排列子节点，他是一个不常用的控件，一般配合ListView或者Column使用。

• 布局行为：在主轴上，子节点按照顺序进行布局，在交叉轴上，子节点尺寸会被拉伸，以适应交叉轴的区域。
• 在主轴上，给予子节点的控件必须是不受限制的，使得子节点可以全部被容纳，ListBody不会去裁剪或者缩放子节点。
• ListBody的布局代码非常简单，根据主轴的方向，对子节点一次排布。

下面我们看一下他的简单使用

class ListBodyDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListBodyDemo"),
      ),
      body: Column(
        children: <Widget>[
          ListBody(
            mainAxis: Axis.vertical,
            reverse: false,
            children: <Widget>[
              Container(color: Colors.red,
                  width: 50.0,
                  height: 150.0,
                  child: Text('标题1', style: TextStyle(color: Color(0xffffffff)))),
              Container(color: Colors.yellow,
                  width: 50.0,
                  height: 50.0,
                  child: Text('标题2', style: TextStyle(color: Color(0xffffffff)))),
              Container(color: Colors.green,
                  width: 50.0,
                  height: 50.0,
                  child: Text('标题3', style: TextStyle(color: Color(0xffffffff)))),
              Container(color: Colors.blue,
                  width: 50.0,
                  height: 50.0,
                  child: Text('标题4', style: TextStyle(color: Color(0xffffffff)))),
              Container(color: Colors.black,
                  width: 50.0,
                  height: 50.0,
                  child: Text('标题5', style: TextStyle(color: Color(0xffffffff))))

            ],
          )
        ],
      ),
    );
  }

}

效果如下

可以看到在交叉轴方向我们虽然定义了width=50，但是并没有起作用，而主轴方向的height是起作用的，如果想要限制他的宽度的话，那么就得让这个ListBody的父容器的宽度固定。示例如下

class ListBodyDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListBodyDemo"),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(
              width: 150,
              child: ListBody(
                mainAxis: Axis.vertical,
                reverse: false,
                children: <Widget>[
                  Container(
                      color: Colors.red,
                      width: 50.0,
                      height: 150.0,
                      child: Text('标题1',
                          style: TextStyle(color: Color(0xffffffff)))),
                  Container(
                      color: Colors.yellow,
                      width: 50.0,
                      height: 50.0,
                      child: Text('标题2',
                          style: TextStyle(color: Color(0xffffffff)))),
                  Container(
                      color: Colors.green,
                      width: 50.0,
                      height: 50.0,
                      child: Text('标题3',
                          style: TextStyle(color: Color(0xffffffff)))),
                  Container(
                      color: Colors.blue,
                      width: 50.0,
                      height: 50.0,
                      child: Text('标题4',
                          style: TextStyle(color: Color(0xffffffff)))),
                  Container(
                      color: Colors.black,
                      width: 50.0,
                      height: 50.0,
                      child: Text('标题5',
                          style: TextStyle(color: Color(0xffffffff))))
                ],
              ))
        ],
      ),
    );
  }
}

效果为