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

codekxx

于 2019-01-21 11:50:42 发布

阅读量2.1k

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.youkuaiyun.com/codekxx/article/details/86571841

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

老规矩，先看图

项目结构如下：

在这里插入图片描述
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() => _TabDemoSta

最低0.47元/天解锁文章