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