Flutter：帶有 CupertinoTabBar 的 CupertinoTabScaffold 在推送屏幕中的 TabBar 底部創建 RenderFlex 溢出問題

Question

我是一名 iOS 開發人員，所以我知道 TabBarController 如何在 iOS 中工作。 現在我正在研究 Flutter（第一個 APP）。

我有一個應用程序，它使用 CupertinoApp-CupertinoTabScaffold-CupertinoTabBar 在每個嵌套屏幕中保留 BottomNavigationBar。

我的應用程序的層次結構

- CupertinoTabScaffold
-- CupertinoTabBar
--- Home
---- CupertinoPageScaffold (HomePage)
----- CupertinoPageScaffold (DetailPage pushed from home)
--- OtherTabs

要從 HomePage 推送到 DetailPage，使用以下代碼：

Navigator.push(
              context,
              Platform.isIOS
                  ? CupertinoPageRoute(
                      builder: (context) => DetailPage(),
                    )
                  : MaterialPageRoute(
                      builder: (context) => DetailPage(),
                    ));

現在在詳細信息屏幕上，我需要Column以獲得一些視圖和GridView 。 所以當GridView有更多項目時，它會給出錯誤：

A RenderFlex overflowed by 56 pixels on the bottom.

這是TabBar的空間。

那么如何在 Flutter 中管理這種類型的頁面，在嵌套屏幕中有 TabBar 和可滾動的小部件？

我已經關注了這個鏈接。

詳細頁面代碼：

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        heroTag: 'detail 1',
        backgroundColor: Colors.white,
        transitionBetweenRoutes: false,
        middle: Text('Tab 1 detail',),
      ),
      child: Container(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 100.0,
              child: Center(
                child: Text('Some Menus'),
              ),
            ),
            Container(
              child: GridView.builder(
                itemCount: 30,
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCountAndFixedHeight(
                    crossAxisCount: 2,
                    crossAxisSpacing: 4,
                    mainAxisSpacing: 4,
                    height: 160.0
                  ),
                  itemBuilder: (context, index) {
                  return Container(
                    child: Padding(
                      padding: EdgeInsets.all(6.0),
                      child: Container(
                          decoration: BoxDecoration(
                              color: Color(0xFF3C9CD9),
                              borderRadius: BorderRadius.all(Radius.circular(30.0)),
                              boxShadow: <BoxShadow>[
                                BoxShadow(
                                    color: Colors.black54,
                                    blurRadius: 2.0,
                                    offset: Offset(4, 3))
                              ]),
                          child: Padding(
                            padding: EdgeInsets.all(30.0),
                            child: Center(
                              child: Text('$index'),
                            ),
                          )),
                    ),
                  );
                  }
              ),
            )
          ],
        ),
      ),
    );
  }
}

Output：

Answer 1

用Expanded小部件包裝 Grid

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        heroTag: 'detail 1',
        backgroundColor: Colors.white,
        transitionBetweenRoutes: false,
        middle: Text('Tab 1 detail',),
      ),
      child: Container(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: 100.0,
              child: Center(
                child: Text('Some Menus'),
              ),
            ),
            Expanded(
              child: Container(
                child: GridView.builder(
                  itemCount: 30,
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCountAndFixedHeight(
                      crossAxisCount: 2,
                      crossAxisSpacing: 4,
                      mainAxisSpacing: 4,
                      height: 160.0
                    ),
                    itemBuilder: (context, index) {
                    return Container(
                      child: Padding(
                        padding: EdgeInsets.all(6.0),
                        child: Container(
                            decoration: BoxDecoration(
                                color: Color(0xFF3C9CD9),
                                borderRadius: BorderRadius.all(Radius.circular(30.0)),
                                boxShadow: <BoxShadow>[
                                  BoxShadow(
                                      color: Colors.black54,
                                      blurRadius: 2.0,
                                      offset: Offset(4, 3))
                                ]),
                            child: Padding(
                              padding: EdgeInsets.all(30.0),
                              child: Center(
                                child: Text('$index'),
                              ),
                            )),
                      ),
                    );
                    }
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}