flutter TabBar+PageView联动

在Flutter中，可以使用TabBar和PageView来实现标签栏+页面视图的联动效果。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
 
class TabPageViewExample extends StatefulWidget {
  @override
  _TabPageViewExampleState createState() => _TabPageViewExampleState();
}
 
class _TabPageViewExampleState extends State<TabPageViewExample> with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(text: 'Tab1'),
    Tab(text: 'Tab2'),
    Tab(text: 'Tab3'),
  ];
 
  late TabController _tabController;
 
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: myTabs.length, vsync: this);
  }
 
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TabBar + PageView Example'),
        bottom: TabBar(
          controller: _tabController,
          tabs: myTabs,
        ),
      ),
      body: PageView(
        controller: _tabController.animation!,
        children: myTabs.map((Tab tab) {
          return SafeArea(
            top: false,
            child: Builder(builder: (BuildContext context) {
              return Container(
                color: Colors.green,
                child: Center(child: Text(tab.text)),
              );
            }),
          );
        }).toList(),
        onPageChanged: (int index) {
          _tabController.animateTo(index);
        },
      ),
    );
  }
}
 
void main() {
  runApp(MaterialApp(home: TabPageViewExample()));
}

在这个示例中，TabController与TabBar和PageView关联起来。当用户点击TabBar上的标签时，PageView会滚动到对应的页面。同时，PageView的onPageChanged回调用来更新当前选中的Tab，实现两者之间的联动。