在改變AppBar的情況下堅持使用BottomNavigationBar

因此，我正在創建一個具有5個BottomNavigationBarItem（s）的螢屏，在AppBar根據設計變化時，這些Item（s）最好能夠持續存在。以下是我的代碼：

class ExploreState extends State< ExploreScreen> {
  int _selectedIndexForBottomNavigationBar = 0;

  void _onItemTappedForBottomNavigationBar(int index) {
    setState(() {
      _selectedIndexForBottomNavigationBar = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      長度。3,
      孩子。new Scaffold(
        appBar: AppBar(
          底部。ColoredTabBar(
            color: Colors.white,
            tabBar: TabBar(
              labelColor: Colors.gray[900]。
              指示器。UnderlineTabIndicator(
                borderSide: borderSide(color: kPrimaryColor, width: 2.0),
              ),
              Tabs: <Widget>[
                Tab(text: "Job Posts")。
                標簽(
                  文本。"機構"。
                ),
                標簽(
                  文本。"All Applicants",
                ),
              ],
            ),
          ),
          提升。0.7。
          centerTitle: true。
          標題。文本(
            "尋找"。
            風格。TextStyle(fontSize: 18)。
          ),
          行動: <Widget>[
            Icon(Icons.search)。
            填充(
              padding: const EdgeInsets.symmetric(horizontal: 5.0) 。
            ),
          ],
        ),
        body: TabBarView(
          children: <Widget>[
            Jobs(),
            Agencies(),
            Applicants(),
          ],
        ),
        BottomNavigationBar: BottomNavigationBar()
          型別。BottomNavigationBarType.fixed,
          items: <BottomNavigationBarItem>[
            _bottomNavigationBarItem(
                AssetImage("assets/images/search-job.png"), 'Explore'）。)
            _bottomNavigationBarItem(
                AssetImage("assets/images/message.png"), 'Messaging')。
            _bottomNavigationBarItem(
                AssetImage("assets/images/forums.png"), 'Forums')。
            _bottomNavigationBarItem(
                AssetImage("assets/images/notifications.png"), 'notifications')。
            _bottomNavigationBarItem(
                AssetImage("assets/images/profile.png"), 'Edit Profile'）。)
          ],
          currentIndex。_selectedIndexForBottomNavigationBar,
          selectedItemColor: kPrimaryColor,
          onTap: _onItemTappedForBottomNavigationBar,
          selectedFontSize: 0,
        ),
      ),
    );
  }

  BottomNavigationBarItem _bottomNavigationBarItem(
      AssetImage icon, String label) {
    return BottomNavigationBarItem(
      activeIcon: _navItemIcon(
          icon, label, [kPrimaryColor, kPrimaryWelcomeColor], Colors.white）。)
      圖示。_navItemIcon(
          icon, label, [Colors.white, Colors.white], Color(0xFF4E5969)）。)
      標簽。""。
    );
  }

  Row _navItemIcon(AssetImage icon, String label, List< Color> backgrondColor,
      Color? foregroundColor) {
    return Row(
      兒童。[
        展開(
          child: 容器(
            裝飾。BoxDecoration(
              梯度。LinearGradient(
                開始。Alignment.bottomLeft,
                結束。Alignment.topRight,
                colors: backgrondColor,
                變換。GradientRotation(1.5)。
              ),
            ),
            孩子。Padding(
              padding: const EdgeInsets.all(15.0) 。
              兒童。列(
                兒童。[
                  ImageIcon(
                    圖示。
                    大小。25。
                    color: foregroundColor,
                  ),
                  文本(
                    label,
                    風格。TextStyle(color: foregroundColor, fontSize: 8) 。
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

class ColoredTabBar extends Container implements PreferredSizeWidget{
  ColoredTabBar({this.color = Colors.white, this.tabBar}）。)

  final Color color;
  final TabBar? tabBar;

  @override
  尺寸 get preferredSize => tabBar!.preferredSize;

  @override
  Widget build(BuildContext context) => Container(
        color: color,
        child: tabBar,
      );
}

一旦登錄，他們就會登陸到 "探索 "螢屏，但我想知道這種結構是否理想。我所想的是一個 "普通 "的腳手架，包括一個空白的主體、5個BottomNavigationBarItems和一個不斷變化的AppBar選單項（例如，"Messaging "有 "Conversations "和 "Appointments "AppBar項）。

我們如何正確地進行編碼呢。

這里有一個 "訊息 "BottomNavigationBarItem的例子。

uj5u.com熱心網友回復：

一種可能的方法：

這將一直作業到你能或想把所有這些部件放在同一個無狀態部件類中。很有可能以后你會想把它們分成不同的類，這樣你的代碼就更容易閱讀了。在這種情況下，你可以使用ChangeNotifier、ChangeNotifierProvider和Consumer來在你的小部件之間傳遞狀態變化，正如這里所解釋的那樣。

標籤：

上一篇：行動欄上的回傳按鈕

下一篇：flutter。如何在Web和Windows上啟用觸摸手勢（自更新2.5以來