flutter中setState方法之后怎么重新初始化TabController

最近开发的时候遇到以下问题:

在initState方法中初始化TabController之后,请求网络数据获取到数据,之后需要重新给tab的数量赋值,

_tabController = TabController(vsync: this, length: tabs.length);

setState方法之后怎么重新初始化TabController,导致出错。

在Flutter中,当你使用setState方法更新Widget时,Widget的状态会被刷新,但是TabController并不会被重新初始化。如果你想重新初始化TabController,你可以在setState方法中创建一个新的TabController对象并将其赋值给TabBarView。

示例代码:

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(
              icon: Icon(Icons.directions_car),
              text: 'Car',
            ),
            Tab(
              icon: Icon(Icons.directions_transit),
              text: 'Transit',
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          // Your Widgets
          // Your Widgets
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _tabController.dispose();
            _tabController = TabController(length: 2, vsync: this);
          });
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}
复制代码

在这个示例代码中,我们在setState方法中重新初始化了TabController对象。当点击悬浮按钮时,setState方法会被调用,TabController对象会被重新初始化,然后TabBarView会使用新的TabController对象进行更新。

运行上面代码发现还是有错,原来这里出了问题:

A SingleTickerProviderStateMixin can only be used as a TickerProvider once. E/flutter (18337): If a State is used for multiple AnimationController objects, or if it is passed to other objects and those objects might use it more than one time in total, then instead of mixing in a SingleTickerProviderStateMixin, use a regular TickerProviderStateMixin.

意思是在Flutter中,如果一个State对象被用作多个AnimationController的TickerProvider,或者被传递给其他对象并且这些对象总共可能使用它多次,那么就不能使用SingleTickerProviderStateMixin,而是应该使用TickerProviderStateMixin。

SingleTickerProviderStateMixin是一个mixin类,它提供了一个TickerProvider对象,用于管理单个AnimationController。如果多个AnimationController使用同一个SingleTickerProviderStateMixin,就会出现上述错误。

TickerProviderStateMixin是一个类,它提供了一个TickerProvider对象,可以被多个AnimationController共享。因此,如果你需要在多个AnimationController之间共享TickerProvider,在你的State类中使用TickerProviderStateMixin,而不是SingleTickerProviderStateMixin。

以下是一个使用TickerProviderStateMixin的示例代码:

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with TickerProviderStateMixin {
  AnimationController _controller1;
  AnimationController _controller2;

  @override
  void initState() {
    super.initState();
    _controller1 = AnimationController(vsync: this, duration: Duration(seconds: 1));
    _controller2 = AnimationController(vsync: this, duration: Duration(seconds: 2));
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
复制代码

在这个示例代码中,我们使用TickerProviderStateMixin作为我们的State类的mixin,这允许我们在_initState方法中创建两个AnimationController对象并与该State对象共享TickerProvider。当State对象被dispose时,两个AnimationController对象也会被dispose。

我们改成TickerProviderStateMixin,ok,完美通过!问题解决!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值