Флаттер: показывать разные значки в зависимости от значения

Question

У меня есть список объектов, каждый со свойством icon, как показано здесь:

List<Map<String, String>> _categories = [
    {
      'name': 'Sports',
      'icon': 'directions_run',
    },
    {
      'name': 'Politics',
      'icon': 'gavel',
    },
    {
      'name': 'Science',
      'icon': 'wb_sunny',
    },
];

У меня есть виджет, который я использую внутри виджета 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']),
            ],
          ),
        ),
      ),
    );
  }

Answer 1

Измените 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,
    },
];

Затем вызовите 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']),
            ],
          ),
        ),
      ),
    );
  }

---

Обратите внимание, что бесполезно (даже не эффективно) использовать Map, чтобы делать то, что вы хотите. Вы должны использовать пользовательский класс:

Class Category {
  String name;
  IconData icon;

  Category(this.name, this.icon);
}

А затем замените свой List следующим:

List<Category> _categories = [
    Category('Sports', Icons.directions_run),
    Category('Politics', Icons.gavel),
    Category('Science', Icons.wb_sunny),
];

наконец-то в вашем виджете:

        children: <Widget>[
          Icon(_categories[index].icon),
          SizedBox(width: 20.0),
          Text(_categories[index].name),
        ],

Answer 2

Сохраняйте идентификатор значка из класса Icons в списке вместо хранения текста.Но если вы хотите создать отображение метки значка на идентификатор значка.