代码之家 › 专栏 › 技术社区 › cipli onat

CupertinoTabBar块当前选项卡底部如何避免这种行为

flutter dart

cipli onat · 技术社区 · 7 年前

我改变了主意 BottomNavigatorBar CupertinoTabBar 它不会压缩电流 Tab ,

换句话说,我将无法显示当前选项卡底部的某些信息,因为 丘比特诺塔巴尔 挡住它。

我不知道这是你的默认行为 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();
        }
      },
    );

0 回复 | 直到 7 年前

jibiel 6 年前

只是提供 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 和 CupertinoavigationBar酒吧 至少)并被认为是直观的。

看起来像 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;
}

Valter Barbosa 6 年前

可能是一个bug,但是,只需为CupertinoTabBar的prop backgroundColor添加一个值:

标签栏:Cupertinoabbar( 背景颜色:主题(上下文)。背景色

mirkancal 7 年前

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

Sagar Acharya 6 年前

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(

    );
  }
}

看看这个例子也许这能帮上忙