Flutter（十六）：TabController

Posted 2023-03-28

参考技术A 相比与 TabBar，使用 TabController 更有利于事件的监听，便于控制相关内容。

强制 TabController 创建所有选项卡 Flutter

【中文标题】强制 TabController 创建所有选项卡 Flutter

【英文标题】：Force TabController to create all tabs Flutter

【发布时间】：2019-02-05 23:14:10

【问题描述】：

我有一个带有两个选项卡的默认页面，使用 TabBar 和 TabController。一切正常，除了当我进入页面时，只有当我点击切换到第二个选项卡时才会调用第二个选项卡的构建方法。问题是，当我进入页面时，我希望两个选项卡都已创建（也就是执行了它们的构建方法）。有什么想法吗？

图解代码：

//This widget is used inside a Scaffold
class TabsPage extends StatefulWidget 

  @override
  State<StatefulWidget> createState() => new TabsPageState();



class TabsPageState extends State<TabsPage> with TickerProviderStateMixin 

  List<Tab> _tabs;
  List<Widget> _pages;
  TabController _controller;

  @override
  void initState() 
    super.initState();
    _tabs = [
      new Tab(text: 'TabOne'),
      new Tab(text: 'TabTwo')
    ];
    _pages = [
      //Just normal stateful widgets
      new TabOne(),
      new TabTwo()
    ];
    _controller = new TabController(length: _tabs.length, vsync: this);
  

  @override
  Widget build(BuildContext context) 
    return new Padding(
      padding: EdgeInsets.all(10.0),
      child: new Column(
        children: <Widget>[
          new TabBar(
            controller: _controller,
            tabs: _tabs
          ),
          new SizedBox.fromSize(
            size: const Size.fromHeight(540.0),
            child: new TabBarView(
                controller: _controller,
                children: _pages
            ),
          )
        ],
      ),
    );
  

【问题讨论】：

你想解决什么问题？

我有一个包含两个选项卡中的字段的表单，当我第一次进入页面并提交表单时，我需要验证并填写所有字段。并且因为第二个 Tab 内容没有生成，这些字段被忽略并且可能保持为空。

你用的是flutter form (flutter.io/cookbook/forms/validation)吗？

@DineshBalasubramanian 是的，我是。

你如何能够为两个选项卡使用一个表单？

【参考方案1】：

我有一个类似的问题，我正在使用带有表单的选项卡，我想验证所有这些，我的解决方案是以编程方式切换到第二个选项卡，不访问带有表单的选项卡是没有意义的这需要验证。

所以给每个表单一个全局键：

final _formKey = GlobalKey<FormState>();

我想要构建所有选项卡的原因是使用：

_formKey.currentState.validate()

所以我的解决方法是

if (_formKey.currentState == null)  //The tab was never visited, force it
  _tabController.animateTo(1);
  return;