我有一个JSON文件，其中包含要显示在下拉列表中的数据。我该如何实施呢？我将不胜感激。我目前已将此代码硬编码到我的页面unndes状态并可以正常工作，但想从json文件中调用它。我在这里尝试了一些答案，但是没有运气。这是我遇到的错误之一：type 'List<dynamic>' is not a subtype of type 'List<String>'更改代码并移动内容只会带来更多错误。
class SearchFilters extends StatefulWidget {
@override
_SearchFiltersState createState() => _SearchFiltersState();
}
class _SearchFiltersState extends State<SearchFilters> {
var _propType = ["Free Standing", "Town House", "Apartment", "Vacant Land", "Ofiice", "Farm", "New Development"];
var _currentItemPropery = "Free Standing";
var _town = ["Rehoboth", "Windhoek", "Swakopmund", "Walvisbay", "Keetmanshoop", "Otjiwarongo"];
var _currentItemTown = "Rehoboth";
var _minPrice = ["N\$ 10.00", "N\$ 20.00", "N\$ 30.00", "N\$ 40.00", "N\$ 50.00"];
var _currentItemMinPrice = "N\$ 10.00";
var _maxPrice = ["N\$ 100.00", "N\$ 200.00", "N\$ 300.00", "N\$ 400.00", "N\$ 500.00"];
var _currentItemMaxPrice = "N\$ 100.00";
var _minBeds = ["1", "2"];
var _currentItemMinBeds = "1";
var _maxBeds = ["1", "2", "3", "4", "5"];
var _currentItemMaxBeds = "1";
var _baths = ["1", "2", "3", "4", "5"];
var _currentItemBaths = "1";
var _parking = ["1", "2", "3"];
var _currentItemParking = "1";
@override
Widget build(BuildContext context) {
return Flexible(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: <Widget>[
Container(
// height: MediaQuery.of(context).size.height,
child: Column(
children: <Widget>[
// todo =========== Property Type =====================
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Property Type",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
)),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _propType.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemPropery = newValueSelected;
});
},
value: _currentItemPropery,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
SizedBox(
height: 12.0,
),
// todo =========== Towns =====================
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Town",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _town.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemTown = newValueSelected;
});
},
value: _currentItemTown,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
SizedBox(
height: 12.0,
),
// todo =========== Min Price =====================
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Min Price",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
Container(
margin: EdgeInsets.only(right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _minPrice.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(
() {
this._currentItemMinPrice = newValueSelected;
},
);
},
value: _currentItemMinPrice,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
// isExpanded: true,
),
),
],
),
SizedBox(height: 12.0),
// todo =========== Max Price =====================
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Max Price",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
Container(
margin: EdgeInsets.only(right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _maxPrice.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(
() {
this._currentItemMaxPrice = newValueSelected;
},
);
},
value: _currentItemMaxPrice,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
// isExpanded: true,
),
),
],
),
SizedBox(height: 12.0),
// todo ================== Min Bedrooms =====================
Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 2,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Min Bedrooms",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _minBeds.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemMinBeds = newValueSelected;
});
},
value: _currentItemMinBeds,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
],
),
),
// todo ================== Max Bedrooms =====================
Container(
width: MediaQuery.of(context).size.width / 2,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Max Bedrooms",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items: _maxBeds.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemMaxBeds = newValueSelected;
});
},
value: _currentItemMaxBeds,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
],
),
),
],
),
SizedBox(height: 12.0),
// todo ================== Bathrooms =====================
Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width / 2,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Bathrooms",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items:
_baths.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemBaths = newValueSelected;
});
},
value: _currentItemBaths,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
],
),
),
// todo ================== Parking =====================
Container(
width: MediaQuery.of(context).size.width / 2,
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 24.0, right: 24.0),
alignment: Alignment.centerLeft,
child: Text(
"Car Spaces",
style: TextStyle(
color: Colors.grey,
fontSize: 18.0,
fontStyle: FontStyle.italic,
),
),
),
SizedBox(height: 12.0),
Container(
margin: EdgeInsets.only(left: 40.0, right: 40.0),
padding: EdgeInsets.only(left: 24.0, right: 24.0),
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
style: BorderStyle.solid,
color: Color(0xFFFA983A)),
borderRadius:
BorderRadius.all(Radius.circular(12.0)),
),
),
child: DropdownButton<String>(
items:
_parking.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(
dropDownStringItem,
style: TextStyle(color: Colors.black),
),
);
}).toList(),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemParking = newValueSelected;
});
},
value: _currentItemParking,
style: TextStyle(fontSize: 18),
iconSize: 40.0,
isExpanded: true,
),
),
],
),
),
],
),
SizedBox(height: 24.0),
// todo ================= Mail Button ====================
Container(
margin: EdgeInsets.only(left: 40, right: 40),
child: ButtonTheme(
minWidth: MediaQuery.of(context).size.width,
height: 50,
splashColor: Colors.white30,
child: RaisedButton(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
onPressed: () {},
padding: EdgeInsets.all(0.0),
color: Color(0xFFFA983A),
child: Text(
"SEARCH",
style: TextStyle(
color: Colors.white,
),
),
),
),
),
SizedBox(height: 24.0),
],
),
),
],
),
);
}
}```
答案 0 :(得分：2)
假设您正在如上所述解码json，则需要使用类似以下内容的
：void parseJson() async {
var decode = json.decode(theJson);
var types = decode[0]['prop_type']; // List<dynamic>
_propTypes = List<String>.from(types); // List<String>
...
setState((){});
}
（对于变量名，最好使用camelCase。）
List.from是更改列表类型的便捷方法。请记住，json的整个结构（其中值的右侧可以是bool，int，字符串，数组，对象）意味着json解码器必须在Dart中使事物动态化。
现在您的map创建items应该可以了。