ListView.builder列表项长按批量复选框动画失效及触发方案优化咨询

需求与现状 #

• 需求：长按ListView.builder中的列表项时，所有列表项前端的复选框执行显示/隐藏动画
• 现状：采用隐式动画实现但未生效，当前通过EventBus批量触发动画，寻求更优方案

当前列表项代码 #

class InspectionItemWidget extends Stateful Widget {
  final Inspection inspection;
  final Function(Inspection, bool) selected;

  const InspectionItemWidget(
      {Key? key, required this.inspection, required this.selected})
      : super(key: key);

  @override
  State<InspectionItemWidget> createState() => _InspectionItemWidgetState();
}

class _InspectionItemWidgetState extends State<InspectionItemWidget> {
  File? _imageFile;
  final _duration = const Duration(milliseconds: 400);
  late double _selectWidth;
  late double _opacity;
  late bool _selected;

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

    _selectWidth = 0.0;
    _opacity = 0.0;
    _selected = false;

    di<EventBus>().on<InspectionSelectEvent>().listen((event) {
      if (mounted) {
        setState(() {
          if (event.selectMode) {
            _selectWidth = 60.0;
            _opacity = 1.0;
          } else {
            _selectWidth = 0.0;
            _opacity = 0.0;
          }
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    AppLocalizations loc = AppLocalizations.of(context)!;

    return Padding(
      padding: const EdgeInsets.fromLTRB(16, 2, 16, 8),
      child: SizedBox(
        height: 80,
        child: PhysicalModel(
          color: Colors.white,
          elevation: 8,
          child: Row(
            children: [
              _buildSelectBox(),
              _buildImage(),
              Padding(
                padding: const EdgeInsets.only(left: 8),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(getStatusName(widget.inspection.status, loc),
                        style: TextStyle(color: colorMedium)),
                    Text(getTypeName(widget.inspection.type, loc),
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    Text(formatDateTime(widget.inspection.created)),
                    Text(widget.inspection.description)
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSelectBox() {
    return AnimatedContainer(
      duration: _duration,
      width: _selectWidth,
      child: AnimatedOpacity(
        opacity: _opacity,
        duration: _duration,
        child: Checkbox(
            value: _selected,
            onChanged: (_) {
              setState(() {
                _selected = !_selected;
              });
              widget.selected(widget.inspection, _selected);
            }),
      ),
    );
  }

  Widget _buildImage() {
    if (widget.inspection.imageName.isNotEmpty) {
      if (_imageFile != null) {
        return SizedBox(
          width: 80,
          height: 80,
          child: Padding(
              padding: const EdgeInsets.all(4),
              child: Image.file(_imageFile!,
                  width: 72, height: 72, fit: BoxFit.fill)),
        );
      } else {
        return FutureBuilder<void>(
            future: _loadImage(widget.inspection.imageName),
            builder: (context, snapshot) {
              return SizedBox(
                width: 80,
                height: 80,
                child: Padding(
                  padding: const EdgeInsets.all(4),
                  child: snapshot.connectionState == ConnectionState.done
                      ? Image.file(_imageFile!,
                          width: 72, height: 72, fit: BoxFit.fill)
                      : Container(),
                ),
              );
            });
      }
    }
    return const SizedBox(
        width: 80,
        height: 80,
        child: Padding(
          padding: EdgeInsets.all(4),
          child: Icon(Icons.no_photography, size: 72),
        ));
  }

  Future<void> _loadImage(String name) async {
    Directory appDocumentsDirectory = await getApplicationDocumentsDirectory();
    String appDocumentsPath = appDocumentsDirectory.path;
    String filePath = '$appDocumentsPath/images/$name';
    _imageFile = File(filePath);
  }
}

一、修复动画未生效问题 #

当前动画失效的核心原因是：AnimatedContainer宽度从0切换到60时，内部Checkbox被完全裁剪，AnimatedOpacity的透明度变化无法被观测到。可以通过以下两种方式修复：

方案1：调整动画容器与透明度逻辑 #

保留AnimatedContainer但增加占位逻辑，避免布局跳动，同时简化透明度控制：

Widget _buildSelectBox() {
  return AnimatedContainer(
    duration: _duration,
    width: _selectWidth > 0 ? 60 : 0,
    padding: const EdgeInsets.symmetric(horizontal: 8),
    child: Opacity(
      opacity: _opacity,
      child: Checkbox(
        value: _selected,
        onChanged: (_) {
          setState(() => _selected = !_selected);
          widget.selected(widget.inspection, _selected);
        },
      ),
    ),
  );
}

方案2：使用AnimatedSwitcher实现更流畅的切换 #

AnimatedSwitcher自带过渡动画，能更直观实现复选框的显示/隐藏效果：

Widget _buildSelectBox() {
  return AnimatedSwitcher(
    duration: _duration,
    transitionBuilder: (child, animation) => ScaleTransition(
      scale: animation,
      child: FadeTransition(opacity: animation, child: child),
    ),
    child: _selectWidth > 0 
        ? Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            key: const ValueKey('checkbox'),
            child: Checkbox(
              value: _selected,
              onChanged: (_) {
                setState(() => _selected = !_selected);
                widget.selected(widget.inspection, _selected);
              },
            ),
          )
        : const SizedBox(width: 60, key: ValueKey('placeholder')),
  );
}

二、替代EventBus的批量触发优化方案 #

EventBus存在全局耦合、状态追踪困难的问题，推荐以下两种更优的批量触发方式：

方案1：父组件管理状态，参数传递触发 #

在ListView的父组件中维护选择模式状态，通过参数传递给所有子项，状态变化时自动触发子项动画：

父组件代码片段

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

  @override
  State<InspectionList> createState() => _InspectionListState();
}

class _InspectionListState extends State<InspectionList> {
  bool _isSelectMode = false;
  final List<Inspection> _inspections = []; // 数据源

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _inspections.length,
      itemBuilder: (context, index) {
        return GestureDetector(
          onLongPress: () => setState(() => _isSelectMode = true),
          child: InspectionItemWidget(
            inspection: _inspections[index],
            selected: (inspection, isSelected) {
              // 处理选中逻辑
            },
            isSelectMode: _isSelectMode,
          ),
        );
      },
    );
  }
}

修改子组件代码

class InspectionItemWidget extends StatefulWidget {
  final Inspection inspection;
  final Function(Inspection, bool) selected;
  final bool isSelectMode; // 新增选择模式参数

  const InspectionItemWidget({
    Key? key,
    required this.inspection,
    required this.selected,
    required this.isSelectMode,
  }) : super(key: key);

  @override
  State<InspectionItemWidget> createState() => _InspectionItemWidgetState();
}

class _InspectionItemWidgetState extends State<InspectionItemWidget> {
  // ... 原有变量保持不变

  @override
  void initState() {
    super.initState();
    _selectWidth = 0.0;
    _opacity = 0.0;
    _selected = false;
    // 移除EventBus监听
  }

  @override
  void didUpdateWidget(covariant InspectionItemWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 监听选择模式变化，触发动画
    if (oldWidget.isSelectMode != widget.isSelectMode) {
      setState(() {
        if (widget.isSelectMode) {
          _selectWidth = 60.0;
          _opacity = 1.0;
        } else {
          _selectWidth = 0.0;
          _opacity = 0.0;
          _selected = false; // 退出选择模式时清空选中状态
        }
      });
    }
  }

  // ... 原有方法保持不变
}

方案2：使用状态管理库（如Provider/Bloc） #

针对大型项目，可通过状态管理库统一维护选择状态，所有子项监听状态变化：

1. 创建SelectionProvider维护isSelectMode状态
2. 在父组件中注入该Provider
3. 子组件通过Consumer或Selector监听状态变化，自动触发动画

这种方式适合复杂场景，状态流转清晰，便于全局管理。

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