0

我有一张这样的地图:

static const Map<String, Map<String, String>> social = {
    'personA': {
      'twitch': 'https://www.twitch.tv/...',
      'instagram': 'https://www.instagram.com/.../'
    },
    'personB': {
      'twitch': 'https://www.twitch.tv/...',
      'instagram': 'https://www.instagram.com/.../'
    },
    'personC': {
      'facebook': 'https://www.facebook.com/...',
    },
  };

可以为与每个人相关的每个社交显示带有 font_awesome 图标的 iconButton,并在单击时重定向到链接?,如何?

我试过这样:

Row(
              children: <Widget>[
                ListView.builder(
                    itemBuilder: (_) {
                      return Constants.social[person].keys.map((e) =>
                          IconButton(icon: FaIcon(FontAwesomeIcons.e), onPressed: {
                            print("example");
                          });
                      );
                    }
                )
              ],
            ),

但我收到错误:

The argument type 'Widget Function(BuildContext)' can't be assigned to the parameter type 'Widget Function(BuildContext, int)'

变量 person 可以包含 personA、personB 或 personC。

例如,对于 personA,我想显示 2 个 iconButton,一个用于 twitch,一个用于 instagram,但对于 personC,我只想显示 facebook 图标。

4

1 回答 1

0

ListView 是一个小部件,表示线性排列的小部件列表

这个小部件有多个构造函数。您使用的那个,ListView.builder()是当有大量孩子要显示时建议的那个。(在您的示例中,如果地图包含许多玩家。)

默认构造函数只需要 aList<Widget>并且要简单得多。如果你没有大地图,我强烈建议你改用这张。但是由于您尝试使用builder它,因此您应该执行以下操作:

  • 首先,将您的数据排列在一个列表中。这样,您可以轻松地通过整数索引访问元素:List[0]. 理想情况下,您应该已经将数据以列表形式存在,但如果需要,您可以像这样转换它:
static const Map<String, Map<String, String>> social = {
    'personA': {
      'twitch': 'https://www.twitch.tv/...',
      'instagram': 'https://www.instagram.com/.../'
    },
    'personB': {
      'twitch': 'https://www.twitch.tv/...',
      'instagram': 'https://www.instagram.com/.../'
    },
    'personC': {
      'facebook': 'https://www.facebook.com/...',
    },
  };

List<Map<String,String>> listUsers = List().from(social.values);

有关这些方法的更多信息,请查看thisthis

[...]
ListView.builder(
                    itemCount: listUsers.length,
                    itemBuilder: (context, index) {
[...]
  • 您的错误表明构建器函数需要接收另一个整数参数:

'Widget Function(BuildContext)' 不能分配给参数类型

'小部件函数(BuildContext,int)```。

这个整数参数表示它将是列表中的哪个小部件。您的 builder 函数只需要返回一个 widget,它会接收 index 参数,因此您可以知道它是哪一个:

Row(
              children: <Widget>[
                ListView.builder(
                    itemCount: listUsers.length,
                    itemBuilder: (context, index) {
                      return Column(children:[
                            if (listUsers[index].containsKey('twitch'))
                                IconButton(icon: FaIcon(FontAwesomeIcons.twitch), onPressed: (){//Access listUsers[index]['twitch'] here
                                }),
                            if (listUsers[index].containsKey('instagram'))
                                IconButton(icon: FaIcon(FontAwesomeIcons.instagram), onPressed: (){//Access listUsers[index]['instagram'] here
                                })
                       ])
                    }
                )
              ],
            ),

这应该足以获得您想要的结果。作为建议,您可以阅读官方文档,其中有很多很好的示例和解释。Dart 语言之旅也是了解该语言示例的好地方。它们都写得很好,在这种情况下会让你走上正轨。

于 2021-06-15T19:00:54.560 回答