Flutter布局：Stack、IndexedStack、GridView

Stack（堆叠布局）

可以允许其子widget简单的堆叠在一起

属性

  Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,//对齐方式
    this.textDirection,//文本的方向
    this.fit = StackFit.loose,//定义如何设置non-positioned节点尺寸，默认为loose。
    this.overflow = Overflow.clip,//超过的部分是否裁剪掉（clipped）
    List<Widget> children = const <Widget>[],
  }) : super(key: key, children: children);

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'TableView',
      theme: new ThemeData(
        primaryColor: Colors.green,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('首页'),
        ),
        body: Center(
          child:new Stack(
            alignment: Alignment(0.6, 0.6),
            children: <Widget>[
              ClipOval(
              child:new Image.network(
                "http://img2018.cnblogs.com/news/66372/201809/66372-20180921155512352-228425089.jpg",
                color: Colors.blue,
                colorBlendMode: BlendMode.saturation,
                width: 200,
                height: 200,
                fit: BoxFit.fill,
                ),
              ),
              Container(
                decoration: BoxDecoration(color:Colors.black45,),
                child: Text(
                  '复仇者',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),
       ),
      ),
    );
  }
}

IndexedStack

IndexedStack继承自Stack，它的作用是显示第index个child，其他child都是不可见的。所以IndexedStack的尺寸永远是跟最大的子节点尺寸一致。

下面展示一些 内联代码片。

  IndexedStack({
    Key key,
    AlignmentGeometry alignment = AlignmentDirectional.topStart,//对齐方式
    TextDirection textDirection,//文字方向
    StackFit sizing = StackFit.loose,//如何确定没有使用 Position 包裹的子组件的大小，可选值有StackFit.loose：子组件宽松取值，可以从 min 到 max。StackFit.expand：子组件取最大值.StackFit.passthrough：不改变子组件约束条件。
    this.index = 0,//需要显示的children widget索引
    List<Widget> children = const <Widget>[],
  })

new IndexedStack(
            index: 0,
            alignment: Alignment(0.6, 0.6),
            children: <Widget>[
              ClipOval(
              child:new Image.network(
                "http://img2018.cnblogs.com/news/66372/201809/66372-20180921155512352-228425089.jpg",
                color: Colors.blue,
                colorBlendMode: BlendMode.saturation,
                width: 200,
                height: 200,
                fit: BoxFit.fill,
                ),
              ),
              Container(
                decoration: BoxDecoration(color:Colors.black45,),
                child: Text(
                  '复仇者',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          )

只显示底部图片，不显示文字

GridView（网格布局）

GridView在移动端上非常的常见，就是一个滚动的多列列表，实际的使用场景也非常的多。

属性

scrollDirection：滚动的方向，有垂直和水平两种，默认为垂直方向（Axis.vertical）。
reverse：默认是从上或者左向下或者右滚动的，这个属性控制是否反向，默认值为false，不反向滚动。
controller：控制child滚动时候的位置。
primary：是否是与父节点的PrimaryScrollController所关联的主滚动视图。
physics：滚动的视图如何响应用户的输入。
shrinkWrap：滚动方向的滚动视图内容是否应该由正在查看的内容所决定。
padding：四周的空白区域。
gridDelegate：控制GridView中子节点布局的delegate。
cacheExtent：缓存区域。