flutter ListView 局部刷新

news2025/2/13 0:12:56

在 Flutter 中，要仅刷新 ListView 中的某一列（即特定列表项），可以通过以下步骤实现：

核心思路

为每个列表项分配唯一标识（如 Key），帮助 Flutter 识别需要更新的项。
局部状态管理：通过 StatefulWidget 或状态管理工具（如 Provider、Bloc）控制单个列表项的更新。
避免全局刷新：不调用 setState() 刷新整个列表，而是仅更新目标项。

方法 1：使用 `StatefulWidget` + `Key`

为每个列表项包裹 StatefulWidget，并为其分配唯一 Key。当数据变化时，仅触发目标项的 setState。

class MyListView extends StatelessWidget {
  final List<String> items = List.generate(20, (i) => 'Item $i');

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) => ListItem(
        key: ValueKey(items[index]), // 唯一 Key
        content: items[index],
      ),
    );
  }
}

class ListItem extends StatefulWidget {
  final String content;

  const ListItem({Key? key, required this.content}) : super(key: key);

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

class _ListItemState extends State<ListItem> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(widget.content),
      trailing: _isSelected ? Icon(Icons.check) : null,
      onTap: () {
        // 仅更新当前列表项
        setState(() => _isSelected = !_isSelected);
      },
    );
  }
}

方法 2：使用 `Provider` 状态管理

通过 ChangeNotifier 管理数据，结合 Consumer 或 Selector 实现局部刷新。

步骤 1：定义数据模型

class ItemModel extends ChangeNotifier {
  final List<Item> _items = List.generate(20, (i) => Item(id: i, text: 'Item $i'));

  List<Item> get items => _items;

  void toggleSelection(int id) {
    final item = _items.firstWhere((item) => item.id == id);
    item.isSelected = !item.isSelected;
    notifyListeners(); // 通知监听者
  }
}

class Item {
  final int id;
  final String text;
  bool isSelected;

  Item({required this.id, required this.text, this.isSelected = false});
}

步骤 2：在顶层提供 Model

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => ItemModel(),
      child: MyApp(),
    ),
  );
}

步骤 3：构建 ListView 并局部刷新

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Consumer<ItemModel>(
          builder: (context, model, child) {
            return ListView.builder(
              itemCount: model.items.length,
              itemBuilder: (context, index) {
                final item = model.items[index];
                // 使用 Selector 优化，仅在 item.isSelected 变化时刷新
                return Selector<ItemModel, bool>(
                  selector: (_, model) => model.items[index].isSelected,
                  builder: (_, isSelected, __) {
                    return ListTile(
                      title: Text(item.text),
                      trailing: isSelected ? Icon(Icons.check) : null,
                      onTap: () => model.toggleSelection(item.id),
                    );
                  },
                );
              },
            );
          },
        ),
      ),
    );
  }
}

方法 3：使用 `Key` 强制刷新特定项

如果数据变化来自外部（如网络更新），通过更新 Key 强制重建目标项。

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  List<String> items = List.generate(20, (i) => 'Item $i');
  final Map<int, UniqueKey> _keys = {};

  @override
  void initState() {
    super.initState();
    // 初始化每个项的 UniqueKey
    for (int i = 0; i < items.length; i++) {
      _keys[i] = UniqueKey();
    }
  }

  void _updateItem(int index) {
    setState(() {
      items[index] = 'Updated Item $index';
      _keys[index] = UniqueKey(); // 更新 Key 以强制刷新
    });
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) => ListTile(
        key: _keys[index], // 动态 Key
        title: Text(items[index]),
        onTap: () => _updateItem(index),
      ),
    );
  }
}