flutter - Flutter 中的动画浮动操作按钮

Question

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

这是我的代码：

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

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

谢谢你

标签： flutterdart

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";
      });
    }