我有一个对象列表,每个对象都有一个图标属性,如下所示:
List<Map<String, String>> _categories = [
{
'name': 'Sports',
'icon': 'directions_run',
},
{
'name': 'Politics',
'icon': 'gavel',
},
{
'name': 'Science',
'icon': 'wb_sunny',
},
];
Run Code Online (Sandbox Code Playgroud)
然后我在 ListView.builder() 小部件中使用了一个小部件。目前,我正在显示一个静态选择的图标,以与列表中的文本一起显示。我的问题是如何使用对象中的 icon 属性来动态选择为每个单独的列表项显示的图标?
Widget _buildCategoryCards(BuildContext context, int index) {
return Container(
padding: EdgeInsets.symmetric(vertical: 5.0),
child: Card(
child: Container(
padding: EdgeInsets.all(15.0),
child: Row(
children: <Widget>[
Icon(Icons.directions_run),
SizedBox(width: 20.0),
Text(_categories[index]['name']),
],
),
),
),
);
}
Run Code Online (Sandbox Code Playgroud)
Mul*_*dec 13
将您更改List
为存储一个IconData
而不是一个String
:
List<Map<String, IconData>> _categories = [
{
'name': 'Sports',
'icon': Icons.directions_run,
},
{
'name': 'Politics',
'icon': Icons.gavel,
},
{
'name': 'Science',
'icon': Icons.wb_sunny,
},
];
Run Code Online (Sandbox Code Playgroud)
然后,IconData
从您的构建方法调用:
Widget _buildCategoryCards(BuildContext context, int index) {
return Container(
padding: EdgeInsets.symmetric(vertical: 5.0),
child: Card(
child: Container(
padding: EdgeInsets.all(15.0),
child: Row(
children: <Widget>[
Icon(_categories[index]['icon']),
SizedBox(width: 20.0),
Text(_categories[index]['name']),
],
),
),
),
);
}
Run Code Online (Sandbox Code Playgroud)
请注意,使用 aMap
来做你想做的事情是没有用的(甚至没有效率)。您应该使用自定义类:
Class Category {
String name;
IconData icon;
Category(this.name, this.icon);
}
Run Code Online (Sandbox Code Playgroud)
然后List
用这个替换你的:
List<Category> _categories = [
Category('Sports', Icons.directions_run),
Category('Politics', Icons.gavel),
Category('Science', Icons.wb_sunny),
];
Run Code Online (Sandbox Code Playgroud)
最后在您的小部件中:
children: <Widget>[
Icon(_categories[index].icon),
SizedBox(width: 20.0),
Text(_categories[index].name),
],
Run Code Online (Sandbox Code Playgroud)