删除特定小部件 | Flutter & Riverpod

Question

如图所示，我试图有一个骰子列表，我可以在其中添加或删除骰子。 我尝试过 StateProvider、ChangeNotifier 和 StateNotifier。 每一个似乎都没有像我期望的那样工作。 我正在尝试创建一个包含 dieWidgets 列表的提供程序，但是当我长按它时，我无法弄清楚如何删除特定的 die。 图像显示了一个删除它的弹出菜单，这是长期目标，但现在只需长按删除就可以了。 关于如何解决这个问题的想法？

代码

main.dart

class DiceNotifier extends ChangeNotifier {
  List<DieWidget> dice = [];

  void add() {
    dice.add(DieWidget());
    notifyListeners();
  }

  void removeDie(int id) {
    // FIXME: Unable to delete a die based on id
    print(id);
    notifyListeners();
  }
}

final diceProvider = ChangeNotifierProvider((_) {
  return DiceNotifier();
});

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final dice = watch(diceProvider).dice;
    return Scaffold(
      appBar: AppBar(
        title: Text("Dice"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ...dice,
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(diceProvider).add();
        },
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

die_widget.dart

class DieWidget extends StatefulWidget {
  @override
  _DieWidgetState createState() => _DieWidgetState();
}

class _DieWidgetState extends State<DieWidget> {
  int value = 0;
  int id = 0;
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text(
        '$value',
      ),
      onPressed: () {
        setState(() {
          value++;
          id++;
        });
        // context.read(dieProvider).increment();
      },
      onLongPress: () {
        final dice = context.read(diceProvider);
        dice.removeDie(id);
        // print(this.value);
      },
    );
  }
}

Answer 1

一种解决方案是在DiceWidget class 中定义一个参数value ：

class DiceWidget extends StatefulWidget {
  const DiceWidget({ Key key, this.value }) : super(key: key);
  int value;
  @override
  _DiceWidgetState createState() => _DiceWidgetState();

}

并从DiceWidget访问这些数据：

class DiceWidget extends StatefulWidget {
  @override
  _DiceWidgetState createState() => _DiceWidgetState();
}

class _DiceWidgetState extends State<DiceWidget> {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text(
        widget.value.toString() ?? '',
      ),
      onLongPress: () {
        final dice = context.read(diceProvider);
        dice.removeDice(widget.value);
        // print(widget.value);
      },
    );
  }
}

在DiceNotifier class 中，我建议将dices数组实现为List<int> ：

List<int> dices = [];

因此， addDice()和removeDice()函数将分别为：

class DiceNotifier extends ChangeNotifier {
  List<int> dices = [];

  void addDice() {
    dices.add(dices.length);
    notifyListeners();
  }

  void removeDice(int id) {
    dices.remove(id);
    print(id);
    notifyListeners();
  }
}

为了使示例工作，我们还需要修改MyHomePage Column以构建children DiceWidget ：

...dices.map((d) => DiceWidget(value: d)).toList(),

整个示例将是： main.dart ：

class DiceNotifier extends ChangeNotifier {
  List<int> dices = [];

  void addDice() {
    dices.add(dices.length);
    notifyListeners();
  }

  void removeDice(int id) {
    dices.remove(id);
    print(id);
    notifyListeners();
  }
}

final diceProvider = ChangeNotifierProvider((_) {
  return DiceNotifier();
});

class MyHomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final dices = watch(diceProvider).dices;
    return Scaffold(
      appBar: AppBar(
        title: Text("Dice"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ...dices.map((d) => DiceWidget(value: d)).toList(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read(diceProvider).addDice();
        },
        child: Icon(Icons.add),
      ), 
    );
  }
}

dice_widget.dart ：

class DiceWidget extends StatefulWidget {
  @override
  _DiceWidgetState createState() => _DiceWidgetState();
}

class _DiceWidgetState extends State<DiceWidget> {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      child: Text(
        widget.value.toString() ?? '',
      ),
      onLongPress: () {
        final dice = context.read(diceProvider);
        dice.removeDice(widget.value);
        print(widget.value);
      },
    );
  }
}