如何从按钮 Flutter/Dart 中删除特定的地图键

Question

我有一个字符串和双打的地图。我正在为每个键创建一个按钮。这很好用（见图）。长按时，我想删除那个键/按钮。我遇到的问题是，无论您按第一个键还是任何其他键，被删除的键始终是最后输入的键。这是一个有趣的项目，如果有更好的方法，我愿意重写所有这些。地图的目标是跟踪该字符串的数量。例如：“铅笔”：2 等

for ( name in materialMap.keys)
            Container(
              child:ElevatedButton(
                child: Text(name),
                onPressed: () {},
                onLongPress: () {
                  
                  displayDeleteDialog(context,name );
                },
              ),
            ),

删除对话框

Future<void> displayDeleteDialog(BuildContext context, String name ) async {
  //this brings up an alert dialog to input material

   name=name;

  return showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text('Are you sure you would like to remove material'),
        actions: <Widget>[
          TextButton(
            child: Text('OK'),
            onPressed: () {
              materialMap.removeWhere((key, value) => key == name);
              //materialList.remove(materialList[indexDeleteM]);
              Navigator.push(
                context,```


  [1]: https://i.stack.imgur.com/wQ0lN.png

Answer 1

如果我理解正确，您在表示层内更新 materialMap 时遇到问题。第一件事是我会将 Map 更改为 Iterable 数据结构，例如 List，这样您就可以拥有索引以使其更易于删除。那么这听起来像是一个状态管理问题，你可以使用各种库或方法，例如Bloc/Cubit、Riverpod、Provider 或Stateful Widget。

大体上是您将materialMap 作为一个列表存储在小部件树中，然后在每次更新状态时使用某种构建器。

肘

class MyCubit extends Cubit<int> {
  /// Your initial list of material
  MyCubit() : super([{"pencil":2},{"paper":1,}]);

  /// event to remove item by index
  void remove(int index) => emit(state.remoteAt(index));
}

class ButtonList extends StatelessWidget {
    const ButtonList({ Key? key }) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return BlocProvider(
      create: (_) => MyCubit(),
      child: BlocBuilder<MyCubit, List<Map<String,double>>(
          builder: (context, state) => state.asMap().entries.map((entry) {
             int idx = entry.key;
             Map<String, double> val = entry.value;
             return TextButton(
               child: Text(val.keys.first ?? "missing"),
               onPressed: () => context.read<MyCubit>().remove(idx),,
               );
            }
         ).toList(),
      );
    }
  }

有状态小部件

class ButtonList extends StatefulWidget {
  const ButtonList({Key? key}) : super(key: key);

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

class _ButtonListState extends State<ButtonList> {
  final List<Map<String, double>> material = [{"pencil": 2},{"paper": 1,}];

  @override
  Widget build(BuildContext context) {
    return Column(
        children: material.asMap().entries.map((entry) {
      int idx = entry.key;
      Map<String, double> val = entry.value;
      return TextButton(
        child: Text(val.keys.first),
        onPressed: () {
          setState(() {
            material.removeAt(idx);
          });
        },
      );
    }).toList());
  }
}