完美解决flutter 动态Tab TabBar TabView的坑

先实现动态TabBar吧
在AppBar小组件的bottom放置TabBar,然后加上TabView,就可以简单的TabBar与TabView联动了,相信这种TabBar TabView的简单使用大家都会了吧,如果不会也没有关系,网上关于这类的文章很多.
现在有一个需求是动态的TabBar,因为项目里面的tabBar个数是网络请求回来的数据,个数不定的.就产生了动态的TabBar的需求了.先来看一下UI效果图吧

image.png

朋友们,这个需求与开篇提到的简单的TabBar与TabView联动有点差别吧.TabBar 可以随便位置放么? 答案是肯定的,请看具体代码

import 'package:flutter/material.dart';

class DevicePage extends StatefulWidget {
  @override
  _DevicePageState createState() => _DevicePageState();
}

class _DevicePageState extends State<DevicePage>
    with TickerProviderStateMixin, AutomaticKeepAliveClientMixin {
  List _spList = [
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13"
  ];
  TabController _tabController;
  @protected
  bool get wantKeepAlive => true;
  @override
  void initState() {
    super.initState();
    _tabController = null;
    _tabController = TabController(
        initialIndex: 0, length: _spList.length, vsync: this); // 直接传this

    print("---->${_tabController.previousIndex}");

    if (_tabController.indexIsChanging) {
      print("---->indexch");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("动态TabBar"),
      ),
      body: Column(
        children: <Widget>[
          ButtonBar(
            alignment: MainAxisAlignment.center,
            buttonPadding: EdgeInsets.only(left: 1),
            children: <Widget>[
              RaisedButton(
                child: Text("device"),
              ),
              RaisedButton(
                child: Text("更新TabBar个数"),
                onPressed: () {
                  setState(() {
                    _spList = ["1", "2", "3", "4", "5"];
                    _tabController = TabController(
                        initialIndex: 1, length: _spList.length, vsync: this);
                    _tabController.animateTo(0);
                  });
                },
              )
            ],
          ),
          Container(
            alignment: Alignment.centerLeft,
            child: TabBar(
              controller: _tabController,
              isScrollable: true,
              tabs: _spList.map((f) {
                return Center(
                  child: new Text(
                    f,
                    style: TextStyle(color: Colors.black, fontSize: 22),
                  ),
                );
              }).toList(),
            ),
          ),
          Expanded(
            child: TabBarView(
                controller: _tabController,
                children: _spList.isEmpty
                    ? []
                    : _spList.map((f) {
                        return Center(
                          child: new Text("第$f页"),
                        );
                      }).toList()),
          ),
        ],
      ),
    );
  }
}

        setState(() {
          _spList = ["1", "2", "3", "4", "5"];
          _tabController = TabController(
              initialIndex: 0, length: _spList.length, vsync: this);
        });

网上的资料都是写到上面的代码就结束,可能他们没有自己去验证一下,实际效果是有bug的,TabBar滚动到了第一个,但TabView并没有滚过去的.如下图

文件.gif

下面的代码就是解决此bug的,亲测有用,请允许本人在这里哭一会,因为为了解决此bug,花了亲一整个下午的时间

      setState(() {
        _spList = ["1", "2", "3", "4", "5"];
        _tabController = TabController(
            initialIndex: 1, length: _spList.length, vsync: this);
        _tabController.animateTo(0);
      });

请看最终效果,如下图

文件 (1).gif

结尾
flutter的TabBar TabView还是很强大的哦,觉得有点帮助的小伙伴们,请点个赞吧~~
下一篇介绍---->如何保持 TabView内容的状态 https://www.jianshu.com/p/369f00a40cc2

最后编辑于：2020.08.30 10:57:04