Question

我正在尝试添加一个动画，当用户向下滚动时，fab 将动画消失并消失，向上滚动时，fab 再次出现。

这是我的代码：

return Scaffold(
      floatingActionButton: AnimatedContainer(
        curve: Curves.easeIn,
        duration: const Duration(seconds: 1),
        child: Opacity(
          opacity: _fabVisible ? 1 : 0,
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(
              Icons.add,
              color: Colors.black,
            ),
            backgroundColor: Colors.white,
          ),
        ),
      ),

代码现在所做的是 fab 正确隐藏，但它没有为不透明度设置动画，它只是在没有动画的情况下弹出，请帮忙！

谢谢

Answer 1

尝试使用scrollnotification检测向下滚动（像素增加）和向上滚动（像素减少），向下滚动时，setState _fabVisible = 0，反之：

Expanded(
            child: NotificationListener<ScrollNotification>(
              onNotification: (scrollNotification) {
                if (scrollNotification is ScrollStartNotification) {
                  _onStartScroll(scrollNotification.metrics);
                } else if (scrollNotification is ScrollUpdateNotification) {
                  _onUpdateScroll(scrollNotification.metrics);
                } else if (scrollNotification is ScrollEndNotification) {
                  _onEndScroll(scrollNotification.metrics);
                }
              },
              child: ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
                  return ListTile(title: Text("Index : $index"));
                },
              ),
            ),
          ),

_onStartScroll(ScrollMetrics metrics) {
      setState(() {
        message = "Scroll Start";
      });
    }
_onUpdateScroll(ScrollMetrics metrics) {
      setState(() {
        message = "Scroll Update";
      });
    }
_onEndScroll(ScrollMetrics metrics) {
      setState(() {
        message = "Scroll End";
      });
    }

Flutter 中的浮动操作按钮动画

1 个答案: