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(() {});
  }

Flutter标签中的选择性FloatingActionButton可见性

1 个答案: