Question

我不确定使用BottomNavBar时应如何构造页面。现在，我使用的MainScreen包含一个Scaffold和BottomNavBar

MainScreen小部件包含具有不同页面的列表。这是使用bottomNavBar的推荐方法吗？我知道我也可以使用导航器在屏幕之间导航，但是随后它会为每个页面启动一个不同的窗口，这不是使用bottomNavBar时所期望的。我实现它的方式现在可以正常工作，但是如何在其中一个屏幕中使用FloatingActionButton？您是否总是需要一个脚手架？

  List<Widget> screens = [
    Screen1(),
    Screen2(),
    Screen3()
  ];

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(Constants.APP_NAME),
      ),
      body: screens[_currentIndex],
      bottomNavigationBar: CustomBottomNav(onBottomNavPressed: onBottomNavPressed,),
    );
  }

Answer 1

根据官方BottomNavigationBar类documentation，建议以<Widget>[ ]的形式提供窗口小部件。对于问题的第二部分，是的。 FloatingActionButton只能包含在Scaffold中，因此您应该在小部件中添加一个需要使用FloatingActionButton的地方。

Answer 2

创建一个布尔值，以检查_currentIndex等于要显示FAB的页面的索引。
在主脚手架内，使用之前为FAB小部件创建的布尔值创建三元组。

示例：

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  List<Widget> screens = [
    Center(
      child: FlutterLogo(
        colors: Colors.blue,
        size: 200,
      ),
    ),
    Center(
      child: FlutterLogo(
        colors: Colors.red,
        size: 200,
      ),
    ),
    Center(
      child: FlutterLogo(
        colors: Colors.green,
        size: 200,
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test'),
      ),
      body: screens[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text('1'),
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            title: Text('2'),
            icon: Icon(Icons.shopping_cart),
          ),
          BottomNavigationBarItem(
            title: Text('3'),
            icon: Icon(Icons.account_circle),
          ),
        ],
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        currentIndex: _currentIndex,
      ),
      floatingActionButton: _currentIndex == 1
          ? FloatingActionButton(
              child: Icon(Icons.add_shopping_cart),
              onPressed: () {},
            )
          : null,
    );
  }
}

如何在Flutter中使用BottomNavigationBar构建页面

2 个答案: