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