Flutter 删除特定小部件|颤振&；河豚

如图所示，我正在尝试创建一个骰子列表，以便添加或删除骰子。我试过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.
    );
  }
}

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

类通知程序扩展了ChangeNotifier{
列表骰子=[]；
void add（）{
dice.add（DieWidget（））；
notifyListeners（）；
}
无效删除（内部id）{
//FIXME:无法根据id删除模具
打印（id）；
notifyListeners（）；
}
}
final diceProvider=ChangeNotifierProvider（（）{
返回通知程序（）；
});
类MyHomePage扩展了ConsumerWidget{
@凌驾
小部件构建（BuildContext上下文，ScopeDrawer监视）{
最终骰子=手表（骰子提供者）。骰子；
返回脚手架(
appBar:appBar(
标题：文本（“骰子”），
),
正文：中(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
…掷骰子，
],
),
),
浮动操作按钮：浮动操作按钮(
已按下：（）{
read（diceProvider.add（）；
},
子：图标（Icons.add），
)，//此尾随逗号使生成方法的自动格式设置更方便。
);
}
}

die_widget.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.
    );
  }
}

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

类DieWidget扩展StatefulWidget{
@凌驾
_DieWidgetState createState（）；
}
类_diewigetstate扩展状态{
int值=0；
int id=0；
@凌驾
小部件构建（构建上下文）{
返回按钮(
子：文本(
“$value”，
),
已按下：（）{
设置状态（）{
值++；
id++；
});
//read（dieProvider.increment（）；
},
onLongPress:（）{
最终骰子=context.read（骰子提供者）；
骰子移除（id）；
//打印（此值）；
},
);
}
}

一种解决方案是在

小部件

类中定义参数

值

：

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

}

并从

小部件

访问此数据：

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

因此，

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

整个示例将是：

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

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

---

这太棒了！非常感谢您的时间和帮助。我需要坐久一点，仔细研究一下这一切的逻辑。再次感谢：）