Flutter BottomNavigationBar

Flutter BottomNavigationBar 是一个由一组图标按钮组成的控件，可用于在应用程序的底部导航栏中切换不同的视图或页面。

特性

• 支持最多五个图标按钮。
• 适配横屏和竖屏。
• 允许自定义选定和未选定的颜色、图标和文本。
• 可以使用简单轻松地导航整个应用程序。

如何使用

Flutter BottomNavigationBar 可以在 Scaffold 的 bottomNavigationBar 属性中使用。以下是示例代码：

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;
  static const List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    BusinessScreen(),
    ProfileScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter BottomNavigationBar'),
      ),
      body: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

自定义 BottomNavigationBar

您可以通过 BottomNavigationBar 类的构建器来自定义 BottomNavigationBar。

以下是自定义 BottomNavigationBar 的示例代码：

bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    backgroundColor: Colors.blueGrey,
    selectedItemColor: Colors.white,
    unselectedItemColor: Colors.grey[400],
    selectedFontSize: 14.0,
    unselectedFontSize: 12.0,
    onTap: _onItemTapped,
    currentIndex: _currentIndex,
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: 'Search',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.add_box),
        label: 'Add',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.favorite_border),
        label: 'Favorite',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.person),
        label: 'Profile',
      ),
    ]
),

在该示例中，我们使用了 type 属性来设置 BottomNavigationBarType.fixed 枚举值，以显示网格视图。我们还可以使用其他选项来自定义样式并以不同的方式呈现 BottomNavigationBar。

结论

Flutter BottomNavigationBar 是一项非常有用的功能，可为您的应用程序提供快速导航。使用简单，并可以自定义样式来满足您的需求。 利用 Flutter BottomNavigationBar 开发出一个美观而实用的应用程序吧！