Flutter - TabBar 中的索引始终为空答案

【问题标题】：Flutter - Index in TabBar always nullFlutter - TabBar 中的索引始终为空
【发布时间】：2020-04-22 10:42:42
【问题描述】：

我想在 Scaffold 的主体中包含一个 TabBar（见图），然后动态更改下面显示的小部件，但不使用 TabBarView。

解决此问题的最佳方法是什么？我试图实现这个解决方案：

读取TabBar的当前索引，然后在body中使用if条件来显示对应的widget。

class _ProfileState extends State<Profile> with SingleTickerProviderStateMixin {

  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'LEFT'),
    new Tab(text: 'RIGHT'),
  ];

  TabController _tabController;

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

  @override
  Widget build(BuildContext context) {

    return DefaultTabController(length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Profile'),   
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              // some other widgets
              Container(color: Colors.white,
                child: TabBar(controller: _tabController,
                  labelColor: Colors.grey[700],
                  indicatorSize: TabBarIndicatorSize.label,
                  indicatorColor: Colors.blueGrey[900],
                  tabs: myTabs,
               ],
                ),
              ),
              (_tabController?.index == 0) ?
              Container(child: Text(_tabController?.index.toString()))
              : Container(child: Text(_tabController?.index.toString())),
etc

不幸的是，_tabController?.index 的值始终为空。我该如何解决这个问题？

【问题讨论】：

也许你想要ToggleButtons。
是的，实际上认为这应该更容易。谢谢！

标签： flutter tabbar tabbarcontroller

【解决方案1】：

这个怎么样？
来自

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

到

@override
void initState() {
  super.initState();
  _tabController = new TabController(vsync: this, length: myTabs.length);
  _tabController.addListener(_tabSelect);
}

void _tabSelect() {
  setState(() {
    _currentIndex = _tabController.index;
  });
}

并且，从

child: Column(
  ...
etc.

到

child: Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    // some other widgets
    Container(
      color: Colors.white,
      child: TabBar(
        controller: _tabController,
        labelColor: Colors.grey[700],
        indicatorSize: TabBarIndicatorSize.label,
        indicatorColor: Colors.blueGrey[900],
        tabs: myTabs,
      ),
    ),
    Container(child: Text(_currentIndex.toString()))
  ],
),

【讨论】：