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

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

我是一名 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 和可滚动的 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'),)),);
                  }
              ),)
          ],);
  }
}

输出：

解决方法

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