Flutter 控件系列教程之GridTile

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: [ 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: [ 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

本文章由javascript技术分享原创和收集