如何实现点击ListView.builder指定索引的ElevatedButton仅更新该按钮文本

问题原因 #

你当前将isAddedToCart定义为全局的页面级状态变量，ListView内所有列表项共用这一个状态值，因此修改后所有按钮的文本都会同步变更。

解决方案 #

方案1：用列表存储每个列表项的状态 #

适合列表元素固定、不会动态新增/删除/排序的场景，直接用List存储每个索引对应的购物车添加状态：
首先初始化状态：

// 假设你的列表数据源为products，长度与ListView的itemCount一致
List<bool> addToCartStatus = [];

@override
void initState() {
  super.initState();
  // 给所有列表项初始化未加入购物车的状态
  addToCartStatus = List.generate(products.length, (index) => false);
}

修改ListView.builder内的按钮逻辑：

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) {
    // 其余布局代码保持不变
    return ElevatedButton (
      child: addToCartStatus[index]? const Text('Added to cart') : const Text('Add to cart'),
      style: ElevatedButton.styleFrom(
        primary: Constants.primaryColor,
        onPrimary: Constants.appColor
      ),
      onPressed: () async{
        setState(() {
          // 仅修改当前点击索引对应的状态
          addToCartStatus[index] = !addToCartStatus[index];
        });
      },
    );
  }
)

方案2：用Set存储已加入购物车的元素唯一标识 #

适合列表会动态变化（有新增/删除/排序操作）的场景，避免索引错乱导致状态匹配错误：

// 假设每个商品有唯一的int类型id，存储已加入购物车的商品id
Set<int> addedCartIds = {};

修改按钮逻辑：

ElevatedButton (
  child: addedCartIds.contains(products[index].id)? const Text('Added to cart') : const Text('Add to cart'),
  style: ElevatedButton.styleFrom(
    primary: Constants.primaryColor,
    onPrimary: Constants.appColor
  ),
  onPressed: () async{
    setState(() {
      int currentId = products[index].id;
      if(addedCartIds.contains(currentId)){
        addedCartIds.remove(currentId);
      }else{
        addedCartIds.add(currentId);
      }
    });
  },
)

方案3：封装独立列表项Widget自行管理状态 #

性能最优的方案，将每个列表项封装为独立的StatefulWidget，内部维护自己的购物车状态，点击时仅刷新当前列表项，不会触发整个ListView重绘：

// 单独封装的商品列表项组件
class ProductItem extends StatefulWidget {
  final Product product;
  const ProductItem({super.key, required this.product});

  @override
  State<ProductItem> createState() => _ProductItemState();
}

class _ProductItemState extends State<ProductItem> {
  // 状态由列表项内部维护，不会影响其他项
  bool isAddedToCart = false;
  @override
  Widget build(BuildContext context) {
    return Row(
      // 你原本的列表项布局逻辑
      children: [
        // 其余布局元素省略
        ElevatedButton (
          child: isAddedToCart? const Text('Added to cart') : const Text('Add to cart'),
          style: ElevatedButton.styleFrom(
            primary: Constants.primaryColor,
            onPrimary: Constants.appColor
          ),
          onPressed: () async{
            setState(() {
              isAddedToCart = !isAddedToCart;
            });
          },
        ),
      ],
    );
  }
}

// 父页面ListView直接使用封装好的组件
ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index){
    return ProductItem(product: products[index]);
  }
)

内容的提问来源于stack exchange，提问作者G H Prakash