flutter - 按钮单击添加从 API 获取的下拉小部件
问题描述
Gere 是我的目标:我单击添加按钮,然后添加下拉按钮,其项目是从 API 获取的。
这是我的问题:
我选择了下拉值,但没有选择任何值。
我单击添加按钮,然后在新添加的下拉按钮上填充先前的值。
这是我的代码(完整)
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class RepeatableSection extends StatefulWidget {
@override
_RepeatableSectionState createState() => _RepeatableSectionState();
}
class _RepeatableSectionState extends State<RepeatableSection> {
List<Widget> extractedChildren = <Widget>[];
int _index = 1;
String _mySelection;
List data = List();
Future<void> fetchAPI() async {
var url = "http://webmyls.com/php/getdata.php";
Map<String, String> headers = {
'Content-type': 'application/json',
'Accept': 'application/json',
};
final response = await http.post(url, headers: headers);
final responseJson = json.decode(response.body);
if (response.statusCode == 200) {
setState(() {
data = responseJson;
});
} else {
setState(() {});
throw Exception('Failed to load internet');
}
}
@override
void initState() {
this.fetchAPI();
}
Widget build(BuildContext context) {
return Column(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: extractedChildren,
),
RaisedButton(
child: Text('Add'),
onPressed: () {
add();
},
),
],
);
}
void add() {
int keyValue = _index;
extractedChildren = List.from(extractedChildren)
..add(Column(
key: Key("$keyValue"),
children: <Widget>[
Text(keyValue.toString()),
DropdownButton(
hint: Text('Choose..'),
items: data.map((item) {
return new DropdownMenuItem(
child: new Text(item['item_name']),
value: item['id'].toString(),
);
}).toList(),
onChanged: (newVal) {
setState(() {
_mySelection = newVal;
});
},
value: _mySelection,
),
],
));
setState(() => ++_index);
}
}
解决方案
要为每个下拉按钮存储值,您必须创建一个可以存储的字符串列表。
以下代码将帮助您更多地理解。
class RepeatableSection extends StatefulWidget {
@override
_RepeatableSectionState createState() => _RepeatableSectionState();
}
class _RepeatableSectionState extends State<RepeatableSection> {
Widget extractedChildren;
int _index = 0;
List<String> _mySelection = [];
List data = List();
Future<void> fetchAPI() async {
var url = "http://webmyls.com/php/getdata.php";
Map<String, String> headers = {
'Content-type': 'application/json',
'Accept': 'application/json',
};
final response = await http.post(url, headers: headers);
final responseJson = json.decode(response.body);
print(data);
if (response.statusCode == 200) {
setState(() {
data = responseJson;
});
} else {
setState(() {});
throw Exception('Failed to load internet');
}
}
@override
void initState() {
super.initState();
this.fetchAPI();
}
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: _index > 0
? ListView.builder(
itemCount: _index,
shrinkWrap: true,
itemBuilder: (_, index) {
return Column(
key: Key("$index"),
children: <Widget>[
Text(index.toString()),
DropdownButton(
hint: Text('Choose..'),
items: data.map((item) {
return new DropdownMenuItem(
child: new Text(item['item_name']),
value: item['id'].toString(),
);
}).toList(),
onChanged: (newVal) {
setState(() {
print("object");
_mySelection[index] = newVal;
});
},
value: _mySelection[index],
),
],
);
},
)
: Container())
],
),
),
RaisedButton(
child: Text('Add'),
onPressed: () {
setState(() {
_index++;
_mySelection.add(null);
});
// add();
},
),
],
),
);
}
}
推荐阅读
- java - 为什么 File::isDirectory 可以作为 FileFilter 正常工作?
- hibernate - 如何覆盖多对多依赖的休眠查询
- json - 如何在mac上运行dotnet core的独立程序
- java - System.load('native library') 无法从浏览器处理小程序
- security - Profile参数login/password_downwards_compatibility是什么意思?
- c# - 将对象转换为类型而不进行装箱
- python - es demux 错误:尝试让我的计算机与 Python 对话时无法查看
- tomcat - 为什么 nginx 不做简单的负载均衡。Tomcat 实例。错误请求 400
- html - 动画效果从顶部获取文本并使用 css 在 div 中显示
- ios - 如何使用 EventKit 删除某些/特定事件