Flutter实现TabBar联动并保存状态和Android中TabLayout配合ViewPager一样的效果

最新推荐文章于 2024-04-17 07:55:44 发布

原创

最新推荐文章于 2024-04-17 07:55:44 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文介绍了如何在Flutter中实现TabBar的联动效果，并详细说明了如何保存各个Tab的状态，达到与Android中TabLayout结合ViewPager相似的用户体验。通过示例代码`main.dart`和`tab_page.dart`，展示了具体的实现过程。

老规矩，先看图

项目结构如下：

在这里插入图片描述
1.main.dart

import 'package:flutter/material.dart';
import 'tab_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
   
   
  @override
  Widget build(BuildContext context) {
   
   
    return MaterialApp(
      title: 'tab_demo',
      theme: ThemeData.light(),
      home: TabDemo(),
    );
  }
}

class TabDemo extends StatefulWidget {
   
   
  _TabDemoState createState() => _TabDemoState