如何从对话框中获取值？

Question

我正在创建一个应用，我想为用户显示一个对话框，其中包含一个用于选择值的滑块。

问题来了，我想获取用户选择并处理的那个滑块的值。

我将对话框用作有状态的小部件，除了返回我所提到的值之外，其他一切都正常。

---

小部件

class Dialog extends StatefulWidget {
  @override
  _DialogState createState() => _DialogState();

  final double val;

  Dialog({this.val,});
}

class _DialogState extends State<Dialog> {
  double value = 0;

  @override
  void initState() {
    super.initState();
    value = widget.val;
  }
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Slider(
        value: value,
        min: 0,
        max: 100,
        onChanged: (va) {
          setState(() {
            value = va;
          });
        },
      ),
    );
  }
}

显示对话框代码

double vale = 0;

-------

() async {
            await showDialog(
              context: context,
              builder: (context) => Dialog(
                val: vale,
              ),
            );
          }

Answer 1

缺少的是关闭对话框时需要返回值，如下所示：

return AlertDialog(
  title: Slider(
    value: value,
    min: 0,
    max: 100,
    onChanged: (va) {
      setState(() {
        value = va;
      });
    },
  ),
  actions: [
    ElevatedButton(
        onPressed: () => Navigator.pop(context),
        child: Text('cancel')),
    ElevatedButton(
        onPressed: () => Navigator.pop(context, value),
        child: Text('confirm')),
  ],
);

然后它会被 showDialog 函数按预期作为 Future 返回

Answer 2

您可以像这样访问和使用来自对话框选项的值：

showDialog(
  context: context,
  builder: (context) => Dialog(
    val: vale,
  ),
).then((valueFromDialog){
  // use the value as you wish
  print(valueFromDialog);
});

用户在对话框中选择一个选项后，.then()将被触发。