Flutter tabcontroller索引不响应tabbarview中的更改

Question

Flutter tabcontroller检测到选项卡中的更改，但不知道选项卡视图中的更改。

侦听器使floatactionbutton的文本更改，但是tabbarview更改时没有响应。

class TabPageState extends State<TabPage> with SingleTickerProviderStateMixin {

  TabController _controller;
  int _currentIndex = 0;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tab'),
        bottom: TabBar(
          controller: _controller,
          tabs: <Widget>[
            Tab(icon: Icon(Icons.laptop_mac),),
            Tab(icon: Icon(Icons.desktop_mac),),
          ],
        ),
      ),
      body: TabBarView(
        controller: _controller,
        children: <Widget>[
          Center(child: Text('laptop'),),
          Center(child: Text('desctop'),),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        child: Text('$_currentIndex'),
      ),
    );
  }

  _handleTabSelection() {
    if (_controller.indexIsChanging) {
      setState(() {
        _currentIndex = _controller.index;
      });
    }
  }
}

Answer 1

只需删除条件：

  if (_controller.indexIsChanging) {

因为每次开始从 previousIndex 更改为 currentIndex 时，您都会重新构建小部件，并且您_controller.index的索引与初始索引相同。

这应该工作：

            _handleTabSelection() {
                  setState(() {
                    _currentIndex = _controller.index;
                  });
              }

Answer 2

医生说：

indexIsChanging：当我们由于
调用 [animateTo] 而从 [previousIndex] 到 [index] 进行动画处理时为 True。/// 用户点击 [TabBar] 选项卡时触发的 [animateTo] 动画期间，此值为 true。/// 当 [offset] 由于用户拖动（和“猛击”）[TabBarView] 而发生变化时，该值为 false。

  bool get indexIsChanging => _indexIsChangingCount != 0;
  int _indexIsChangingCount = 0;

代码：

  TabController _controller;
  int _selectedIndex = 0;

  List<Widget> list = [
    Tab(icon: Icon(Icons.card_travel)),
    Tab(icon: Icon(Icons.add_shopping_cart)),
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // Create TabController for getting the index of current tab
    _controller = TabController(length: list.length, vsync: this);

    _controller.addListener(() {
      setState(() {
        _selectedIndex = _controller.index;
      });
      print("Selected Index: " + _controller.index.toString());
    });
  }

示例： https: //github.com/jitsm555/Flutter-Problems/tree/master/tab_bar_tricks

输出：