Flutter列表项独立增减：点击对应按钮仅修改当前项数量

问题根源 #

你当前用了全局的ticket变量，所有列表项都绑定这个变量，所以点击任何按钮都会同步修改所有项的显示值。要实现单独控制，得让每个列表项自己维护数量属性。

分步解决 #

1. 修改Painting数据模型
   给Painting类新增一个ticket属性，用来存储每幅画的单独数量，默认值设为0：

class Painting {
  final String? title;
  final String? subTitle;
  final String? artSubtitle;
  final String? artTitle;
  final String? imageAsset;
  int ticket; // 新增：当前项的数量

  Painting({
    this.title,
    this.subTitle,
    this.artSubtitle,
    this.artTitle,
    this.imageAsset,
    this.ticket = 0, // 默认数量为0
  });
}

2. 初始化列表（无需额外修改，默认ticket为0）

List<Painting> paintingList = [
  Painting(
    title: 'Giacomo Amiconi',
    subTitle: 'Jacob and Rachel',
    artSubtitle: 'National Museum, Warsaw',
    artTitle: '18th Century',
    imageAsset: 'https://upload.wikimedia.org/wikipedia/commons/0/0a/Amigoni_Jacob_and_Rachel.jpg',
  ),
];

3. 修改UI部分的显示与点击逻辑
   删掉全局的int ticket = 0;，然后调整列表项的显示和点击事件：

return Expanded(
  child: ListView.separated(
    separatorBuilder: (BuildContext context, int index) {
      return SizedBox(height: 10);
    },
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    itemCount: paintingList.length,
    itemBuilder: (context, index) {
      Painting model = paintingList[index];
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Card(
            elevation: 5,
            child: Column(
              children: [
                ListTile(
                  leading: Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Icon(Icons.brush, color: orange),
                  ),
                  title: Text(
                    model.title!,
                    style: artTitle,
                  ),
                  subtitle: Text(
                    model.subTitle!,
                    style: artSubtitle,
                  ),
                ),
                Image.network(
                  model.imageAsset!,
                ),
                ListTile(
                  title: Text(
                    model.artTitle!,
                    style: artTitle,
                  ),
                  subtitle: Text(
                    model.artSubtitle!,
                    style: artSubtitle,
                  ),
                  trailing: Text('${model.ticket}'), // 显示当前项的数量
                ),
                Row(
                  children: [
                    Container(
                        child: GestureDetector(
                            onTap: () {
                              setState(() {
                                // 仅修改当前点击项的数量
                                paintingList[index].ticket++;
                              });
                            },
                            child: Icon(Icons.add)))
                  ],
                )
              ],
            )),
      );
    },
  ),
);

核心逻辑 #

每个Painting实例独立维护自己的ticket值，点击按钮时只修改对应索引项的属性，这样就能实现单独控制每个列表项的数量变化，不会再出现同步修改的问题。

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