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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容