我在下面粘贴了相关代码，但是您可以根据我的伪解释来回答它。
我正在使用FutureBuilder构建列表视图。
Future<List<Location>> _listFuture变量中（这是FutureBuilder的未来）。 问题是ListView / Contrainer / ListTile由
驱动Future<List<Location>>
。我可以将“点击的”索引传递给我的ontap处理程序，但是我不相信我可以让_changeBackground（）仅更新所选索引的backgroundColor值并调用setState（），因为您不能像这样直接访问/更新未来（我收到错误ERROR: The operator '[]' isn't defined for the class 'Future<List<Location>>'.）
我不确定我采用正确的方法。在这种情况下，我想我从理论上总是可以将“背景”颜色跟踪分离到一个新的单独的List（将来的列表）中，并使用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();
}
helper类（从stackoverflow上的某个地方获取），用于将HEX转换为整数颜色
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));
}
谢谢！
答案 0 :(得分：0)
我建议您从位置类别中删除背景色，而是在您所在的州存储选择了哪些位置。这样，选择项目时无需更改位置列表。我还将为您的位置项创建一个StatelessWidget，该状态项将设置背景色，具体取决于是否选择了背景色。所以：
// for the LocationItem widget callback
typedef void tapLocation(int index);
class locationsApiState extends State<locationsApiWidget> {
// list to track AJAX results
Future<List<Location>> _listFuture;
final var selectedLocationIndices = Set<int>();
// 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');
}
}
void _toggleLocation(int index) {
if (selectedLocationIndices.contains(index))
selectedLocationIndices.remove(index);
else
selectedLocationIndices.add(index);
}
// 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 LocationItem(
isSelected: selectedLocationIndices.contains(index),
onTap: () => setState({
_toggleLocation(index);
})
);
},
),
onRefresh: () {
// implement later
return;
} // refreshList,
),
);
}// else
} // builder
); // FutureBuilder
} // build
} // locationsApiState class
class locationsApiWidget extends StatefulWidget {
@override
locationsApiState createState() => locationsApiState();
}
以及“项目”列表条目：
class LocationItem extends StatelessWidget {
final bool isSelected;
final Function tapLocation;
const LocationItem({@required this.isSelected, @required this.tapLocation, Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: isSelected ? HexColor('34bdeb') : HexColor('fc7303'),
child: ListTile(
title: Text(items[index].companyName),
onTap: () => tapLocation() // onTap
)
);
}
}
请原谅，我无法编译它，所以我希望它是正确的。但我认为您有个主意：让Stateful小部件单独跟踪所选位置，然后让该位置决定重建时如何呈现自己。
答案 1 :(得分：0)
您可能必须使用ListviewBuilder而不是FutureBuilder。我有一个类似的问题，我必须从Firestore加载数据，对其进行处理，然后才将其发送到ListView，所以我无法使用FutureBuilder。我本质上循环了QuerySnapShot，在每个文档中进行了适当的更改，然后将其添加到List对象（List chatUsersList = List（）;）：
String seenText = "";
chatSnapShot.forEach((doc) {
if (doc.seen) {
seenText = "not seen yet";
} else {
seenText = "seen " + doc.seenDate;
}
...
chatUsersList.add(Users(id, avatar, ..., seenText));
}
然后在ListViewBuilder中：
ListView.builder(
itemBuilder: (context, index) {
return
UserTile(uid, chatUsersList[index].peerId,
chatUsersList[index].avatar,..., chatUsersList[index].seenText);
},
itemCount: chatUsersList.length, ),
然后在UserTile中：
class UserTile extends StatelessWidget {
final String uid;
final String avatar;
...
final String seenText;
ContactTile(this.uid, this.avatar, ..., this.seenText);
@override
Widget build(BuildContext context) {
var clr = Colors.blueGrey;
if (seenText == "not seen yet") clr = Colors.red;
...
return
ListTile(
isThreeLine: true,
leading:
Container(
width: 60.0,
height: 60.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.cover,
image: new CachedNetworkImageProvider(avatar),
),
),
),
title: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: < Widget > [
Expanded(
child: Text(
name, style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold, ),
overflow: TextOverflow.ellipsis,
maxLines: 1
)
),
Text(
timestamp, style: TextStyle(fontSize: 14.0, ),
overflow: TextOverflow.ellipsis,
maxLines: 1
),
],
),
subtitle: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: < Widget > [
Text(sub, style: TextStyle(color: Colors.black87, fontSize: 14.0, ),
overflow: TextOverflow.ellipsis, ),
Text(**seenText**, style: TextStyle(color: **clr**, fontSize: 12.0, fontStyle: FontStyle.italic), ),
],
),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
...
});
}