[英]Flutter: Selected value doesn't change in the dropdown
我是 Flutter 的新手。 我有一个 function 动态添加下拉菜单到页面。 我有一个小问题。 所选值未显示在下拉列表中,而默认值似乎已正确更改并且我可以检索它。
(抱歉这里因为网络问题无法插入截图,如果你不明白我的意思,我再试一次)
那么如何更改和显示默认值?
这是我的代码:
import 'package:flutter/material.dart';
import '../../components/my_flat_button.dart';
import 'question2.dart';
class Question1 extends StatefulWidget {
@override
Question1State createState() {
return Question1State();
}
}
class Question1State extends State<Question1> {
final _formKey = GlobalKey<FormState>();
String dropdownValue = "one";
int index = 0;
List<Widget> v = [];
@override
void initState() {
super.initState();
buildDropdown();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Builder(
builder: (context) => Scrollbar(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25.0),
child: Container(
height: MediaQuery.of(context).size.height / 1.2,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(25.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.teal[100],
),
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(height: 20),
Column(children: v),
SizedBox(height: 15),
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child:
MyFlatButton('Add more', (){
setState(() {
buildDropdown();
});
}, Colors.grey, borderColor: Colors.grey[400],),
),
],
),
SizedBox(height: 15),
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child:
MyFlatButton('Skip', (){
setState(() {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
Question2()),
);
});
}, Colors.grey, borderColor: Colors.grey[400],),
),
],
),
SizedBox(height: 40),
],
),
),
),
)
]))));
}
buildDropdown() {
if(index >= 2) return;
v.add( Container(
height: 38,
padding: EdgeInsets.only(left: 5.0, right: 5.0, top: 0, bottom: 0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.grey[100],
),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: DropdownButton<String>(
isExpanded: true,
value: dropdownValue,
icon: Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
style: TextStyle(
color: Colors.grey
),
underline: Container(
height: 0,
color: Colors.grey,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>["one", "tow", "three"]
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
})
.toList(),
),
),
],),
),
);
v.add(SizedBox(height: 10),);
index += 1;
}
}
您不应该使用map
function 构建DropdownItem
,因为DropDownButton
被重建为默认 state ,然后在调用setState
时将其附加到DropDownButton
。
请使用此代码。
var dropdownItems = []
@override
void initState(){
super.initState();
_buildDropDown();
}
_buildDropDown(){
// Changes occures here
final List<String> strings = ["one", "tow", "three"];
strings.forEach((s){
dropdownItems.add(
DropdownMenuItem<String>(
value: s,
child: Text(s),));
});
}
然后像这样使用它
DropdownButton<String>(
isExpanded: true,
item: dropdownItems,
//Other stuff here
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.