Flutter - 隐藏FloatingActionButton

Question

Flutter 中是否有内置的方法，可以在用户向下滚动 ListView 时隐藏 FloatingActionButton，并在向上滚动时显示它？

- Marcin Szałek

Answer 1

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
 }
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
 }

 class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  ScrollController _hideButtonController;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  var _isVisible;
  @override
  initState(){
    super.initState();
    _isVisible = true;
    _hideButtonController = new ScrollController();
    _hideButtonController.addListener((){
      if(_hideButtonController.position.userScrollDirection == ScrollDirection.reverse){
        if(_isVisible == true) {
            /* only set when the previous state is false
             * Less widget rebuilds 
             */
            print("**** ${_isVisible} up"); //Move IO away from setState
            setState((){
              _isVisible = false;
            });
        }
      } else {
        if(_hideButtonController.position.userScrollDirection == ScrollDirection.forward){
          if(_isVisible == false) {
              /* only set when the previous state is false
               * Less widget rebuilds 
               */
               print("**** ${_isVisible} down"); //Move IO away from setState
               setState((){
                 _isVisible = true;
               });
           }
        }
    }});
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new CustomScrollView(
          controller: _hideButtonController,
          shrinkWrap: true,
          slivers: <Widget>[
            new SliverPadding(
              padding: const EdgeInsets.all(20.0),
              sliver: new SliverList(
                delegate: new SliverChildListDelegate(
                  <Widget>[
                    const Text('I\'m dedicating every day to you'),
                    const Text('Domestic life was never quite my style'),
                    const Text('When you smile, you knock me out, I fall apart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('And I thought I was so smart'),
                    const Text('I realize I am crazy'),   
                  ],
                ),
              ),
            ),
          ],
        )
      ),
      floatingActionButton: new Visibility( 
        visible: _isVisible,
        child: new FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: new Icon(Icons.add),
        ),     
      ),
    );
  }
}

如果我没有使用listview，可能是因为我不知道如何在listview中滚动，对此我深表歉意。我会回答你问题的其他部分。

首先，您需要创建一个滚动控制器来监听滚动位置事件。

如果scrollcontroller成功找到了滚动方向（向前或向后），则添加一个状态来设置可见状态。

当您绘制按钮时，将按钮包装在可见性类中。您设置可见标志并且小部件应忽略输入命令。

编辑：我似乎无法添加链接到ScrollController、ScrollPosition、ScrollDirection和Opacity。我想你可以自己搜索或者让别人编辑这些链接。

编辑2：使用CopsonRoad或使用可见性widget，除非您希望在布局树中有一个未绘制的widget。

编辑3：鉴于新手使用代码原样，我将更新代码以鼓励更好的实践。使用可见性而不是Opacity。从setState中删除io。在Flutter 1.5.4-hotfix.2上测试。

- user1462442

---

根据这个Flutter问题，你必须使用import 'package:flutter/rendering.dart';才能使用ScrollController。 - Florian

@JimGomes 当我写答案的时候，可见性还不是一个选项。https://github.com/flutter/flutter/pull/20365 它是9个月前添加的。CopsOnRoad的答案比我的干净多了。 - user1462442

@user1462442 我喜欢你的解决方案，只是将 Opacity 替换为使用 Visibility。我建议更新你的示例以使用该控件。我已经基于你的解决方案来实现我的代码。 - Jim Gomes

当我使用带有setstate的监听器时，我的列表滚动变得缓慢，这会对用户体验造成很大的影响，是否有其他人遇到了同样的问题？ - Chance

@JustCase，你在setState中做了太多的事情。setState应该仅保留用于赋值。我上面的代码鼓励了不良的实践。我决定更新我的代码。如果你的代码仍然很慢，那么你的问题就在其他地方。 - user1462442

Answer 2

没有动画：

• 使用 Visibility 小部件：

floatingActionButton: Visibility(
  visible: false, // Set it to false
  child: FloatingActionButton(...),
)

使用 Opacity 小部件：

floatingActionButton: Opacity(
  opacity: 0, // Set it to 0
  child: FloatingActionButton(...),
)

使用三目运算符：

floatingActionButton: shouldShow ? FloatingActionButton() : null,

使用 if 条件：

floatingActionButton: Column(
  children: <Widget>[
    if (shouldShow) FloatingActionButton(...), // Visible if condition is true
  ],
)

---

带有动画效果：

这只是使用动画的一个示例，您可以使用此方法创建不同类型的用户界面。

bool _showFab = true;
  
@override
Widget build(BuildContext context) {
  const duration = Duration(milliseconds: 300);
  return Scaffold(
    floatingActionButton: AnimatedSlide(
      duration: duration,
      offset: _showFab ? Offset.zero : Offset(0, 2),
      child: AnimatedOpacity(
        duration: duration,
        opacity: _showFab ? 1 : 0,
        child: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),
    ),
    body: NotificationListener<UserScrollNotification>(
      onNotification: (notification) {
        final ScrollDirection direction = notification.direction;
        setState(() {
          if (direction == ScrollDirection.reverse) {
            _showFab = false;
          } else if (direction == ScrollDirection.forward) {
            _showFab = true;
          }
        });
        return true;
      },
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (_, i) => ListTile(title: Text('$i')),
      ),
    ),
  );
}

- CopsOnRoad

---

这个“Visibility（可见性）”小部件让我的一天变得更美好，是的！ - ArifMustafa

Answer 3

这是一个比较古老的问题，但是最新的Flutter中，在我看来有一种更好（更短）的解决方法。

其他解决方法也能够工作，但如果你想要一个漂亮的动画（类似于Android中的默认动画），请看这个：

NotificationListener会在用户向上/向下滚动时通知您。通过AnimationController，您可以控制FAB的动画。

下面是完整的示例：

class WidgetState extends State<Widget> with TickerProviderStateMixin<Widget> {
  AnimationController _hideFabAnimation;

  @override
  initState() {
    super.initState();
    _hideFabAnimation = AnimationController(vsync: this, duration: kThemeAnimationDuration);
  }

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

  bool _handleScrollNotification(ScrollNotification notification) {
    if (notification.depth == 0) {
      if (notification is UserScrollNotification) {
        final UserScrollNotification userScroll = notification;
        switch (userScroll.direction) {
          case ScrollDirection.forward:
            if (userScroll.metrics.maxScrollExtent !=
                userScroll.metrics.minScrollExtent) {
              _hideFabAnimation.forward();
            }
            break;
          case ScrollDirection.reverse:
           if (userScroll.metrics.maxScrollExtent !=
                userScroll.metrics.minScrollExtent) {
              _hideFabAnimation.reverse();
            }
            break;
          case ScrollDirection.idle:
            break;
        }
      }
    }
    return false;
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: _handleScrollNotification,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Fabulous FAB Animation')
        ),
        body: Container(),
        floatingActionButton: ScaleTransition(
          scale: _hideFabAnimation,
          alignment: Alignment.bottomCenter,
          child: FloatingActionButton(
            elevation: 8,
            onPressed: () {},
            child: Icon(Icons.code),
          ),
        ),
      ),
    );
  }
}

- Benjamin Menrad

---

谢谢你提供的解决方案！不过有一个小问题，当我打开一个带有FAB的页面时，它默认是隐藏的。我必须先向下滚动然后再向上滚动才能显示它。有没有办法一开始就显示FAB呢？谢谢 - themthem

我认为最简单的方法是通过调用 floatingActionButton: _showFab? MyFloatingActionButton() : null; 并使用 scrollController 监听器控制 _showFab 变量。这样可以获得构建动画。 - tmaihoff

@themthem，回答你的问题，你可以在initState中的AnimationController初始化后添加_hideFabAnimation.forward()。 - FJCG

我喜欢这个解决方案。我所做的一个补充是将我的fab包装在AnimatedCrossFade中，这使得动画变得隐式化，我只需要改变一个布尔标志即可。 - jwehrle

Answer 4

一个好的方法是...

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  ScrollController controller;
  bool fabIsVisible = true;

  @override
  void initState() {
    super.initState();
    controller = ScrollController();
    controller.addListener(() {
      setState(() {
        fabIsVisible =
            controller.position.userScrollDirection == ScrollDirection.forward;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        controller: controller,
        children: List.generate(
            100,
            (index) => ListTile(
                  title: Text("Text $index"),
                )),
      ),
      floatingActionButton: AnimatedOpacity(
        child: FloatingActionButton(
          child: Icon(Icons.add),
          tooltip: "Increment",
          onPressed: !fabIsVisible ? null: () {
            print("Pressed");
          },
        ),
        duration: Duration(milliseconds: 100),
        opacity: fabIsVisible ? 1 : 0,
      ),
    );
  }
}

- Josteve

---

不过在使用 SingleChildScrollView 时无法正常工作。 - carrasc0

Answer 5

您可以使用以下代码保留默认动画效果

floatingActionButton: _isVisible
        ? FloatingActionButton(...)
        : null,

- vahid haj hosseini

---

这应该是被接受的答案！这会给你内置的动画。将其与 scrollController 监听器组合使用，该监听器使用 setState 设置 _isVisible。 - tmaihoff

Answer 6

您可以使用Visibility小部件来处理子小部件的可见性。

示例：

  floatingActionButton:
            Visibility(visible: _visibilityFlag , child: _buildFAB(context)),

- Sibin

---

可见性应该用于代替不透明度。使用不透明度时，控制仍然存在并且可以被激活，即使您看不到它。这可能会给用户带来意外的结果，这是不好的。 - Jim Gomes

Answer 7

另一种非常好的方式是使用AnimatedOpacity。

AnimatedOpacity(
          opacity: isEnabled ? 0.0 : 1.0,
          duration: Duration(milliseconds: 1000),
          child: FloatingActionButton(
             onPressed: your_method,
             tooltip: 'Increment',
             child: new Icon(Icons.add),
          ),
        )

- Álvaro Agüero

Answer 8

@Josteve的答案是正确的，但每次用户滚动时调用setState()并不是一个好主意。更好的方法应该像这样：

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late ScrollController controller;
  bool _isFabVisible = true;

  @override
  void initState() {
    super.initState();
    controller = ScrollController();
    controller.addListener(() {
      // FAB should be visible if and only if user has not scrolled to bottom
      var userHasScrolledToBottom = controller.position.atEdge && controller.position.pixels > 0;

      if(_isFabVisible == userHasScrolledToBottom) {
        setState(() => _isFabVisible = !userHasScrolledToBottom);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        controller: controller,
        children: List.generate(
          100, 
          (index) => ListTile(
            title: Text("Text $index"),
          )),
      ),
      floatingActionButton: AnimatedOpacity(
        duration: const Duration(milliseconds: 100),
        opacity: _isFabVisible? 1 : 0,
        child: FloatingActionButton(
          tooltip: "Increment",
          onPressed: () {
            debugPrint('Pressed');
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

- DarkMath

---

非空实例字段 'controller' 必须被初始化。请尝试添加初始化表达式，或者生成一个初始化它的构造函数，或将其标记为 'late'。dart（not_initialized_non_nullable_instance_field） - Sunshine

Answer 9

对于使用Rxdart的任何人，有一种简洁的方法可以做到这一点，并带有额外方便的工具。

首先，将滚动位置转换为流，您也可以稍后重用此方法。

extension ScrollControllerX on ScrollController {
  Stream<double> positionAsStream() {
    late StreamController<double> controller;

    void addListener() => controller.add(position.pixels);
    void onListen() => this.addListener(addListener);
    void onCancel() {
      removeListener(addListener);
      controller.close();
    }

    controller = StreamController<double>(onListen: onListen, onCancel: onCancel);

    return controller.stream;
  }
}

像这样使用它。

      @override
      void initState() {
        super.initState();
        final subscription = scrollController
            .positionAsStream()
            .pairwise()
            .map((p) => p.last > p.first)
            .distinct() // If direction don't change, skip it 
            .listen((down) => down ? hideFabAnimationController.forward() : hideFabAnimationController.reverse());
    }

    FadeTransition(
                opacity: hideFabAnimationController,
                child: ScaleTransition(
                  scale: hideFabAnimationController,
                  child: FloatingActionButton(
                    onPressed: () => {},
                    child: const Icon(Icons.add),
                  ),
                ),
              )

不要忘记取消订阅！

      @override
      void dispose() {
        subscription.cancel();
      }

你可以做一些其他的事情，比如当用户滚动得太快时对流进行节流。

- khoaharp