flutter - 如何在下拉按钮中绑定 API 数据并获取选定的值?
问题描述
如何在下拉按钮中绑定 API 数据并获取选定的值?
我有如下的 json 响应。
{
"success": 1,
"standard": [
{
"standard_id": "5d170c1e3ba1c",
"standard_name": "Std 10",
"active": "1"
},
{
"standard_id": "5da9f8652dfd3",
"standard_name": "Std 10 Easy Maths Course",
"active": "1"
},
{
"standard_id": "5d170c5a5609a",
"standard_name": "Std 12 Science - A ( PCM Full Course )",
"active": "1"
},
{
"standard_id": "5da9fa1fd7e60",
"standard_name": "Std 12 Science - B ( PCB Full Course ) ",
"active": "1"
},
{
"standard_id": "5ea96da290df1",
"standard_name": "Std 12 Science Chemistry Course",
"active": "1"
},
{
"standard_id": "5ea96d89c8978",
"standard_name": "Std 12 Science Maths Course",
"active": "1"
},
{
"standard_id": "5ea96db6adbc0",
"standard_name": "Std 12 Science Physics Course",
"active": "1"
},
{
"standard_id": "5d1594e283e1a",
"standard_name": "Std 2",
"active": "1"
}
]
}
如上响应,我在standard_model.dart 文件中创建了一个模型类,如下所示。
// To parse this JSON data, do
//
// final standardModel = standardModelFromJson(jsonString);
import 'dart:convert';
StandardModel standardModelFromJson(String str) => StandardModel.fromJson(json.decode(str));
String standardModelToJson(StandardModel data) => json.encode(data.toJson());
class StandardModel {
StandardModel({
this.success,
this.standard,
});
int success;
List<Standard> standard;
factory StandardModel.fromJson(Map<String, dynamic> json) => StandardModel(
success: json["success"],
standard: List<Standard>.from(json["standard"].map((x) => Standard.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"success": success,
"standard": List<dynamic>.from(standard.map((x) => x.toJson())),
};
}
class Standard {
Standard({
this.standardId,
this.standardName,
this.active,
});
String standardId;
String standardName;
String active;
factory Standard.fromJson(Map<String, dynamic> json) => Standard(
standardId: json["standard_id"],
standardName: json["standard_name"],
active: json["active"],
);
Map<String, dynamic> toJson() => {
"standard_id": standardId,
"standard_name": standardName,
"active": active,
};
}
我在 api_manager.dart 文件中创建了函数,如下所示
class ApiManager {
Future<List<Standard>> getStandards() async {
final standardUrl = "$baseUrl/standard/get";
final response = await http.get(Uri.parse(standardUrl));
if (response.statusCode == 200) {
final standardData = standardModelFromJson(response.body);
final List<Standard> standards = standardData.standard;
return standards;
} else {
return <Standard>[];
}
}
}
我有 view.dart 文件来显示下拉菜单,所以我如何在下拉按钮中设置数据并获取所选值。
view.dart 文件如下。
class View extends StatefulWidget {
const View({Key? key}) : super(key: key);
@override
_ViewState createState() => _ViewState();
}
class _ViewState extends State<View> {
var _standards = <Standard>[];
@override
void initState() {
super.initState();
ApiManager().getStandards().then((standards) {
_standards = standards;
});
}
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
child: Column(
children: [
DropdownButton(
isExpanded: true,
hint: Text('Select Standard'),
value: ,
items: ,
onChanged: , //onStandardChange,
),
],
),
);
}
}
我想在下拉列表中获取标准名称。
解决方案
没有必要使用Column
. 您应该遵循以下代码:
DropdownButton<String>(
value: dropdownValue, // create a variable named dropdownValue and set in onChange function
icon: const Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: _standards
.map<DropdownMenuItem<String>>((Standard standard) {
return DropdownMenuItem<String>(
value: standard.standardId,
child: Text(standard.standardName),
);
}).toList(),
);
另请记住,DropdownButton<String>
您可以使用DropdownButton<Standard>
. 有关更多详细信息,请参阅此。检查出来,让我知道结果。
推荐阅读
- node.js - 使用 Node js 进行网络爬取
- c - 具有可变成员长度的结构导致“分段错误 11”
- sql-server - case 表达式只显示一次
- google-app-engine - 强制 Google App Engine IP 刷新
- vba - 在 VBA 中访问 O365 组日历文件夹
- javascript - 如何使用 JavaScript 将输入从文本框获取到变量,然后打印变量的值?
- javascript - 在 Mocha 和 Chai 中测试 Promise
- chart.js - 使用 chart.js 和 moment.js 进行奇怪的时间格式化
- highcharts - 高图中样条系列的轮廓或边框
- linq - 如何将带有 switch 语句的 foreach 循环转换为 LINQ