在它自己的文件或类中拆分对话框

Question

我有一个初学者问题。将 Widget 分解为它自己的类非常简单。就像在无状态小部件中有一个带有按钮的 Column，它在构造函数中接受一些函数和一些字符串。然后我可以在我的应用程序的任何屏幕和小部件中包含和使用它。

但是如何通过对话框来实现呢？如果我设计一个对话框，我希望将它放在它自己的文件中，这样我就可以导入它，然后将函数和文本传递给它。

现在我正在尝试从 flutter_picker 包中打开一个 Picker 对话框。在我的一个屏幕中，我有这个：

  void _showTimeDialog() {
    Picker(
      adapter: NumberPickerAdapter(data: <NumberPickerColumn>[
        NumberPickerColumn(begin: 0, end: 60, initValue: _minutes),
        NumberPickerColumn(begin: 0, end: 60, initValue: _seconds),
      ]),
      delimiter: <PickerDelimiter>[
        PickerDelimiter(
          child: Container(
            width: 30.0,
            alignment: Alignment.center,
            child: Text(':'),
          ),
        )
      ],
      builderHeader: (context) {
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('MINUTES'),
              Container(
                width: 30,
              ),
              Text('SECONDS'),
            ],
          ),
        );
      },
      hideHeader: false,
      confirmText: 'OK',
      diameterRatio: 1.3,
      magnification: 1.3,
      height: 100,
      squeeze: 1,
      title: Center(child: const Text('DURATION')),
      selectedTextStyle: TextStyle(color: Theme.of(context).primaryColor),
      onConfirm: (Picker picker, List<int> value) {
        onConfirmDurationPicker(picker, value);
      },
    ).showDialog(context);
  }

  void onConfirmDurationPicker(Picker picker, List<int> value) {
    setState(() {
      _minutes = picker.getSelectedValues()[0];
      _seconds = picker.getSelectedValues()[1];
    });
  }

我想要的是把它放在它自己的文件中。然后我想传递 onConfirmDurationPicker 函数（它将在不同的屏幕上改变）和一些其他值来设置这个选取器。但我不想在需要这种选择器对话框的每个屏幕中复制所有这些代码。

在自己的类/文件中破坏此类内容的洁净方式是什么？ 如果我的问题有什么不清楚的地方，请告诉我。

Answer 1

你在正确的道路上！事实上，最好的做法是将您的应用程序拆分为有意义的部分以避免样板代码。在您的情况下，只需创建一个新文件并在那里构建一个无状态小部件。这个 Stateless Widget 应该返回您的 Picker 并且可以通过它的构造函数获取参数。然后，您可以在任何地方使用 .showDialog(context) 调用您的课程！