在使用TabBar,TabBarView的时候,
前提: 当我隔几个Tab点击的时候
问题:
1.没有直接调用对应页面的initState,先执行了两遍左侧Tab的initState,才执行对应页面的initState
例如:日榜,周榜,月榜
点击了月榜-->日榜initState-->日榜dispose-->日榜initState-->日榜dispose-->月榜initState
2.我再initState调用了接口导致了报错:
日榜initState-->调用api-->日榜dispose-->日榜initState中api调用返回数据setState(报错,已经dispose了)
期望:点击哪个tab只执行对应页面的initState
备注:依次点击不会有问题,间隔点击会出现
模拟代码:
import 'package:flutter/material.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home:Homde() ); }}class Homde extends StatefulWidget { @override _HomdeState createState() => _HomdeState();}class _HomdeState extends State<Homde> with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin { TabController _tabController; final List<String> rankTypes = ["日榜", "周榜", "月榜", "新人榜", "原创榜", "男性向", "女性向"]; @override bool get wantKeepAlive => true; @override void initState() { super.initState(); _tabController = TabController(initialIndex: 0, length: rankTypes.length, vsync: this); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( bottom: TabBar( isScrollable: true, controller: _tabController, tabs: rankTypes.map((item) { return Tab(text: item); }).toList() ), ), body: TabBarView( controller: _tabController, children: rankTypes.map((item) { return Item(name: item,); }).toList() ), ); }}class Item extends StatefulWidget { final String name; const Item({Key key, this.name}) : super(key: key); @override _ItemState createState() => _ItemState();}class _ItemState extends State<Item> with AutomaticKeepAliveClientMixin { @override bool get wantKeepAlive => true; String apiData = "a"; @override void initState() { super.initState(); debugPrint(widget.name); //模拟接口调用 Future.delayed(const Duration(milliseconds: 3000),(){ setState(() { apiData = "b"; debugPrint(widget.name + "setState"); }); }); } @override Widget build(BuildContext context) { super.build(context); return Center( child: Text(widget.name), ); }}