Flutter实现SingleChildScrollView滚动时FAB隐藏/显示的问题

原代码存在的问题 #

1. 滚动监听逻辑冗余嵌套，可能导致状态切换不及时
2. 使用Visibility组件直接显示/隐藏，无过渡动画，体验生硬
3. 未实现ScrollController的销毁逻辑，易引发内存泄漏
4. 缺少类成员变量的明确声明（_isVisible、_hideButtonController）

修正后的完整代码 #

import 'package:flutter/material.dart';

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

  @override
  State<ScrollFabPage> createState() => _ScrollFabPageState();
}

class _ScrollFabPageState extends State<ScrollFabPage> {
  final dataKey = GlobalKey();
  bool _isVisible = true;
  late ScrollController _hideButtonController;
  final Color colorBlue = Colors.blue;

  @override
  void initState() {
    super.initState();
    _hideButtonController = ScrollController();
    _hideButtonController.addListener(_handleScroll);
  }

  void _handleScroll() {
    final scrollDirection = _hideButtonController.position.userScrollDirection;
    // 向下滚动（内容向上移动）时隐藏FAB
    if (scrollDirection == ScrollDirection.reverse) {
      if (_isVisible) {
        setState(() => _isVisible = false);
      }
    }
    // 向上滚动（内容向下移动）时显示FAB
    else if (scrollDirection == ScrollDirection.forward) {
      if (!_isVisible) {
        setState(() => _isVisible = true);
      }
    }
  }

  @override
  void dispose() {
    _hideButtonController.dispose(); // 销毁控制器，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Scroll FAB Demo")),
      floatingActionButton: AnimatedOpacity(
        opacity: _isVisible ? 1.0 : 0.0,
        duration: const Duration(milliseconds: 300), // 渐变过渡时长
        child: FloatingActionButton(
          backgroundColor: colorBlue,
          onPressed: () => Scrollable.ensureVisible(
            dataKey.currentContext!,
            duration: const Duration(seconds: 1),
            curve: Curves.easeInOut,
          ),
          child: const Icon(Icons.arrow_upward),
        ),
      ),
      body: SingleChildScrollView(
        key: dataKey,
        physics: const BouncingScrollPhysics(),
        controller: _hideButtonController,
        // 示例内容，可替换为你的实际内容
        child: Column(
          children: List.generate(50, (index) {
            return ListTile(title: Text("Item $index"));
          }),
        ),
      ),
    );
  }
}

关键修改说明 #

• 简化监听逻辑：去掉冗余的嵌套判断，直接根据滚动方向处理状态切换，逻辑更清晰
• 平滑过渡效果：用AnimatedOpacity替代Visibility，实现FAB的渐变显示/隐藏，提升交互体验
• 内存泄漏防护：在dispose方法中销毁ScrollController，释放资源
• 变量声明规范：明确声明类成员变量，符合Flutter代码规范

内容的提问来源于stack exchange，提问作者mideveloper