Flutter ListView.builder点击卡片按钮仅下方卡片数值增加如何实现

核心思路 #

• 点击卡片按钮时先获取当前卡片对应的索引index
• 遍历动态列表中所有索引大于index的元素，将对应数值做加1操作
• 触发状态更新让列表重新渲染，ListView.builder自带懒加载逻辑，只会刷新可视区域内的卡片，不会有多余性能损耗

可运行示例代码 #

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("列表增量示例")),
        body: const ListIncrementDemo(),
      ),
    );
  }
}

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

  @override
  State<ListIncrementDemo> createState() => _ListIncrementDemoState();
}

class _ListIncrementDemoState extends State<ListIncrementDemo> {
  // 存储卡片数值的动态列表，此处为测试数据可替换为你的业务数据
  final List<int> _cardValues = List.generate(10, (index) => index);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _cardValues.length,
      itemBuilder: (context, index) {
        return Card(
          margin: const EdgeInsets.all(10),
          child: Padding(
            padding: const EdgeInsets.all(15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("卡片$index 数值：${_cardValues[index]}"),
                ElevatedButton(
                  onPressed: () {
                    // 仅修改当前卡片下方所有卡片的数值
                    setState(() {
                      for (int i = index + 1; i < _cardValues.length; i++) {
                        _cardValues[i] += 1;
                      }
                    });
                  },
                  child: const Text("点击下方数值+1"),
                )
              ],
            ),
          ),
        );
      },
    );
  }
}

优化建议 #

• 列表数据量小于100条时直接使用上述setState全局刷新即可，完全满足性能要求
• 列表数据量较大时，推荐给每个列表项绑定ValueNotifier做局部刷新，避免非修改区域的卡片无意义重绘，核心实现如下：

// 单独封装带独立状态的列表卡片
class ListCard extends StatefulWidget {
  final int index;
  final ValueNotifier<int> value;
  final VoidCallback onBtnTap;
  const ListCard({super.key, required this.index, required this.value, required this.onBtnTap});

  @override
  State<ListCard> createState() => _ListCardState();
}

class _ListCardState extends State<ListCard> {
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(10),
      child: Padding(
        padding: const EdgeInsets.all(15),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            ValueListenableBuilder(
              valueListenable: widget.value,
              builder: (context, val, child) => Text("卡片${widget.index} 数值：$val"),
            ),
            ElevatedButton(
              onPressed: widget.onBtnTap,
              child: const Text("点击下方数值+1"),
            )
          ],
        ),
      ),
    );
  }
}

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