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