第五章、flutter怎么创建底部底部导航栏界面

flutter 怎么快速建立包含底部菜单栏的界面。

一、使用BottomNavigationBar

BottomNavigationBar 是 Flutter 框架中用于实现底部导航栏的核心组件，遵循Material Design规范，常用于在应用的不同页面或Tab之间进行切换。‌

‌BottomNavigationBar 的核心属性和用法包括： ‌ 它通常作为 Scaffold 的 bottomNavigationBar 参数进行配置，关键属性有：

items：一个 BottomNavigationBarItem 对象列表，定义每个 Tab 的图标和标签。
currentIndex：当前选中的 Tab 索引，用于控制高亮状态。
onTap：当用户点击 Tab 时触发的回调函数，通常用于更新 currentIndex 并切换页面。
type：决定导航栏的布局行为，可选值包括 BottomNavigationBarType.fixed（固定高度，适用于较少 Tab）和 BottomNavigationBarType.shifting（标签切换时背景色变化，适用于较多 Tab）。‌12

‌在页面切换中，BottomNavigationBar 常与 PageView 或 StatefulWidget 配合使用： ‌ 例如，通过 currentIndex 控制页面索引，动态更新 Scaffold 的 body 部分来实现无刷新切换。‌12 此外，组件支持自定义图标大小、颜色等样式属性，如 iconSize 和 fixedColor，以满足设计需求。‌1

BottomNavigationBar 是 Flutter 框架中用于实现底部导航栏的核心组件，遵循Material Design规范，常用于在应用的不同页面或Tab之间进行切换。‌

‌BottomNavigationBar 的核心属性和用法包括： ‌ 它通常作为 Scaffold 的 bottomNavigationBar 参数进行配置，关键属性有：

items：一个 BottomNavigationBarItem 对象列表，定义每个 Tab 的图标和标签。
currentIndex：当前选中的 Tab 索引，用于控制高亮状态。
onTap：当用户点击 Tab 时触发的回调函数，通常用于更新 currentIndex 并切换页面。
type：决定导航栏的布局行为，可选值包括 BottomNavigationBarType.fixed（固定高度，适用于较少 Tab）和 BottomNavigationBarType.shifting（标签切换时背景色变化，适用于较多 Tab）。‌12

二、BottomNavigationBarItem 设置底部bar的图标和文本

复制代码

BottomNavigationBarItem(
  icon: ImageIcon(
    AssetImage('assets/icons/icon_home.png'),
  ),
  activeIcon: ImageIcon(
    AssetImage('assets/icons/icon_home_fill.png'),
  ),
  label: '首页',
)

三、完整代码

复制代码

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:aieshop/ui/mall_homepage_route.dart';
import 'package:aieshop/ui/products/product_classification.dart';
import 'package:aieshop/ui/shoplive/shop_live_page_route.dart';
import 'package:aieshop/ui/shopcart/ShoppingcartPage.dart';
import 'package:aieshop/ui/usercenter/UserCenterPage.dart';

class WillPopScopeHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => WillPopScopeHomeState();
}

class WillPopScopeHomeState extends State<WillPopScopeHome> {
  int backCount = 0;
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        child: MyHomePage(),
        onWillPop: () async {
          if (backCount==0) {
            Fluttertoast.showToast(msg: '再点一次即可退出');
            backCount = 1;
            return false;
          } else {
            return true;
          }
        });
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  List<Widget> _widgetOptions = [];

  @override
  Widget build(BuildContext context) {
    _widgetOptions.add(MallHomepageRoute());
    _widgetOptions.add(ProductClassificationRoute());
    _widgetOptions.add(ShopLivePageRoute(context));
    _widgetOptions.add(ShoppingcartPage());
    _widgetOptions.add(UserCenterPage());
    return Scaffold(
      body: Container(
        child: _widgetOptions.elementAt(_currentIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        backgroundColor: Colors.white,
        selectedItemColor: Colors.redAccent,
        unselectedItemColor: Colors.black38,
        selectedFontSize: 12,
        unselectedFontSize: 12,
        onTap: (value) {
          setState(() {
            _currentIndex = value;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('assets/icons/icon_home.png'),
            ),
            activeIcon: ImageIcon(
              AssetImage('assets/icons/icon_home_fill.png'),
            ),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('assets/icons/icon_classify.png'),
            ),
            activeIcon: ImageIcon(
              AssetImage('assets/icons/icon_classify_fill.png'),
            ),
            label: '分类',
          ),
          BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('assets/icons/icon_record.png'),
            ),
            activeIcon: ImageIcon(
              AssetImage('assets/icons/icon_record_fill.png'),
            ),
            label: '直播',
          ),
          BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('assets/icons/icon_cart.png'),
            ),
            activeIcon: ImageIcon(
              AssetImage('assets/icons/icon_cart_fill.png'),
            ),
            label: '购物车',
          ),
          BottomNavigationBarItem(
            icon: ImageIcon(
              AssetImage('assets/icons/icon_my.png'),
            ),
            activeIcon: ImageIcon(
              AssetImage('assets/icons/icon_my_fill.png'),
            ),
            label: '我的',
          ),
        ],
      ),
    );
  }
}