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

从主页推送到详情页，使用以下代码：

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 的 space。

那么如何在 Flutter 中管理这种类型的页面，在嵌套屏幕中有 TabBar 和可滚动的 Widgets？

我关注了this link。

详情页面代码：

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'),
                            ),
                          )),
                    ),
                  );
                  }
              ),
            )
          ],
        ),
      ),
    );
  }
}

输出：

Answer 1

用 Expanded 小部件包裹网格

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'),
                              ),
                            )),
                      ),
                    );
                    }
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Flutter：带有 CupertinoTabBar 的 CupertinoTabScaffold 在推送屏幕中的 TabBar 底部创建 RenderFlex 溢出问题

Flutter: CupertinoTabScaffold with CupertinoTabBar creating RenderFlex overflow issue at bottom for TabBar in pushed screens

flutter

cupertinotabbar

cupertinonavigationbar