调用异步方法后循环映射类型答案

【问题标题】：Loop a Map Type after call an async method调用异步方法后循环映射类型
【发布时间】：2022-12-05 06:42:22
【问题描述】：

我在一个类中有这个方法


Map<String, String> value = {};
bool isReady = false;


void getData() async {
    try {
        Map<String, String> data = await CustomerData().getService(selectedService);
        isReady = true;
        setState(() {
            value = data;
        });
    } catch (e) {
        print(e);
    }
}

我想在一个小部件中循环结果：

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Customer'),
        ),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
                value.forEach((key, value) { 
                    Text('$key: $value'),
                 })  
            ],
        ),
    );
}

我找到的唯一解决方案是这个，但我不喜欢它

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Customer'),
        ),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
                Text(isReady ? 'Service: value["deliver"]' : '?'),
                Text(isReady ? 'Status: value["status"]' : '?'),
                Text(isReady ? 'Note: value["note"]' : '?'),
            ],
        ),
    );
}

是否可能循环来自 Widget 内异步方法的 Map 类型？

【问题讨论】：

标签： flutter dart asynchronous async-await widget

【解决方案1】：

要循环访问小部件中的地图，您可以使用 ListView.builder 小部件。 ListView.builder 小部件允许您按需构建项目列表。当您事先不知道列表中的项目数，或者当您的列表非常大时，这很有用。

要使用 ListView.builder 小部件，您需要提供一个构建器函数，该函数可为地图中的每个项目返回一个小部件。在 builder 函数中，您可以使用 index 参数访问 Map 中每个项目的键和值。下面是一个示例，说明如何使用 ListView.builder 小部件循环访问地图：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Customer'),
    ),
    body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        // Use a ListView.builder widget to loop through the Map
        ListView.builder(
          // The number of items in the list is the number of items in the Map
          itemCount: value.length,
          // The builder function returns a widget for each item in the Map
          itemBuilder: (context, index) {
            // Access the key and value of each item in the Map using the index
            var key = value.keys.elementAt(index);
            var val = value.values.elementAt(index);
            // Return a Text widget with the key and value of the Map item
            return Text('$key: $val');
          },
        ),
      ],
    ),
  );
}

请注意，在尝试在构建方法中访问其项目之前，您需要确保已初始化 Map。您可以使用您在代码中定义的 isReady 变量来执行此操作。您可以通过检查 isReady 变量是否为真来检查地图是否准备就绪。如果地图还没有准备好，你

【讨论】：

【解决方案2】：

利用未来建造者得到未来然后列表视图生成器.

【讨论】：