Flutter:根据值显示不同的图标

Gar*_*ett 4 dart flutter

我有一个对象列表,每个对象都有一个图标属性,如下所示:

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)

  • 简短回答:“Map”旨在管理键/值对数据的集合。它有点类似于“列表”,但不是通过索引访问数据,而是通过键(可以是您想要的任何类型)访问它。因此,在您的情况下,您有一个 List,其中包含 3 个集合,每个集合 1 个。如果您只有 1 个项目,则不需要集合。 (2认同)