我是Flutter的新手。我有一个功能,可以向页面动态添加一个下拉菜单。我有一个小问题。所选值似乎未正确更改,但下拉菜单中未显示该值,我可以检索它。
(抱歉,由于此处无法上网,我无法插入屏幕截图,如果您不明白我的意思,我会再试一次)
那么如何更改和显示默认值?
这是我的代码:
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;
}
}
答案 0 :(得分:0)
您不应该使用DropdownItem
函数构建map
,因为在调用DropDownButton
时setState
会重新构建为默认状态,而不是构建分隔列表然后附加到{{1} }。
请使用此代码。
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),));
});
}