时间戳

首页 > 解决方案 > 如何在 Dart Flutter 中将 ListView.builder 或 List 索引设为静态

flutter - 如何在 Dart Flutter 中将 ListView.builder 或 List 索引设为静态

问题描述

我正在构建一个颤振应用程序，它会因用户交互而增加列表上的索引值。

class _CheckoutScreenState extends State<CheckoutScreen>{
List<int> quantity = [1, 2, 1, 6];
void increment(int index){
 setState((){
   quantity[index] +=1;
 });
}
void decrement(int index){
  if(quantity[index] != 0){
  setState((){
   quantity[index] -=1;
 });
}
}
@override
Widget build(BuildContext context){
 return ListView.builder(
 itemBuilder: (BuildContext context, index) {
  return quantity[index] != 0 ? 
   ListTile(
    leading: IconButton(
    icon: Icon(Icons.remove),
    onPressed: (){
     decrement(index);
    }
   ),
   trailing: IconButton(
    icon: Icon(Icons.add),
    onPressed: (){
     increment(index);
    }
   ),
   title: Text('${quantity[index].toString()} products')
  )
 }
 )
}
}

当我运行此代码，然后删除一个项目时（一旦项目为 0，它就不会显示在屏幕上），索引会随着 ListView.Builder 的重建而移动。例如，如果我在索引 2 处删除了项目（使其数量为 0），则索引应如下所示

  [1,2,0,6]

但是由于列表视图构建器，索引发生了变化，并且列表视图构建器只有

  [1,2,6]

这与主列表不连续。如何在 listView 构建器中将此索引设为静态，以便在需要重建时不会移动它

标签： flutterdartlistviewarraylistshopping-cart

解决方案

将 List 替换为 Map 并将当前索引数量显示为 Map，这样每个 map 键代表一个唯一标识符

推荐阅读