如何单独控制ListView每个子项中FloatingActionButton的可见性？

你遇到的核心问题是所有列表项共享了同一个全局的_isVisible状态变量，所以当任何一个列表项触发滚动监听时，setState会修改全局状态，导致所有列表项的按钮同步显示/隐藏。要实现单独控制每个列表项的按钮可见性，需要给每个列表项维护独立的状态，同时不修改generateList()方法。

1. 替换全局状态为索引对应的状态集合 #

将单个的_isVisible变量替换为一个Map<int, bool>，用来存储每个列表项索引对应的按钮可见状态，默认所有项的按钮都是可见的。

2. 在滚动监听器中仅更新当前项的状态 #

修改滚动监听逻辑，当触发显示/隐藏时，只更新当前列表项索引对应的状态值，而不是全局变量。

3. 处理延迟显示的闭包问题 #

在Future.delayed中要确保捕获的是当前列表项的索引，避免因列表项复用导致的状态错误。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final ThemeData? themeData;
  const MyApp({Key? key, this.themeData}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: AppView2(),
    );
  }
}

class AppView2 extends StatefulWidget {
  const AppView2({
    Key? key,
  }) : super(key: key);

  @override
  _AppViewState createState() => _AppViewState();
}

class _AppViewState extends State<AppView2> {
  // 用Map存储每个索引对应的按钮可见状态
  Map<int, bool> _itemVisibility = {};
  List<String> listData = [];
  String dummyText =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";

  Future generateList() async {
    listData = [dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText, dummyText];
    // 初始化所有项的可见状态为true
    if (_itemVisibility.isEmpty) {
      for (int i = 0; i < listData.length; i++) {
        _itemVisibility[i] = true;
      }
    }
    return listData;
  }

  @override
  void initState() {
    generateList();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: const Text('DataTable'),
            ),
            body: FutureBuilder(
              future: generateList(),
              builder: (context, AsyncSnapshot snapShot) {
                if (snapShot.hasData) {
                  return ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      itemCount: snapShot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        // 为每个列表项创建独立的ScrollController
                        final ScrollController _hideButtonController = ScrollController();
                        // 捕获当前索引，避免闭包问题
                        final currentIndex = index;

                        _hideButtonController.addListener(() {
                          // 检查当前滚动方向
                          final isReverse = _hideButtonController.positions.any((pos) =>
                              pos.userScrollDirection == ScrollDirection.reverse);
                          final isForward = _hideButtonController.positions.any((pos) =>
                              pos.userScrollDirection == ScrollDirection.forward);

                          if (isReverse || isForward) {
                            setState(() {
                              _itemVisibility[currentIndex] = false;
                            });
                            // 延迟1秒恢复显示
                            Future.delayed(const Duration(milliseconds: 1000), () {
                              if (mounted) {
                                setState(() {
                                  _itemVisibility[currentIndex] = true;
                                });
                              }
                            });
                          }
                        });

                        return SizedBox(
                          height: 250,
                          child: Stack(
                            children: [
                              CustomScrollView(
                                controller: _hideButtonController,
                                scrollDirection: Axis.horizontal,
                                shrinkWrap: true,
                                slivers: <Widget>[
                                  SliverPadding(
                                    padding: const EdgeInsets.all(20.0),
                                    sliver: SliverList(
                                      delegate: SliverChildListDelegate(
                                        <Widget>[
                                          Center(
                                            child: Text(snapShot.data[index].toString()),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Visibility(
                                // 使用当前索引对应的可见状态
                                visible: _itemVisibility[index] ?? true,
                                child: Align(
                                  alignment: Alignment.centerRight,
                                  child: FloatingActionButton(
                                      child: const Icon(Icons.arrow_forward_ios),
                                      onPressed: () {}),
                                ),
                              )
                            ],
                          ),
                        );
                      });
                } else {
                  return const CircularProgressIndicator();
                }
              },
            )));
  }
}

class ListModel {
  String title;
  bool isVisible;
  ListModel(this.title, this.isVisible);
}

• 将全局的_isVisible替换为Map<int, bool> _itemVisibility，每个列表项索引对应独立的可见状态。
• 在generateList()中初始化所有项的可见状态为true，满足不修改该方法核心逻辑的要求。
• 滚动监听器中仅更新当前列表项索引对应的状态，避免影响其他项。
• 在Future.delayed中添加mounted判断，防止页面销毁后触发setState导致错误。

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