Flutter底部导航栏插件material_bottom_nav_bar的使用

发布于 1周前 作者 sinazl 来自 Flutter

以下是根据您的要求整理的关于“Flutter底部导航栏插件material_bottom_nav_bar的使用”的内容：

Flutter底部导航栏插件material_bottom_nav_bar的使用

最近我在Play Store看到底部导航栏，并决定为Flutter创建一个类似的组件。使用从Pub.dev获取的可重用解决方案可以使集成变得更加容易。

示例代码

如何使用

1) 在Flutter项目中运行此命令
flutter pub add material_bottom_nav_bar
2) 导入依赖
import 'package:material_bottom_nav_bar/material_bottom_nav_bar.dart';
import 'package:material_bottom_nav_bar/model/item_model.dart';
3) 使用它
class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material Bottom Nav Bar Example'),
      ),
      body: Center(
        child: Text('当前页面: ${_currentIndex == 0 ? '首页' : (_currentIndex == 1 ? '搜索' : (_currentIndex == 2 ? '购物车' : '个人资料'))}'),
      ),
      bottomNavigationBar: MaterialBottomNavBar(
        currentIndex: _currentIndex, // 它将激活该索引
        onTap: _onItemTapped,
        cardElevation: 20,
        items: [
          NavBarItem(
            selectedIcon: const Icon(Icons.home, color: Colors.black), // 选中时的图标
            unSelectedIcon: const Icon(Icons.home_outlined), // 未选中时的图标
            label: '首页', // 标签文本
          ),
          NavBarItem(
            selectedIcon: const Icon(Icons.search_outlined, color: Colors.black),
            unSelectedIcon: const Icon(Icons.search_outlined),
            label: '搜索',
          ),
          NavBarItem(
            selectedIcon: const Icon(Icons.shopping_cart, color: Colors.black),
            unSelectedIcon: const Icon(Icons.shopping_cart_outlined),
            label: '购物车',
          ),
          NavBarItem(
            selectedIcon: const Icon(Icons.person, color: Colors.black),
            unSelectedIcon: const Icon(Icons.person_outline),
            label: '个人资料',
          ),
        ],
      ),
    );
  }
}

更多关于Flutter底部导航栏插件material_bottom_nav_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部导航栏插件material_bottom_nav_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用material_bottom_nav_bar插件来实现底部导航栏的示例代码。这个示例将展示如何设置底部导航栏，并处理导航项的点击事件来切换不同的页面。

首先，确保你的pubspec.yaml文件中已经添加了material_bottom_nav_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  material_bottom_nav_bar: ^3.0.3  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:material_bottom_nav_bar/material_bottom_nav_bar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Bottom Navigation Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BottomNavScreen(),
    );
  }
}

class BottomNavScreen extends StatefulWidget {
  @override
  _BottomNavScreenState createState() => _BottomNavScreenState();
}

class _BottomNavScreenState extends State<BottomNavScreen> {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Bar Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: MaterialBottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
        backgroundColor: Colors.white,
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Home Screen'),
    );
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Search Screen'),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Profile Screen'),
    );
  }
}

代码说明：

  1. 依赖管理：在pubspec.yaml文件中添加material_bottom_nav_bar依赖。
  2. 主应用：MyApp是一个无状态小部件，它定义了应用程序的主题和主页面。
  3. 底部导航屏幕：BottomNavScreen是一个有状态小部件，它管理导航项的点击事件和当前选中的页面。
  4. 导航项点击处理：_onItemTapped方法用于处理导航项的点击事件，更新当前选中的索引。
  5. 页面切换：根据当前选中的索引，从_widgetOptions列表中获取对应的页面小部件。
  6. 底部导航栏：使用MaterialBottomNavigationBar来创建底部导航栏，并设置导航项、当前选中项、点击事件、活动颜色、非活动颜色和背景颜色。

这样，你就创建了一个带有底部导航栏的Flutter应用程序，可以根据用户的点击事件在不同页面之间切换。

回到顶部