我在下面粘贴了相关代码,但您也许可以根据我的伪解释来回答。
我使用 FutureBuilder 来构建列表视图。
- 我首先使用 init() 异步 HTTP 调用 API,并将其解析为映射以表示 json 结果的对象列表(位置)。
- 然后,该位置列表将返回到
Future<List<Location>> _listFuture
变量(这是 FutureBuilder 的未来)。
- 一旦 future“返回”或“完成”,FutureBuilder 就会启动并使用 ListView.builder/Container/ListTile 循环并构建列表。
- 在某些时候,我需要一个 onTap() 处理程序(在 ListTile 中)来更改所选列表项的背景颜色。
- 为了支持这一点,我在 Location 类(保存 JSON 响应)中有一个 backgroundColor 成员,我对所有项目默认为“#fc7303”(假设所有内容最初总是未选中的)。然后我想将 onTap() 中选择的任何内容的背景更改为“#34bdeb”。
- 我假设我可以调用 setState() ,这将触发刷新,并且新的背景颜色将在重绘时被注意到/使用。
问题是 ListView/Contrainer/ListTile 是由
Future<List<Location>>
。我可以将“tapped”索引传递给我的 ontap 处理程序,但我不相信我可以让我的 _changeBackground() 只需更新所选索引的 backgroundColor 值并调用 setState() 因为您无法直接访问/更新这样的未来(我收到错误ERROR: The operator '[]' isn't defined for the class 'Future<List<Location>>'.
)
我不确定我采取了正确的方法。在这种情况下,我想理论上我总是可以将“背景”颜色跟踪分离到一个新的单独列表中(在未来之外),并使用 onTap() 中的对齐索引以这种方式跟踪/引用它。
但是,我不确定这总是有效。将来,我可能需要实际更改将来返回的值/状态。例如,考虑一下我是否希望能够单击列表项并更新“companyName”。在这种情况下,我将直接更改未来存储的值。我想我可以从技术上将新名称发送到服务器并以这种方式完全刷新列表,但这似乎效率低下(如果他们决定“取消”而不保存更改怎么办?)。
任何帮助表示赞赏。谢谢!
这个类实际上保存了列表的相关数据
// 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();
}
用于将十六进制转换为整数颜色的辅助类(取自 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));
}
Thanks!