Flutter中ListView.builder调用setState后组件未更新问题求助

要实现每个列表项独立的悬停切换效果，核心是给每个子项单独维护hover状态，而不是用全局的单个布尔值。下面是可直接运行的解决代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hover List Demo')),
        body: const HoverListView(),
      ),
    );
  }
}

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

  @override
  State<HoverListView> createState() => _HoverListViewState();
}

class _HoverListViewState extends State<HoverListView> {
  // 模拟数据源，这里用10个条目举例
  final List<String> _items = List.generate(10, (index) => '条目 ${index + 1}');
  // 存储每个子项的hover状态，初始全为false
  late List<bool> _isHoveredList;

  @override
  void initState() {
    super.initState();
    _isHoveredList = List.filled(_items.length, false);
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _items.length,
      itemBuilder: (context, index) {
        return MouseRegion(
          // 鼠标进入时更新当前索引的hover状态为true
          onEnter: (_) => setState(() => _isHoveredList[index] = true),
          // 鼠标离开时更新为false
          onExit: (_) => setState(() => _isHoveredList[index] = false),
          child: _isHoveredList[index]
              ? _buildHoverContainer(_items[index])
              : _buildDefaultContainer(_items[index]),
        );
      },
    );
  }

  // 默认显示的Container
  Widget _buildDefaultContainer(String text) {
    return Container(
      height: 60,
      color: Colors.grey[200],
      alignment: Alignment.center,
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Text(text, style: const TextStyle(fontSize: 16)),
    );
  }

  // 悬停时显示的Container
  Widget _buildHoverContainer(String text) {
    return Container(
      height: 60,
      color: Colors.blue[200],
      alignment: Alignment.center,
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text(text, style: const TextStyle(fontSize: 16, color: Colors.white)),
          const Icon(Icons.edit, color: Colors.white),
          const Icon(Icons.delete, color: Colors.white),
        ],
      ),
    );
  }
}

关键说明： #

• 独立状态存储：用List<bool>保存每个子项的hover状态，长度和数据源一致，确保每个条目状态互不干扰。
• MouseRegion监听：通过MouseRegion的onEnter和onExit事件，精准更新对应索引的状态，触发组件重建。
• 动态数据源适配：如果你的数据源是动态变化的，记得在数据源更新时同步更新_isHoveredList的长度和状态，比如在setState里重新生成列表。

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