我在下面粘贴相关代码,但您可以根据我的伪解释来回答。
我使用 FutureBuilder 来构建一个列表视图。
- 我首先使用 init() 对 API 进行异步 HTTP 调用,并将其解析为映射为表示 json 结果的对象列表(位置)。
- 然后将该位置列表返回到
Future<List<Location>> _listFuture
变量中(这是 FutureBuilder 的未来)。 - 一旦未来“返回”或“完成”,FutureBuilder 就会启动并使用 ListView.builder/Container/ListTile 循环并构建列表。
- 在某些时候,我需要一个 onTap() 处理程序(在 ListTile 中),它可以更改所选列表项的背景颜色。
- 为了支持这一点,我在 Location 类中有一个 backgroundColor 成员(保存 JSON 响应),我默认为所有项目的“#fc7303”(假设所有项目最初都未选中)。然后我想在 onTap() 中将所选内容的背景更改为“#34bdeb”。
- 我假设我可以调用 setState() 来触发刷新,并且在重绘时会注意到/使用新的背景颜色。
问题是 ListView/Contrainer/ListTile 是由一个
Future<List<Location>>
. 我可以将“点击”索引传递给我的 ontap 处理程序,但我不相信我可以让我的 _changeBackground() 只更新所选索引的 backgroundColor 值并调用 setState() 因为你不能直接访问/更新这样的未来(我得到错误ERROR: The operator '[]' isn't defined for the class 'Future<List<Location>>'.
)
我不确定我是否采取了正确的方法。在这种情况下,我想我总是可以在理论上将“背景”颜色跟踪分离到一个新的单独列表中(在未来之外),并使用来自 onTap() 的对齐索引以这种方式跟踪/引用它。
但是,我不确定这是否总是有效。将来,我可能需要实际更改将来返回的值/状态。例如,想一想我是否希望能够单击列表项并更新“公司名称”。在这种情况下,我将直接更改未来存储的值。我想我可以在技术上将新名称发送到服务器并以这种方式完全刷新列表,但这似乎效率低下(如果他们决定“取消”而不保存更改怎么办?)。
任何帮助表示赞赏。谢谢!
这个类实际上保存了列表的相关数据
// Location
class Location {
// members
String locationID;
String locationName;
String companyName;
String backgroundColor = 'fc7303';
// constructor?
Location({this.locationID, this.locationName, this.companyName});
// factory?
factory Location.fromJson(Map<String, dynamic> json) {
return Location(
locationID: json['locationID'],
locationName: json['locationName'],
companyName: json['companyName'],
);
}
}
此类是具有“结果”(成功/错误)消息的父 json 响应。它将上面的类实例化为一个列表来跟踪实际的公司/位置记录
//jsonResponse
class jsonResponse{
String result;
String resultMsg;
List<Location> locations;
jsonResponse({this.result, this.resultMsg, this.locations});
factory jsonResponse.fromJson(Map<String, dynamic> parsedJson){
var list = parsedJson['resultSet'] as List;
List<Location> locationList = list.map((i) => Location.fromJson(i)).toList();
return jsonResponse(
result: parsedJson['result'],
resultMsg: parsedJson['resultMsg'],
locations: locationList
);
}
} // jsonResponse
这是使用上述类解析 API 数据并创建 ListView 的状态和有状态小部件
class locationsApiState extends State<locationsApiWidget> {
// list to track AJAX results
Future<List<Location>> _listFuture;
// init - set initial values
@override
void initState() {
super.initState();
// initial load
_listFuture = updateAndGetList();
}
Future<List<Location>> updateAndGetList() async {
var response = await http.get("http://XXX.XXX.XXX.XXX/api/listCompanies.php");
if (response.statusCode == 200) {
var r1 = json.decode(response.body);
jsonResponse r = new jsonResponse.fromJson(r1);
return r.locations;
} else {
throw Exception('Failed to load internet');
}
}
_changeBackground(int index){
print("in changebackground(): ${index}"); // this works!
_listFuture[index].backgroundColor = '34bdeb'; // ERROR: The operator '[]' isn't defined for the class 'Future<List<Location>>'.
}
// build() method
@override
Widget build(BuildContext context) {
return new FutureBuilder<List<Location>>(
future: _listFuture,
builder: (context, snapshot){
if (snapshot.connectionState == ConnectionState.waiting) {
return new Center(
child: new CircularProgressIndicator(),
);
} else if (snapshot.hasError) {
return new Text('Error: ${snapshot.error}');
} else {
final items = snapshot.data;
return new Scrollbar(
child: new RefreshIndicator(
child: ListView.builder(
physics: const AlwaysScrollableScrollPhysics(),
//Even if zero elements to update scroll
itemCount: items.length,
itemBuilder: (context, index) {
return
Container(
color: HexColor(items[index].backgroundColor),
child:
ListTile(
title: Text(items[index].companyName),
onTap: () {
print("Item at $index is ${items[index].companyName}");
_changeBackground(index);
} // onTap
)
);
},
),
onRefresh: () {
// implement later
return;
} // refreshList,
),
);
}// else
} // builder
); // FutureBuilder
} // build
} // locationsApiState class
class locationsApiWidget extends StatefulWidget {
@override
locationsApiState createState() => locationsApiState();
}
用于将 HEX 转换为整数颜色的辅助类(取自 stackoverflow 上的某处)
class HexColor extends Color {
static int _getColorFromHex(String hexColor) {
hexColor = hexColor.toUpperCase().replaceAll("#", "");
if (hexColor.length == 6) {
hexColor = "FF" + hexColor;
}
return int.parse(hexColor, radix: 16);
}
HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
}
谢谢!