Flutter 使用底部导航栏TabBar

在Flutter中使用底部导航栏可以用bottomNavigationBar
直接使用bottomNavigationBar，然后切换body的内容。
但是这样会每次页面切换都会重新build，给页面加上with AutomaticKeepAliveClientMixin 也还是会重新build。
要想切换页面不重新build，则还需要配合TabView、PageView、IndexedStack来实现
IndexedStack的话会把所有页面都一次加载，所以也不太合适

Simulator Screenshot - iPhone 16 Pro Max - 2024-11-01 at 15.08.46.png

下面是使用TabView来实现的简单参考
main.dart

import 'package:flutter/material.dart';
import 'package:tab_bar_demo/pages/tabbar/tab_bar.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tab Bar Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyTabBar(),
    );
  }
}

tab_bar.dart

import 'package:flutter/material.dart';
import 'package:tab_bar_demo/pages/home/home_page.dart';
import 'package:tab_bar_demo/pages/profile/profile_page.dart';

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

  @override
  State<MyTabBar> createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar>
    with SingleTickerProviderStateMixin {
  final List<Widget> pages = const [HomePage(), ProfilePage()];
  late TabController _tabController;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    // _tabController = TabController(length: pages.length, vsync: this);
    //去掉切换页面的动画 Duration.zero
    _tabController = TabController(
        length: pages.length, animationDuration: Duration.zero, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
          controller: _tabController,
          physics: const NeverScrollableScrollPhysics(),
          children: pages),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        selectedItemColor: Colors.red,
        onTap: (index) {
          setState(() {
            _tabController.index = index;
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

home_page.dart

import 'package:flutter/material.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    print("Home build");
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Home",
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: const Center(
        child: Text("Home"),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

profile_page.dart

import 'package:flutter/material.dart';

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

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    print("Profile build");
    super.build(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Profile",
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: const Center(
        child: Text("Profile"),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}