如何解决Flutter:将自定义对话框创建为StatefulWidget吗?
我正在开发一个仅会从用户那里获得2次输入的应用程序,将来可能会有3次输入。因此,我将showDialog与2个inputfield和2个按钮一起使用。非常简单。看起来很像这样: enter image description here 如果将其作为函数调用,它将在主屏幕上完美显示。但是我想在应用程序的另一个屏幕中使用相同的对话框,并只更改其中一个按钮上的文本。由于对话框代码很长,我不想重复它,所以我想将其放在新的StatefulWidget中(以从输入字段中检索信息,然后清除它们)。现在的问题是我找不到从外部窗口小部件返回对话框的方法。我不知道是否由于整个异步窗口小部件不兼容而实际上是不可能的,或者我也是弄清楚这一点很愚蠢。
这是我的对话框的代码(作为函数):
_dialog() async {
await showDialog<String>(
context: context,child: ButtonBarTheme(
data: ButtonBarThemeData(alignment: MainAxisAlignment.center),child: AlertDialog(
contentPadding: const EdgeInsets.all(20.0),content: Column(
mainAxisSize: MainAxisSize.min,children: [
Container(
padding: EdgeInsets.only(bottom: 15),child: new TextField(
// onSubmitted: next,autofocus: true,controller: _title,decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 2),labelText: 'Title',hintText: 'Example: New Smartphone',),TextField(
autofocus: true,controller: _codigo,decoration: InputDecoration(
contentPadding: EdgeInsets.zero,labelText: 'Code',hintText: 'Example: EC20008347607',],actions: [
Row(
children: [
Container(
padding: EdgeInsets.only(right: 35,bottom: 5),child: FlatButton(
color: Colors.cyan[600],child: const Text('CANCEL'),onPressed: () {
Navigator.pop(context);
}),Container(
padding: EdgeInsets.only(left: 15,child: FlatButton(
color: Colors.cyan[600],child: const Text('ADD'),onPressed: () {
setState(() {
_title.text = '';
_code.text = '';
});
Navigator.pop(context);
},);
}
在此先感谢您的帮助。我是初学者。
解决方法
您可以将其放入另一个可以接收任何非静态属性值的dart文件中,例如:
CustomAlertDialog({String leftButtonText,String rightButtonText}) async {
return AlertDialog(
contentPadding: const EdgeInsets.all(20.0),content: Column(
mainAxisSize: MainAxisSize.min,children: [
Container(
padding: EdgeInsets.only(bottom: 15),child: new TextField(
// onSubmitted: next,autofocus: true,controller: _title,decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 2),labelText: 'Title',hintText: 'Example: New Smartphone',),TextField(
autofocus: true,controller: _codigo,decoration: InputDecoration(
contentPadding: EdgeInsets.zero,labelText: 'Code',hintText: 'Example: EC20008347607',],actions: [
Row(
children: [
Container(
padding: EdgeInsets.only(right: 35,bottom: 5),child: FlatButton(
color: Colors.cyan[600],child: const Text('$leftButtonText'),onPressed: () {
Navigator.pop(context);
}),Container(
padding: EdgeInsets.only(left: 15,child: FlatButton(
color: Colors.cyan[600],child: const Text('$rightButtonText'),onPressed: () {
setState(() {
_title.text = '';
_code.text = '';
});
Navigator.pop(context);
},);
}
,
我没有找到解决方案,但终于找到了解决方法。 由于对话框是由按钮触发的,因此我创建了一个无状态小部件按钮,该按钮接收一个布尔值和一个整数作为图标大小。我添加了图标大小,因为该小部件有两种用途:appBar和Floating Action Button,并且每种情况下图标大小都不同。通过图标的大小,我可以在Floating Action Button中创建一个较大的按钮,并为appBar创建一个较小的按钮。我必须在浮动按钮中加大它的大小,因为浮动按钮的边缘不会触发对话框,这将是此实现的唯一缺点。 无论如何,这是代码:
class CustomDialog extends StatelessWidget {
final bool edit;
final double iconSize;
CustomDialog({this.edit,this.iconSize});
final _title = TextEditingController();
final _code = TextEditingController();
void _resetFields() {
_title.text = '';
_code.text = '';
}
// void _addCode(context) {}
// void _editCode() {}
void _displayDialog(context) async {
await showDialog<String>(
context: context,builder: (BuildContext context) {
return AlertDialog(
titlePadding: EdgeInsets.only(top: 25),shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(18.0),contentPadding: EdgeInsets.all(25),title: edit
? Text(
'EDIT CODE',style: TextStyle(
color: Colors.cyan[600],fontSize: 20,textAlign: TextAlign.center,)
: Text(
'NEW CODE',content: Column(
mainAxisSize: MainAxisSize.min,children: [
Container(
padding: EdgeInsets.only(
bottom: 30,top: 0,child: new TextField(
// onSubmitted: next,decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 5),hintText: 'Eg: My code',Container(
// padding: EdgeInsets.only(bottom: 10),child: TextField(
autofocus: true,controller: _code,decoration: InputDecoration(
contentPadding: EdgeInsets.zero,hintText: 'Eg: EC20008347607',actions: [
Row(
children: [
Container(
padding: EdgeInsets.only(right: 60,bottom: 7),child: const Text('CANCEL'),onPressed: () {
_resetFields();
Navigator.pop(context);
},Container(
padding: EdgeInsets.only(right: 19,child:
edit ? const Text('SAVE') : const Text('ADD'),onPressed: edit
? () => _editCode()
: () => _addCode(context),);
},);
}
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => _displayDialog(context),child: Icon(
edit ? Icons.edit : Icons.add,size: iconSize,);
}
}
我使用了社区共享的其他代码对样式进行了一些改进。但是仍有改进的空间。
非常感谢您。
亲切的问候。 ?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。