Flutter 如何从下拉菜单正确返回选定值(字符串)?
我目前正在尝试从下拉菜单中获取值,并在调用下拉小部件的地方使用它。下拉菜单使用字符串列表作为其数据,因此我只需要返回用户选择的字符串。我将把所选字符串传递到另一个下拉小部件中,供其使用。我在计算如何从下拉小部件返回所选字符串时遇到问题。感谢您的帮助 这就是我调用下拉窗口小部件的地方。第一个是我需要获取所选值的位置。我将把所选的值传递给第二个值Flutter 如何从下拉菜单正确返回选定值(字符串)?,flutter,Flutter,我目前正在尝试从下拉菜单中获取值,并在调用下拉小部件的地方使用它。下拉菜单使用字符串列表作为其数据,因此我只需要返回用户选择的字符串。我将把所选字符串传递到另一个下拉小部件中,供其使用。我在计算如何从下拉小部件返回所选字符串时遇到问题。感谢您的帮助 这就是我调用下拉窗口小部件的地方。第一个是我需要获取所选值的位置。我将把所选的值传递给第二个值 Container( child: RecurringTypeDropDown()),
Container(
child: RecurringTypeDropDown()),
SizedBox(height: 10),
Container(
child: RecurringCategoryDropdown()),
这是一个下拉小部件,我需要在其中返回它的选定值,以便将该值传递到另一个下拉小部件中
class RecurringTypeDropDown extends StatefulWidget {
@override
_RecurringTypeDropDownState createState() => _RecurringTypeDropDownState();
}
class _RecurringTypeDropDownState extends State<RecurringTypeDropDown> {
var currentSelectedValue;
final dropTypes = ["Value 1", "Value 2", "Value 3"];
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 30),
child: FormField<String>(
builder: (FormFieldState<String> state) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(10.0),
color: Colors.white
),
child: InputDecorator(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0))),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: Text("Choose an Option", style: TextStyle(color: Colors.blue, fontFamily: 'Montserrat')),
value: currentSelectedValue,
isDense: true,
onChanged: (newValue) {
setState(() {
return currentSelectedValue = newValue;
});
print(currentSelectedValue);
},
items: dropTypes.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
);
},
),
)));
}
}
class RecurringTypeDropDown扩展StatefulWidget{
@凌驾
_RecurringTypeDropDownState createState()=>\u RecurringTypeDropDownState();
}
类_RecurringTypeDropDownState扩展状态{
var currentSelectedValue;
最终dropTypes=[“值1”、“值2”、“值3”];
@凌驾
小部件构建(构建上下文){
返回容器(
儿童:中心(
子:容器(
填充:边缘组。对称(水平:30),
孩子:FormField(
生成器:(FormFieldState){
返回容器(
装饰:盒子装饰(
边框:边框。全部(颜色:颜色。白色),
边界半径:边界半径。圆形(10.0),
颜色:颜色。白色
),
子:输入装饰器(
装饰:输入装饰(
边框:大纲输入边框(
边界半径:边界半径。圆形(10.0)),
子项:DropdownButtonHideUnderline(
孩子:下拉按钮(
提示:文本(“选择一个选项”,样式:TextStyle(颜色:Colors.blue,fontFamily:“蒙特塞拉特”),
值:currentSelectedValue,
是的,
一旦更改:(newValue){
设置状态(){
返回currentSelectedValue=newValue;
});
打印(currentSelectedValue);
},
项:dropTypes.map((字符串值){
返回下拉菜单项(
价值:价值,
子项:文本(值),
);
}).toList(),
),
),
),
);
},
),
)));
}
}
您已经为这两个下拉列表创建了不同的小部件类。我认为如果它们不可重用,那么就不需要创建widget类。只需创建函数。然后,您可以简单地将RecurringTypeDropDown中的选定值添加到RecurringCategorHydropdown(然后是setState)的下拉列表中,因为您的两个函数将位于同一个类中。您已经为这两个下拉列表创建了不同的小部件类。我认为如果它们不可重用,那么就不需要创建widget类。只需创建函数。然后,您只需将RecurringTypeDropDown中的选定值添加到RecurringCategorHydropdown(然后是setState)的下拉列表中,因为这两个函数将位于同一个类中。您可以复制下面的粘贴运行完整代码您可以使用
GlobalKey
并分配给RecurringTypeDropDown(键:\u键1)
要获取值,请执行
(\u key1.currentState为\u RecurringTypeDropDownState)代码>
代码片段
class RecurringTypeDropDown extends StatefulWidget {
RecurringTypeDropDown({Key key}) : super(key: key);
...
class _MyHomePageState extends State<MyHomePage> {
GlobalKey _key1 = GlobalKey();
GlobalKey _key2 = GlobalKey();
String value1 = "";
String value2 = "";
void _incrementCounter() {
value1 = (_key1.currentState as _RecurringTypeDropDownState)
.currentSelectedValue;
value2 = (_key2.currentState as _RecurringTypeDropDownState)
.currentSelectedValue;
...
RecurringTypeDropDown(key: _key1),
SizedBox(height: 10),
RecurringTypeDropDown(key: _key2),
class RecurringTypeDropDown扩展StatefulWidget{
RecurringTypeDropDown({Key}):超级(Key:Key);
...
类_MyHomePageState扩展状态{
GlobalKey _key1=GlobalKey();
GlobalKey _key2=GlobalKey();
字符串值1=“”;
字符串值2=“”;
void _incrementCounter(){
值1=(_key1.currentState为_RecurringTypeDropDownState)
.currentSelectedValue;
值2=(_key2.currentState为_RecurringTypeDropDownState)
.currentSelectedValue;
...
重复类型下拉列表(键:_键1),
尺寸箱(高度:10),
重复类型下拉列表(键:_键2),
工作演示
完整代码
import 'package:flutter/material.dart';
class RecurringTypeDropDown extends StatefulWidget {
RecurringTypeDropDown({Key key}) : super(key: key);
@override
_RecurringTypeDropDownState createState() => _RecurringTypeDropDownState();
}
class _RecurringTypeDropDownState extends State<RecurringTypeDropDown> {
var currentSelectedValue;
final dropTypes = ["Value 1", "Value 2", "Value 3"];
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 30),
child: FormField<String>(
builder: (FormFieldState<String> state) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(10.0),
color: Colors.white),
child: InputDecorator(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0))),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: Text("Choose an Option",
style: TextStyle(
color: Colors.blue, fontFamily: 'Montserrat')),
value: currentSelectedValue,
isDense: true,
onChanged: (newValue) {
setState(() {
return currentSelectedValue = newValue;
});
print(currentSelectedValue);
},
items: dropTypes.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
),
);
},
),
)));
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey _key1 = GlobalKey();
GlobalKey _key2 = GlobalKey();
String value1 = "";
String value2 = "";
int _counter = 0;
void _incrementCounter() {
value1 = (_key1.currentState as _RecurringTypeDropDownState)
.currentSelectedValue;
value2 = (_key2.currentState as _RecurringTypeDropDownState)
.currentSelectedValue;
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RecurringTypeDropDown(key: _key1),
SizedBox(height: 10),
RecurringTypeDropDown(key: _key2),
SizedBox(height: 10),
Text("$value1"),
Text("$value2"),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
导入“包装:颤振/材料.省道”;
类RecurringTypeDropDown扩展StatefulWidget{
RecurringTypeDropDown({Key}):超级(Key:Key);
@凌驾
_RecurringTypeDropDownState createState()=>\u RecurringTypeDropDownState();
}
类_RecurringTypeDropDownState扩展状态{
var currentSelectedValue;
最终dropTypes=[“值1”、“值2”、“值3”];
@凌驾
小部件构建(构建上下文){
返回容器(
儿童:中心(
子:容器(
填充:边缘组。对称(水平:30),
孩子:FormField(
生成器:(FormFieldState){
返回容器(
装饰:盒子装饰(
边框:边框。全部(颜色:颜色。白色),
边界半径:边界半径。圆形(10.0),
颜色:颜色。白色),
子:输入装饰器(
装饰:输入装饰(
边框:大纲输入边框(
边界半径:边界半径。圆形(10.0)),
子项:DropdownButtonHideUnderline(
孩子:下拉按钮(
提示:文本(“选择选项”,
样式:TextStyle(
颜色:Colors.blue,fontFamily:“蒙特塞拉特”),
值:currentSelectedValue,
是的,
一旦更改:(newValue){
设定状态((