初学Flutter：实现底部导航切换

效果展示

flutter bottomNavBar

主要实现代码

入口文件：main.dart

import 'package:flutter/material.dart';
import 'package:flutter_demo/components/bottomNavBar.dart';
import 'package:flutter_demo/views/cart.dart';
import 'package:flutter_demo/views/cata.dart';
import 'package:flutter_demo/views/person.dart';
import 'package:flutter_demo/views/home.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // title: 'UzumakiHan',
        theme: ThemeData(
          // Define the default brightness and colors.
          brightness: Brightness.light,
          primaryColor: Colors.lightBlue[800],
        ),
        home: const MyHome());
  }
}

class MyHome extends StatefulWidget {
  const MyHome({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State {
  List tabBodies = [
    const IndexHome(),
    const Cata(),
    const Cart(),
    const Person()
  ];
  int currentIndex = 0;
  List bottomTabs = [
    const BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
    const BottomNavigationBarItem(icon: Icon(Icons.search), label: '分类'),
    const BottomNavigationBarItem(
        icon: Icon(Icons.shopping_cart), label: '购物车'),
    const BottomNavigationBarItem(
        icon: Icon(Icons.manage_accounts), label: '个人中心'),
  ];
  List pageTitle = ['首页', '分类', '购物车', '个人中心'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(pageTitle[currentIndex]),
          centerTitle: true,
        ),
        body: tabBodies[currentIndex],
        bottomNavigationBar: BottomNavBar(
          bottomTabs: bottomTabs,
          currentIndex: currentIndex,
          changeCurrentIndex: (index) {
            setState(() {
              currentIndex = index;
            });
          },
        ));
  }
}

底部导航组件 bottomNavBar.dart

// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';
class BottomNavBar extends StatefulWidget {
  const BottomNavBar(
      {super.key,
      required this.bottomTabs,
      required this.currentIndex,
      required this.changeCurrentIndex});
  final List bottomTabs;
  final int currentIndex;
  final Function changeCurrentIndex;

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

class _BootomNavBarState extends State {
  int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: widget.currentIndex,
        items: widget.bottomTabs,
        onTap: (index) {
          widget.changeCurrentIndex(index);
        });
  }
}

下面是四个导航对应的页面

首页：home.dart

// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';

class IndexHome extends StatefulWidget {
  const IndexHome({super.key});

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

class _IndexHomeState extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return const Center(
        child: Text(
      '首页',
      style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
    ));
  }
}

分类：cata.dart

// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';

class Cata extends StatefulWidget {
  const Cata({super.key});

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

class _CataState extends State {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("分类",
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
    );
  }
}

购物车：cart.dart

// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';

class Cart extends StatefulWidget {
  const Cart({super.key});

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

class _CartState extends State {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("购物车",
          style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
    );
  }
}

个人中心：person.dart

// ignore_for_file: library_private_types_in_public_api

import 'package:flutter/material.dart';

class IndexHome extends StatefulWidget {
  const IndexHome({super.key});

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

class _IndexHomeState extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return const Center(
        child: Text(
      '首页',
      style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
    ));
  }
}