Dart CupertinoTabBar阻止当前选项卡底部部分如何避免这种情况，还是默认行为

我将我的

BottomNavigatorBar

更改为

cupertinotabar

，并且它不会压缩当前的

选项卡

换句话说，我无法显示当前选项卡底部的某些信息，因为

CupertinoTabBar

会阻止它

我不知道这是

Cupertino

样式的默认行为，但我需要解决它。我试图用

cupertinobview

和/或

CupertinoPageScaffold

来包装我的页面，这两种方法都不起作用

你有什么建议吗

这是我的相关代码：

    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(currentIndex: 2, items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.explore), title: Text('Explore')),
        BottomNavigationBarItem(
            icon: Icon(Icons.card_travel), title: Text('Adventure')),
        BottomNavigationBarItem(
            icon: Icon(Icons.search), title: Text('Search')),
        BottomNavigationBarItem(
            icon: Icon(Icons.map), title: Text('Create Tour')),
        BottomNavigationBarItem(
            icon: Icon(Icons.person), title: Text('Profile')),
      ]),
      tabBuilder: (context, index) {
        switch (index) {
          case 0:
            return CupertinoTabView(
              builder: (context) => ExplorePage(),
            );
            break;
          case 1:
            return AdventurePage();
            break;
          case 2:
            return CupertinoTabView(
              builder: (context) => SearchTourPage(),
            );
            break;
          case 3:
            return BasicRouteInfoForm();
            break;
          case 4:
            return ProfilePage();
            break;
          default:
            return SearchTourPage();
        }
      },
    );

---

尝试增加内容的

高度

，或在内容下方添加

大小框

。

可能是一个bug，但只需为Cupertinotabar的道具背景色添加一个值即可：

tabBar:CupertinoTabBar( backgroundColor:Theme.of（context）.backgroundColor

import“package:flatter/material.dart”；
import 'package:flutter/material.dart';

import 'package:flutter/cupertino.dart';

main()=>runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyApp> {
  int currentTabIndex = 0;

  onTapped(int index) {
    setState(() {
      currentTabIndex = index;
    });
  }

  List<Widget> tabs = [
    FirstPage(),
    SecondPage(),
    ThirdPage(),
    FourthPage(),
    FifthPage(),
  ];

  @override
  Widget build(BuildContext context) {
    
      return MaterialApp(
              home: Scaffold(
                              body: CupertinoTabScaffold(
            tabBar: CupertinoTabBar(items: [
                BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.home), title: Text("Home")),
                BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.search), title: Text("Search")),
                BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.person), title: Text("User Info")),
                    BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.add), title: Text("sample Info")),
                    BottomNavigationBarItem(
                    icon: Icon(CupertinoIcons.add_circled), title: Text("sample2 Info"))
            ]),
            tabBuilder: (context, index) {
                switch (index) {
                  case 0:
                    return FirstPage();
                  case 1:
                    return SecondPage();
                  case 2:
                    return ThirdPage();
                  case 3:
                    return FourthPage();
                  case 4:
                    return FifthPage();
                  default:
                    return FirstPage();
                }
            }),
              ),
      );
    
 

  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

class FourthPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

class FifthPage extends StatefulWidget {
  @override
  _FifthPageState createState() => _FifthPageState();
}

class _FifthPageState extends State<FifthPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

进口“包装：颤振/cupertino.dart”；
main（）=>runApp（MyApp（））；
类MyApp扩展了StatefulWidget{
MyApp（{Key-Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
int currentTabIndex=0；
onTapped（int索引）{
设置状态（）{
currentTabIndex=索引；
});
}
列表选项卡=[
首页（），
第二页（），
第三页（），
第四页（），
第五页（），
];
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
正文：Cupertinobsaffold(
tabBar:CupertinoTabBar（项目：[
底部导航气压计(
图标：图标（CupertinoIcons.home），标题：文本（“home”），
底部导航气压计(
图标：图标（CupertinoIcons.search），标题：文本（“search”），
底部导航气压计(
图标：图标（CupertinoIcons.person），标题：文本（“用户信息”），
底部导航气压计(
图标：图标（CupertinoIcons.add），标题：文本（“示例信息”），
底部导航气压计(
图标：图标（CupertinoIcons.add_circled），标题：文本（“示例2信息”））
]),
tabBuilder：（上下文，索引）{
开关（索引）{
案例0：
返回首页（）；
案例1：
返回第二页（）；
案例2：
返回第三页（）；
案例3：
返回第四页（）；
案例4：
返回第五页（）；
违约：
返回首页（）；
}
}),
),
);
}
}
类FirstPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
);
}
}
类SecondPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
);
}
}
类ThirdPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
);
}
}
类第四页扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
);
}
}
类第五页扩展StatefulWidget{
@凌驾
_FifthPageState createState（）=>\u FifthPageState（）；
}
类_第五页状态扩展状态{
@凌驾
小部件构建（构建上下文）{
返回容器(
);
}
}

---

查看此示例，这可能会有所帮助

只需提供非半透明的背景色，即不透明度为1.0（默认情况下不透明度小于1.0）：

---

我想我可以这样解决这个问题，但这不是解决这个问题的好办法，我必须对每一页都这样做。您好，以您的例子，我如何才能转到子页而不丢失菜单栏？

return CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    backgroundColor: CupertinoTheme.of(context).barBackgroundColor.withOpacity(1.0),
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
 // ...

/// Indicates whether the tab bar is fully opaque or can have contents behind
/// it show through it.
bool opaque(BuildContext context) {
  final Color backgroundColor =
      this.backgroundColor ?? CupertinoTheme.of(context).barBackgroundColor;
  return CupertinoDynamicColor.resolve(backgroundColor, context).alpha == 0xFF;
}