Flutter - 滑动时隐藏 FAB 按钮

Posted 2023-02-22

【中文标题】Flutter - 滑动时隐藏 FAB 按钮

【英文标题】：Flutter - Hide FAB Button on swipe

【发布时间】：2019-10-03 16:36:15

【问题描述】：

我有一个带有 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按钮

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,
))

它可以工作，但是当我滑动到最后一个标签时，它需要大约半秒才能隐藏。除非我直接触摸最后一个标签，而不滑动页面，否则它会立即隐藏。

这是为什么呢？

【问题讨论】：

我不认识，但请注意widget._tabBarController.index == 2。我遇到了很多类似的问题，因为最后一个问题永远不会结束。假设您有 4 个屏幕，它只是达到 3.99998。我不知道它是否已经修复了。

谢谢。我尝试了>1 而不是==2，但没有奏效。但我同意你的看法。我认为问题出在if。

对我来说，它适用于 >1.9，但它也应该适用于 >1。

只是一个想法。当widget._tabBarController.indexIsChanging 为真时，也许尝试隐藏FloatingActionButton。 docs.flutter.io/flutter/material/TabController-class.html

我也试过了，没有任何改变。 :(

【参考方案1】：

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

例如。

 floatingActionButton: _createFloatingActionButton(),

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

【讨论】：

解释-1的原因？

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

我想如果你想隐藏它，那么你不希望它被使用。如果是这样，这就是我遇到的情况，那么解决方案是首先不显示它。我推测延迟的原因是因为 Flutter 先显示小部件然后隐藏它。所以，这就是我的意思，如果这是您想要实现的目标，最好不要展示它吗？

我只想在第三个标签中隐藏它，第一个和第二个标签必须显示这个fab按钮。

我看不到问题所在。当您希望 Fab 可见时，您可以执行 setState() 以使 Fab 可见或不可见。我的代码将为此工作，因为 setState() 进行了重建。当你想显示它时，它会显示 Fab。 setState() 总是进行构建，所以如果代码返回一个 Fab，它将是可见的，如果它返回 null，它将是不可见的。这不是你想要的吗？试试看，不会花很长时间。

【参考方案2】：

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