Question

我一直在尝试创建一个聊天应用程序，而我对此并不陌生。如何将页面及其特定页面添加到底部栏的选项卡式视图中？例如，用于聊天选项卡的聊天屏幕和用于配置文件选项卡的配置文件页面。页面之间的导航应该流畅。

这是我的bottom_bar.dart代码：

import 'package:flutter/material.dart';
import 'package:messenger_clone/animated_bottom_bar.dart';

class ButtomBar extends StatefulWidget {
  static const String id = 'buttom_bar';
  final List<BarItem> barItems = [
    BarItem(
      text: "Chats",
      iconData: Icons.chat_bubble_outline,
      color: Colors.indigo,
    ),
    BarItem(
      text: "People",
      iconData: Icons.people_outline,
      color: Colors.pinkAccent,
    ),
    BarItem(
      text: "Search",
      iconData: Icons.search,
      color: Colors.yellow.shade900,
    ),
    BarItem(
      text: "Profile",
      iconData: Icons.person_outline,
      color: Colors.teal,
    ),
  ];

  @override
  _ButtomBar createState() =>
      _ButtomBar();
}

class _ButtomBar
    extends State<ButtomBar> {
  int selectedBarIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: AnimatedBottomBar(
          barItems: widget.barItems,
          animationDuration: const Duration(milliseconds: 150),
          barStyle: BarStyle(
            fontSize: 20.0,
            iconSize: 30.0
          ),
          onBarTap: (index) {
            setState(() {
              selectedBarIndex = index;
            });
          }),
    );
  }
}

因此，点击不同的图标会像滚动条一样导航到其他

Answer 1

通常，当应用程序具有bottomBars时，它们通常会重新加载Scaffold主体，而不是滑动到下一个屏幕。检查Youtube，Reddit，WhatsApp，它们都可以重建车身。为此，您只需要创建一个这样的小部件列表：

List<Widget> screenList = [HomePage(), ChatPage(), SearchPage()]; 然后将其放入支架中：

return Scaffold(
      body: screenList[selectedBarIndex]
      bottomNavigationBar: AnimatedBottomBar(
          ...
      )
    );

现在，如果您真的希望它滑动，它将变得更加复杂，因为您可能必须创建一个自定义的PageRoute。看一下这篇文章：https://uxdesign.cc/level-up-flutter-page-transition-choreographing-animations-across-screens-efb5ea105fca

他制作了一个持久的AppBar，因此它必须相似。

如何将页面添加到这种类型的底部栏中？

1 个答案: