删除特定小部件 |颤振与河荚

Question

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

Code

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);
      },
    );
  }
}

删除特定小部件 |颤振与河荚

Delete specific widget | Flutter & Riverpod

flutter

riverpod