Flutter - 滑动时隐藏FAB按钮

Question

我有一个带有TabBarView和FloatingActionButton的Scaffold。当我滑动到最后一个选项卡时，我想要隐藏这个FAB。为此，我编写了以下代码：

@override
  void initState() {
    super.initState();

    widget._tabBarController = new TabController(length: 3, vsync: this);
    widget._tabBarController.addListener(() {
      if (widget._tabBarController.index == 2) {
        setState(() => widget._visibleFab = false);
      } else {
        setState(() => widget._visibleFab = true);
      }
    });
  }

在脚手架中使用浮动操作按钮（FAB Button）

Visibility(
  visible: widget._visibleFab,
  child: FloatingActionButton.extended(
  elevation: .75,
  label: new Text("My Action Button",
  style: TextStyle(
    fontWeight: FontWeight.w900,
    color: statusColor,
    letterSpacing: 0.2)),
  onPressed: () {

  },
  backgroundColor: Colors.white,
  icon: Icon(Icons.chat, color: statusColor),
  isExtended: true,
))

它可以正常工作，但是当我通过滑动切换到最后一个选项卡时，它需要大约半秒钟才能隐藏。除非我直接点击这个最后一个选项卡，而不是滑动页面，否则它会立即隐藏。

为什么会这样呢？

- Notheros

---

我不知道，但是小心widget._tabBarController.index == 2。我曾经遇到过很多类似的问题，因为最后一个屏幕永远无法到达。假设你有4个屏幕，它只会到3.99998。我不知道它是否已经修复。 - Jalil

谢谢。我尝试使用>1而不是==2，但没有起作用。但我同意你的观点。我认为问题出在这个if语句上。 - Notheros

对我来说，使用>1.9可以工作，但也应该适用于>1。 - Jalil

只是一个想法。也许可以在 widget._tabBarController.indexIsChanging 为 true 时隐藏 FloatingActionButton。https://docs.flutter.io/flutter/material/TabController-class.html - Zvi Karp

我也试过了，没有任何变化。:( - Notheros

Answer 1

最终我决定为每个TabBarView使用一个Scaffold。现在，我可以轻松设置每个选项卡的FloatActionButton和BottomNavigatorBar。

- Notheros

Answer 2

将您的构建方法更改为如果您不想要Fab，则返回null。

例如。

 floatingActionButton: _createFloatingActionButton(),

 Widget _createFloatingActionButton() {
    if (!_tfFabVisible) {
      return null;
    }
    return FloatingActionButton(
      onPressed: _btnSubmitPressed,

- Brian Oh

---

解释为什么是-1的原因？ - Brian Oh

问题不在于如何隐藏FAB，而是当我滑动TabBarView时它为什么需要时间才能被隐藏。（不是我给你-1，但这个答案真的没有帮助） - Notheros

我猜想如果你想要隐藏它，那么你不希望它被使用。如果是这种情况，而且这也是我遇到的问题，那么解决方案就是一开始就不显示它。我猜想延迟的原因是Flutter先显示小部件然后再隐藏它。所以，我的观点是，如果你想要实现这个目标，不显示它难道不是更好吗？ - Brian Oh

我只想在第三个选项卡中隐藏它，第一个和第二个选项卡必须显示此浮动按钮。 - Notheros

我看不出问题所在。当你想让Fab可见时，你可以使用setState()来使Fab可见或不可见。我的代码可以实现这个功能，因为setState()会重新构建。当你想要显示它时，它将显示Fab。setState()总是会进行构建，所以如果代码返回一个Fab，它将是可见的，如果返回null，它将是不可见的。这不是你想要的吗？试一下，不会花费很长时间。 - Brian Oh

它是有效的。问题在于当我到达最后一个选项卡时，需要一些时间才能隐藏FAB。就这样。然后，当我移动到另一个选项卡时，需要一些时间才能再次显示。这很丑陋。除非我触摸TabBar本身，否则它无法正常工作。 - Notheros