title	description	type
GridTile	GridTile介绍及使用案例	widget

GridTile

继承关系
Object>Diagnosticable>DiagnosticableTree>Widget>StatelessWidget>GridTile

基本用法

GridTile(
        header: Container(
          color: Color(0x22000000),
          height: 50,
          child: Text(
            'header',
            style: TextStyle(color: Colors.redAccent),
          ),
        ),
        child: Container(
          color: Color(0x22119233),
          height: 50,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                'start',
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.redAccent),
              ),
              Text(
                'end',
                textAlign: TextAlign.center,
                style: TextStyle(color: Colors.redAccent),
              ),
            ],
          ),
        ),
        footer: Container(
          color: Color(0x22000000),
          height: 50,
          child: Text(
            'footer',
            style: TextStyle(color: Colors.redAccent),
          ),
        ),
      )

• Color 0x22 透明处理，为了能看到底层被覆盖内容。
• MainAxisAlignment.spaceBetween 将两个text撑到上下两边

属性介绍

• header 页眉，头部Widget，
• child 子Widget，必需实现
• footer 页脚，底部Widget

效果图

切面效果图

特点

通过代码和图可以看到GridTile有如下几个特点：

• 页眉、页脚在视图顶层，覆盖在child之上
• child组件高度设置无效，这个源码里可以看到原因
• 继承自StatelessWidget，一旦创建，不可变。

源码分析

 @override
  Widget build(BuildContext context) {
    if (header == null && footer == null)
      return child;

    return Stack(
      children: <Widget>[
        Positioned.fill(
          child: child,
        ),
        if (header != null)
          Positioned(
            top: 0.0,
            left: 0.0,
            right: 0.0,
            child: header,
          ),
        if (footer != null)
          Positioned(
            left: 0.0,
            bottom: 0.0,
            right: 0.0,
            child: footer,
          ),
      ],
    );
  }

• Stack 创建一个堆结构视图
• header 、footer都为null时直接返回child
• Positioned.fill 让child充满父组件
• Positioned(top: 0.0,left: 0.0,right: 0.0,child: header,) header放顶部显示
• Positioned(left: 0.0,bottom: 0.0,right: 0.0,child: footer,) footer放底部显示

总结

GridTile适合做带有页眉页脚的页面样式，但有一点child 顶部和底部会被页眉页脚覆盖，用的时候需要注意。

作者：i校长
博客地址：Flutter 控件系列教程之GridTile
网站：jetpack
Github: ibaozi-cn