Flutter 选项卡中的选择性 FloatingActionButton 可见性

Question

我正在尝试制作一个应用程序，其中路线具有带有 5 个选项卡的选项卡式布局。在其中两个选项卡中，我需要放置一个 FAB 来加载新屏幕。

但是，默认情况下（使用 DefaultTabController），这是一个全有或全无的选择，因为无法使用此控制器获取 Tab 索引。

但是，我遵循this SO question 和this one 并添加了手动TabController。但是，现在，当标签加载时，除非我单击选项卡中的元素并导航回标签，否则我不会看到FAB。

此外，当我滑动到不应该有 FAB 的选项卡时，FAB 不会消失。

我的代码如下：

  TabController controller;

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


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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("My Clinic"), backgroundColor: Colors.blue,
            bottom: new TabBar(
                controller: controller,
                tabs: <Tab>[
                  new Tab(icon: new Icon(Icons.report)),
                  new Tab(icon: new Icon(Icons.person)),
                  new Tab(icon: new Icon(Icons.assistant)),
                  new Tab(icon: new Icon(Icons.calendar_today)),
                  new Tab(icon: new Icon(Icons.settings))
                ]
            )
        ),

        body: new Container(
                color: Colors.blue,
                child : new TabBarView(
                  controller: controller,
                  children: <Widget>[
                    clinicInfo(doctor),
                    doctorInfo(),
                    assistantInfo(),
                    clinicSchedule(),
                    clinicOperations()
            ]
          ),
        ),
      floatingActionButton: _bottomButtons(controller.index),
    );
  }

这里的_bottomButtons如下：

Widget _bottomButtons(int index ) {
    switch(index) {
      case 0: // dashboard
        return null;
        break;
      case 1: // doctors
        return FloatingActionButton(
          onPressed: null,
          backgroundColor: Colors.redAccent,
          child: Icon(
            Icons.edit,
            size: 20.0,
          ),
        );
        break;
      case 2: // assistants
        return FloatingActionButton(
          onPressed: null,
          backgroundColor: Colors.redAccent,
          child: Icon(
            Icons.edit,
            size: 20.0,
          ),
        );
        break;
      case 3: // sessions
        return null;
        break;
      case 4: // settings
        return null;
        break;
    }
  }

如我们所见，FAB 应该只在选项卡 1 和 2 上可见。我在这里忽略/做错了什么？

Answer 1

您确定要更改状态吗？
也许你需要：

  TabController controller;

  @override
  void initState() {
    super.initState();
    controller = new TabController(vsync: this, length: 5);
    controller.addListener(updateIndex);
  }

  @override
  void dispose() {
    controller.removeListener(updateIndex);
    controller.dispose();
    super.dispose();
  }

  void updateIndex() {
    setState(() {});
  }