Question

我将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();
        }
      },
    );

Answer 1

只需提供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;
}

Answer 2

也许是一个错误，但是，只需向CupertinoTabBar的prop backgroundColor中添加一个值：

tabBar：CupertinoTabBar（ backgroundColor：Theme.of（context）.backgroundColor

Answer 3

尝试增加内容的height或在内容下添加SizedBox。

Answer 4

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();
                    break;
                  case 1:
                    return SecondPage();
                    break;
                  case 2:
                    return ThirdPage();
                    break;
                    case 3:
                    return FourthPage();
                    break;
                    case 4:
                    return FifthPage();
                    break;
                  default:
                    return FirstPage();
                    break;
                }
            }),
              ),
      );



  }
}

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(

    );
  }
}

查看此示例，也许可以帮忙

CupertinoTabBar阻止当前选项卡底部如何避免这种情况或它是默认行为

4 个答案: