颤振从对话框上的下拉列表(组合框)获取数据(返回值)

Question

我有一个小的Flutter web应用程序(它写得像移动应用程序，但用于web目的)。Dart文件和对话框。带有自定义对话框的Dart文件。在这个对话框中，我有三个下拉列表(有时称为组合框)。对话框外观和工作如预期。然而，我不知道如何读取/访问当前从对话框(从代码的对话框部分)下拉列表的选定值。通过点击OK按钮，我需要打开适当的页面，并根据下拉列表中选择的值填充内容。

下面是带有三个下拉列表的自定义对话框窗口代码:

"dialog.dart":

import 'package:flutter/material.dart';
class CustomDialogBox extends StatefulWidget {
final String title, descriptions, text;
const CustomDialogBox({
Key? key,
required this.title,
required this.descriptions,
required this.text,
}) : super(key: key);
@override
_CustomDialogBoxState createState() => _CustomDialogBoxState();
}
class _CustomDialogBoxState extends State<CustomDialogBox> {
@override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: contentBox(context),
);
}
contentBox(context) {
return Stack(
children: <Widget>[
Container(
padding:
const EdgeInsets.only(left: 50, top: 75, right: 50, bottom: 50),
margin: const EdgeInsets.only(top: 40),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(
height: 80,
),
Text(
widget.title,
style:
const TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
),
const SizedBox(
height: 15,
),
Text(
widget.descriptions,
style: const TextStyle(fontSize: 14),
textAlign: TextAlign.center,
),
const SizedBox(
height: 30,
),
DropdownButtonExample(listType: list1),
const SizedBox(
height: 30,
),
DropdownButtonExample(listType: list2),
const SizedBox(
height: 30,
),
DropdownButtonExample(listType: list3),
Align(
alignment: Alignment.bottomRight,
child: MaterialButton(
color: Colors.blue,
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
widget.text,
style: const TextStyle(fontSize: 18, color: Colors.white),
)),
),
],
),
),
Positioned(
left: 30,
right: 30,
top: 0,
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: 80,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(75)),
child: Image.network(
"https://images.pexels.com/photos/627678/pexels-photo-627678.jpeg?auto=compress&cs=tinysrgb&w=1600",
width: 120,
height: 120,
fit: BoxFit.fill)),
),
),
],
);
}
}
const List<String> list1 = <String>[
'One',
'Two',
'Three',
'Four',
'Five',
'Six',
'Seven',
'Eight',
'Nine',
'Ten',
'Eleven',
'Twelve'
];
const List<String> list2 = <String>[
'Black',
'Red',
'Olive',
'DarkOliveGreen',
'MediumAquamarine',
'DarkSeaGreen',
'LightSeaGreen',
'DarkCyan',
'Teal',
];
const List<String> list3 = <String>['Slow', 'Medium', 'Fast'];
class DropdownButtonExample extends StatefulWidget {
const DropdownButtonExample({super.key, required this.listType});
final List<String> listType;
@override
State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}
class _DropdownButtonExampleState extends State<DropdownButtonExample> {
String? dropdownValue;
@override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 10,
style: const TextStyle(color: Colors.blue),
underline: Container(
height: 2,
color: Colors.blue,
),
onChanged: (String? value) {
setState(() {
dropdownValue = value as String;
});
},
items: widget.listType.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
}
}

Answer 1

您可以使用回调函数作为DropdownButtonExample的参数，并将下拉菜单的值存储在顶部小部件的状态。

例如

import 'package:flutter/material.dart';
class CustomDialogBox extends StatefulWidget {
final String title, descriptions, text;
const CustomDialogBox({
Key? key,
required this.title,
required this.descriptions,
required this.text,
}) : super(key: key);
@override
_CustomDialogBoxState createState() => _CustomDialogBoxState();
}
class _CustomDialogBoxState extends State<CustomDialogBox> {
@override
Widget build(BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
elevation: 0,
backgroundColor: Colors.transparent,
child: contentBox(context),
);
}
contentBox(context) {
var dropdown1value = "";
var dropdown2value = "";
var dropdown3value = "";
return Stack(
children: <Widget>[
Container(
padding:
const EdgeInsets.only(left: 50, top: 75, right: 50, bottom: 50),
margin: const EdgeInsets.only(top: 40),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.circular(15),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const SizedBox(
height: 80,
),
Text(
widget.title,
style:
const TextStyle(fontSize: 22, fontWeight: FontWeight.w600),
),
const SizedBox(
height: 15,
),
Text(
widget.descriptions,
style: const TextStyle(fontSize: 14),
textAlign: TextAlign.center,
),
const SizedBox(
height: 30,
),
DropdownButtonExample(
onChanged: (value) {
setState(() {
dropdown1value = value;
});
},
listType: list1),
const SizedBox(
height: 30,
),
DropdownButtonExample(
onChanged: (value) {
setState(() {
dropdown2value = value;
});
},
listType: list2),
const SizedBox(
height: 30,
),
DropdownButtonExample(
onChanged: (value) {
setState(() {
dropdown3value = value;
});
},
listType: list3),
Align(
alignment: Alignment.bottomRight,
child: MaterialButton(
color: Colors.blue,
onPressed: () {
Navigator.of(context).pop();
},
child: Text(
widget.text,
style: const TextStyle(fontSize: 18, color: Colors.white),
)),
),
],
),
),
Positioned(
left: 30,
right: 30,
top: 0,
child: CircleAvatar(
backgroundColor: Colors.blue,
radius: 80,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(75)),
child: Image.network(
"https://images.pexels.com/photos/627678/pexels-photo-627678.jpeg?auto=compress&cs=tinysrgb&w=1600",
width: 120,
height: 120,
fit: BoxFit.fill)),
),
),
],
);
}
}
const List<String> list1 = <String>[
'One',
'Two',
'Three',
'Four',
'Five',
'Six',
'Seven',
'Eight',
'Nine',
'Ten',
'Eleven',
'Twelve'
];
const List<String> list2 = <String>[
'Black',
'Red',
'Olive',
'DarkOliveGreen',
'MediumAquamarine',
'DarkSeaGreen',
'LightSeaGreen',
'DarkCyan',
'Teal',
];
const List<String> list3 = <String>['Slow', 'Medium', 'Fast'];
class DropdownButtonExample extends StatefulWidget {
final Function(String) onChanged;
const DropdownButtonExample(
{Key? key, required this.listType, required this.onChanged});
final List<String> listType;
@override
State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}
class _DropdownButtonExampleState extends State<DropdownButtonExample> {
String? dropdownValue;
@override
Widget build(BuildContext context) {
return DropdownButton<String>(
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 10,
style: const TextStyle(color: Colors.blue),
underline: Container(
height: 2,
color: Colors.blue,
),
onChanged: (String? value) {
widget.onChanged(value ?? "");
},
items: widget.listType.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
}
}