Flutter 基于地图显示iconButton
Flutter show iconButton based on Map
我有一张这样的地图:
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,每个
社交与每个人相关,点击重定向到 link?,如何?
我这样试过:
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 图标。
ListView 是一个小部件,代表 a list of widgets arranged linearly。
这个小部件有多个构造函数。你用的ListView.builder()
是在需要显示的children比较多的时候建议的。 (在您的示例中,如果地图包含许多玩家。)
默认构造函数只需要一个 List<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);
有关这些方法的更多信息,请查看 this and this。
- 通过 itemCount 参数提供您的列表视图将具有的元素数:
[...]
ListView.builder(
itemCount: listUsers.length,
itemBuilder: (context, index) {
[...]
- 您的错误表明构建器函数需要接收另一个整数参数:
'Widget Function(BuildContext)' can't be assigned to the parameter type
'Widget Function(BuildContext, int)```.
这个整数参数表示它将成为列表中的哪个小部件。您的构建器函数 只需要 return 一个小部件 ,并且它接收索引参数,因此您可以知道它是哪一个:
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
})
])
}
)
],
),
这应该足以获得您想要的结果。作为建议,您可以阅读 official documentation which has many good examples and explanations. The Dart Language tour 也是有关该语言示例的好地方。它们都写得很好,在这种情况下会让你走上正轨。
我有一张这样的地图:
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,每个 社交与每个人相关,点击重定向到 link?,如何?
我这样试过:
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 图标。
ListView 是一个小部件,代表 a list of widgets arranged linearly。
这个小部件有多个构造函数。你用的ListView.builder()
是在需要显示的children比较多的时候建议的。 (在您的示例中,如果地图包含许多玩家。)
默认构造函数只需要一个 List<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);
有关这些方法的更多信息,请查看 this and this。
- 通过 itemCount 参数提供您的列表视图将具有的元素数:
[...]
ListView.builder(
itemCount: listUsers.length,
itemBuilder: (context, index) {
[...]
- 您的错误表明构建器函数需要接收另一个整数参数:
'Widget Function(BuildContext)' can't be assigned to the parameter type
'Widget Function(BuildContext, int)```.
这个整数参数表示它将成为列表中的哪个小部件。您的构建器函数 只需要 return 一个小部件 ,并且它接收索引参数,因此您可以知道它是哪一个:
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
})
])
}
)
],
),
这应该足以获得您想要的结果。作为建议,您可以阅读 official documentation which has many good examples and explanations. The Dart Language tour 也是有关该语言示例的好地方。它们都写得很好,在这种情况下会让你走上正轨。