使用Bloc实现滚动时隐藏Floating Action Button功能失效如何解决

问题原因及修复方案 #

你的功能无法生效是三个核心问题导致的，按顺序修改即可： #

1. Cubit修改状态后未触发UI更新

你当前修改show变量后没有发射对应的状态，BlocConsumer接收不到更新通知，自然不会重绘FAB的可见性。
首先在你的AppStates类中新增状态：

class AppChangeFabVisibilityState extends AppStates {}

修改AppCubit中的显隐方法，修改值后发射状态，同时增加重复状态判断避免不必要重绘：

void hideBottomWidget() {
  if(show) {
    show = false;
    emit(AppChangeFabVisibilityState());
  }
}

void showBottomWidget() {
  if(!show) {
    show = true;
    emit(AppChangeFabVisibilityState());
  }
}

2. 滚动控制器绑定到了不可滚动的组件

FeedsScreen的布局结构中，你给内部ListView设置了NeverScrollableScrollPhysics，它本身不会响应滚动事件，滚动行为完全由外层的SingleChildScrollView处理，绑定到内部ListView的控制器自然监听不到滚动事件。
同时shrinkWrap: true的长列表会一次性渲染所有条目，性能非常差，推荐直接优化布局结构，移除外层SingleChildScrollView，把顶部卡片合并到ListView中：

class FeedsScreen extends StatelessWidget {
  const FeedsScreen({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var responsive = MediaQuery.of(context).size;
    return BlocConsumer<AppCubit, AppStates>(
      listener: (context, state) {},
      builder: (context, state) {
        var cubit = AppCubit.get(context);
        return ListView.separated(
          controller: cubit.scrollController,
          physics: BouncingScrollPhysics(),
          itemBuilder: (context, index) {
            // 第一个条目放原来顶部的Card
            if(index == 0) {
              return Card(/* 原来顶部Card的代码 */);
            }
            // 其余条目返回帖子卡片
            return buildPostItem(context);
          },
          separatorBuilder: (context, index) => SizedBox(height: 10,),
          // 总数+1 多出来的位置放顶部卡片
          itemCount: 11,
        );
      },
    );
  }

  Widget buildPostItem(context) => Card(/* 原来PostItem的代码 */);
}

如果你不想修改布局结构，也可以直接把scrollController绑定到外层的SingleChildScrollView上，即可临时生效，但不推荐长期使用这个方案。 #

3. 可选优化：增加滚动阈值避免误触发

直接监听滚动方向会出现手指轻微滑动就触发FAB显隐的问题，可以增加最小滚动距离判断提升体验：

void handleScroll() {
  scrollController.addListener(() {
    // 向上滚动超过10dp才隐藏
    if (scrollController.position.userScrollDirection == ScrollDirection.reverse 
        && scrollController.position.extentBefore > 10) {
      hideBottomWidget();
    }
    // 向下滚动超过10dp才显示
    if (scrollController.position.userScrollDirection == ScrollDirection.forward
        && scrollController.position.extentAfter > 10) {
      showBottomWidget();
    }
  });
}

内容的提问来源于stack exchange，提问作者Mahmoud Al-Haroon