Flutter：Scaffold+TabBarView实现底部Tab页面框架

说明：

PageView实现多个子页面上下/左右滑动(类似ViewPager)
Scaffold+TabBarView(TabBarView封装了PageView)实现底部Tab页面框架

一、PageView实现多个子页面上下/左右滑动(类似ViewPager)：

1.创建子页面：

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.使用PageView加载子页面列表：

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

二、Scaffold+TabBarView实现底部Tab页面框架：

1.实现Tab框架主页：

(1)Tab框架主页类：

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

(2)Tab框架主页State类：

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.实现各子页面(创建多个子页面类+子页面State类)：

扫描二维码关注公众号，回复： 15963963 查看本文章

(1)子页面类：

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

(2)子页面State类：

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