Flutter: Scaffold+TabBarView realizes the bottom Tab page frame

illustrate:

PageView realizes multiple sub-pages sliding up and down/left and right (similar to ViewPager)
Scaffold+TabBarView (TabBarView encapsulates PageView) to realize the bottom Tab page frame

1. PageView realizes multiple sub-pages sliding up and down/left and right (similar to ViewPager):

1. Create a subpage:

class 子页面1 extends StatefulWidget { //有几个页就创建几个这种类
  const 子页面1({Key? key}) : super(key: key);
  @override
  自定义State类 createState() => 自定义State类();
}
//自定义State类
class 自定义State类 extends State<子页面1> {
  @override
  Widget build(BuildContext context) {
    return 布局类或容器类Widget(
      ... //省略具体页面布局
    );
  }
}

2. Use PageView to load the subpage list:

PageView(
  scrollDirection: Axis.vertical, //滑动方向，(默认)horizontal为水平方向 、vertical为垂直方向
  allowImplicitScrolling: true,   //只能缓存当前页的前1页与后1页
  children: <Widget>[ //子页面列表
     子页面1(),
     子页面2(),
     ...
  ]
)

2. Scaffold+TabBarView implements the bottom Tab page frame:

1. Realize the Tab frame home page:

(1) Tab frame homepage class:

class MainTabPage extends StatefulWidget {  //Tab框架主页
  const MainTabPage({super.key});
  @override
  State<MainTabPage> createState() => _MainTabState();
}

(2) Tab frame homepage State class:

class _MainTabState extends State<MainTabPage> with SingleTickerProviderStateMixin {  //Tab框架主页State类
  List<String> titleTexts = ["首页", "记录", "我的"];
  List<String> tabTexts = ["首页", "记录", "我的"];
  int tabIndex = 0; //记录当前选中页索引
  late TabController pageController; //页面切换监听
  @override
  void initState() {//初始化
    super.initState();
    pageController = TabController(length: tabTexts.length, vsync: this);
    pageController.addListener(() { //监听页面切换回调
      setState(() {
        this.tabIndex = pageController.index;
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold( //骨架类Widget
      appBar: AppBar(centerTitle: true, title: Text(titleTexts[tabIndex])),
      bottomNavigationBar: BottomNavigationBar( //底部Tab导航
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: tabTexts[0]),
          BottomNavigationBarItem(icon: Icon(Icons.business), label: tabTexts[1]),
          BottomNavigationBarItem(icon: Icon(Icons.school), label: tabTexts[2]),
        ],
        currentIndex: tabIndex, //当前选中的tab索引
        fixedColor: Colors.blue,
        onTap: onTabItemClick,
      ),
      body: TabBarView(   //TabBarView可以替换成PageView
        controller: pageController,  //监听页面切换回调
        children: <Widget>[ //子页面列表
          Page1(),
          Page2(),
          Page3()
        ],
      ),
    );
  }
  void onTabItemClick(int index) { //Tab点击时切换页面
    setState(() {
      this.tabIndex = index;
      pageController.index = index; //切换页面
    });
  }
  @override
  void dispose() {
    pageController.dispose();   // 释放资源
    super.dispose();
  }
}

2. Implement each subpage (create multiple subpage classes + subpage State classes):

(1) Subpage class:

class Page1 extends StatefulWidget {
  const Page1({Key? key}) : super(key: key);
  @override
  _Page1State createState() => _Page1State();
}

(2) Subpage State class:

class _Page1State extends State<Page1> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用
    return ...;   //省略页面具体布局
  }
  @override
  bool get wantKeepAlive => true; // true缓存页面，false不缓存
}