如何在 flutter 中更改上部标签栏时有条件地显示底部导航栏

Question

我的应用程序上有以下测试屏幕：

如上所示，我的意图是将 3 个小部件连接到每个上方的选项卡。而且我还想要一个底部导航栏，但我只希望它在用户位于 Upper Tab 3 下时可见。例如，在上面的屏幕截图中，用户位于 Upper Tab 1 下，但底部导航栏仍然可见。

这是我为实现此目的而编写的代码，但它不起作用。无论我在哪个上部标签栏下，我都会看到底部导航栏。我应该怎么做才能使我的底部导航栏仅在用户位于 Upper Tab 3 选项卡栏下时可见？

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  bool get wantKeepAlive => true;

  int _currentBottomBarIndex = 0;
  bool _showBottomBar = false;

  final _tabs = [
    Center(child: Text('Bottom Tab 1')),
    Center(child: Text('Bottom Tab 2')),
  ];

  Widget _changeUpperTab(upperTabIdx, isBottomBar) {
    setState(() {
      _showBottomBar = isBottomBar;
    });

    if (_showBottomBar) {
      return _tabs[_currentBottomBarIndex];
    } else {
      return Center(child: Text('Tab ' + upperTabIdx.toString()));
    }
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Test App'),
          bottom: TabBar(
            indicatorColor: Colors.white,
            tabs: [
              Tab(
                  child: Text(
                'Upper Tab 1',
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
              Tab(
                  child: Text(
                'Upper Tab 2',
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
              Tab(
                  child: Text(
                'Upper Tab 3',
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            _changeUpperTab(1, false),
            _changeUpperTab(2, false),
            _changeUpperTab(3, true),
          ],
        ),
        bottomNavigationBar: (_showBottomBar)
            ? BottomNavigationBar(
                currentIndex: _currentBottomBarIndex,
                items: [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.search),
                      label: 'Search',
                      backgroundColor: Colors.yellow),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.home),
                      label: 'Home',
                      backgroundColor: Colors.red),
                ],
                onTap: (index) {
                  setState(() {
                    _currentBottomBarIndex = index;
                  });
                },
              )
            : null,
      ),
    );
  }
}

Answer 1

您可以使用此代码在您想要的选项卡中创建它，但我建议您为该选项卡创建一个单独的 statelessWidget，这样您可以使它更有条理。

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  bool get wantKeepAlive => true;

  int _currentBottomBarIndex = 0;
  bool _showBottomBar = false;

  final _tabs = [
    Center(child: Text('Bottom Tab 1')),
    Center(child: Text('Bottom Tab 2')),
  ];

  Widget _changeUpperTab(upperTabIdx, isBottomBar) {
    setState(() {
      _showBottomBar = isBottomBar;
    });

    if (_showBottomBar) {
      return Scaffold(
        body: _tabs[_currentBottomBarIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentBottomBarIndex,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'Search',
                backgroundColor: Colors.yellow),
            BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
                backgroundColor: Colors.red),
          ],
          onTap: (index) {
            setState(() {
              _currentBottomBarIndex = index;
            });
          },
        ),
      );
    } else {
      return Center(child: Text('Tab ' + upperTabIdx.toString()));

    }
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Test App'),
          bottom: TabBar(
            indicatorColor: Colors.white,
            tabs: [
              Tab(
                  child: Text(
                    'Upper Tab 1',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )),
              Tab(
                  child: Text(
                    'Upper Tab 2',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )),
              Tab(
                  child: Text(
                    'Upper Tab 3',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            _changeUpperTab(1, false),
            _changeUpperTab(2, false),
            _changeUpperTab(3, true),
          ],
        ),

      ),
    );
  }
}

如何在 flutter 中更改上部标签栏时有条件地显示底部导航栏

How to conditionally show bottom navigation bar when changing upper tab bar in flutter

tabbar

dart

flutter

flutter-layout

flutter-navigation