关于TabBar,TabBarView的问题,求大佬解答

317 阅读1分钟

在使用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),    );  }}