关于颤振底部导航栏的基本问题



我一直在编写一个使用底部导航栏的简单应用程序。

使用Navigator在页面之间导航的基本用法如下:

Navigator.of(context).push(...);

当我第一次使用底部导航栏时,我会自动假设底部导航栏几乎在所有页面中都存在,除非它被告知消失,我认为这是一种期望或预期的行为。

因此,与其问如何在应用程序中保持或控制底部导航栏,我想问以下问题:

  1. 我是否以错误的方式接近(思考(底部导航栏?我对底部导航栏的期望是错误的吗?

  2. 如果没有,那么在使用推送和弹出等导航方法时,底部导航栏应该消失的原因是什么?

  3. 最后,为了理解flutter的导航和底部导航栏,我需要知道什么?

谢谢!

是的,你的假设是错误的。按下或弹出页面会使条形图消失(除非这些页面也有条形图(
  • 我认为你的主要误解是,当你使用工具栏时,你认为你需要使用Navigator和推送和弹出页面。在使用栏切换选项卡时,不应该使用Navigator。每个选项卡仍然是同一个页面,您只需使用底部栏中的按钮切换页面的内容。

  • 最好的理解方法可能是在这里检查并使用BottomNavigationBar官方文档中的示例。你可以尝试一下,然后在页面上运行

    要更改页面,同时保留底部的应用程序栏,请使用pag-eview小部件。它接受您可以导航到的子屏幕,而无需创建新堆栈。这里有一个例子-

    class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
    }
    class _HomePageState extends State<HomePage> {
    int _selectedIndex = 0;
    final PageController _pageController = PageController();
    @override
    Widget build(BuildContext context) {
    return Scaffold(
    bottomNavigationBar: BottomNavigationBar(
    items: [
    BottomNavigationBarItem(
    icon: Icon(Icons.portrait), title: Text('Profile')),
    BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
    BottomNavigationBarItem(
    icon: Icon(Icons.shopping_cart), title: Text('Shop'))
    ],
    onTap: _onTappedBar,
    selectedItemColor: Colors.orange,
    currentIndex: _selectedIndex,
    ),
    body: PageView(
    controller: _pageController,
    children: <Widget>[
    ProfilePage(),
    HomeTables(),
    ShoppingPage(),
    ],
    ),
    );
    }
    void _onTappedBar(int value) {
    setState(() {
    _selectedIndex = value;
    });
    _pageController.jumpToPage(value);
    }
    }
    

    最新更新