我将BottomNavigatorBar
更改为CupertinoTabBar
,但它不压缩当前的Tab
,
换句话说,由于CupertinoTabBar
阻止了该信息,因此我无法在该选项卡底部显示一些信息。
我不知道这是Cupertino
样式的默认行为,但我需要解决它。我尝试用CupertinoTabView
和/或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();
}
},
);
最佳答案
只需提供不是半透明的backgroundColor
,即不透明度为1.0(默认情况下不透明度小于1.0):
return CupertinoTabScaffold(
tabBar: CupertinoTabBar(
backgroundColor: CupertinoTheme.of(context).barBackgroundColor.withOpacity(1.0),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
// ...
它实现了与
CupertinoNavigationBar
相同的逻辑:documentation对此不太清楚,可能是因为这是Cupertino导航小部件的通用逻辑(至少是
CupertinoTabBar
和CupertinoNavigationBar
)并且被认为是直观的。看起来this method会影响主要内容和标签栏的位置:
/// 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;
}