flutter - Flutter标签-即使未显示标签，也会创建一个标签

Question

我有一个DefaultTabController，其中包含TabBarView和TabController，到目前为止没有什么特别的。

我有1个选项卡，它需要在服务器初始化后立即向服务器发出请求，我们称其为“探索”选项卡。

如果尚未初始化请求，我将使用didChangeDependencies发出请求(我有一个用于初始化的 bool(boolean) 标志)。

确实，每次创建选项卡的小部件时都会发出请求，但是存在一个问题。

假设有3个标签，而“探索”标签是介于1和3之间的第二个标签。

当从选项卡1转到选项卡3或从选项卡3转到选项卡1时，似乎浏览选项卡是在过渡期间创建的(即使它根本没有显示)，因此向服务器发出了请求。

我想避免这种情况，仅在用户专门转到浏览选项卡时才在浏览选项卡的didChangeDependencies中发出该请求。

有任何想法吗？

Answer 1

好，所以，您有3个标签

[tab1]，[tab2]，[tab3]

仅在按下[tab2]时才希望触发事件(请求服务器)的地方。

为此，创建一个tabController隔离以在StateFull小部件中添加事件侦听器，例如:

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 2,
      vsync: this,
    );
    _tabController.addListener(() {
      if (_tabController.indexIsChanging == false) {
        if(_tabController.index == 1) { 
          //Trigger your request
        }
      }
    });
  }

注意:indexIsChanging == false是为了确保选项卡已经完成了该 Controller 的currentIndex更改工作，下面是完整示例:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BodyWidget(),
    );
  }
}

class BodyWidget extends StatefulWidget {
  @override
  BodyWidgetState createState() {
    return new BodyWidgetState();
  }
}

class BodyWidgetState extends State<BodyWidget>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 3,
      vsync: this,
    );
    _tabController.addListener(() {
      if (_tabController.indexIsChanging == false) {
        if (_tabController.index == 1) {
          //Trigger your request
          print('Triger 2 selected, do the http call now.');
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('test'),
        bottom: TabBar(
          controller: _tabController,
          tabs: <Widget>[
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: <Widget>[
          Container(child: Center(child: Text('tab1'))),
          Container(child: Center(child: Text('tab2'))),
          Container(child: Center(child: Text('tab3'))),
        ],
      ),
    );
  }
}