5

我在下面粘贴相关代码,但您可以根据我的伪解释来回答。

我使用 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));
}

谢谢!

4

2 回答 2

2

我建议从您的位置类中删除背景颜色,而是将选择的位置存储在您的州中。这样,您的位置列表在选择项目时不需要更改。我还将为您的位置项目创建一个 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 小部件分别跟踪选定的位置,并让位置决定在重建时如何呈现自身。

于 2019-07-29T07:19:21.197 回答
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: () {
     ...

      });

  }
于 2019-09-20T22:56:34.757 回答