Question

如何在Flutter中将String值转换为Icons值，我从json作为字符串获取Icon值。

当我尝试使用该值时出现以下错误

error: The argument type 'String' can't be assigned to the parameter type 'IconData'. (argument_type_not_assignable at [hippo] lib\screens\dynamic_list.dart:71)

{
  "page": 1,
  "MenuItems": [
    {
      "id": 419701,
      "icon": "MdiIcons.account",
      "name": "account"
    },
    {
      "id": 419702,
      "icon": "MdiIcons.currencyUsd",
      "name": "Funds"
    },
    {
      "id": 419703,
      "icon": "MdiIcons.home",
      "name": "home"
    }
  ]
}

Answer 1

您可以使用 Icon 类常量来实现。

Icon(IconData(61668, fontFamily: 'MaterialIcons'));

查看更多图标类常量：https://api.flutter.dev/flutter/material/Icons-class.html#constants

Answer 2

一种方法是可以将图像生成为字体图标（Generate to font）。将ttf文件保存在资产中。将unicode数据传递给json（例如“ e90a”）。

例如：

Icon(IconData(int.parse('0x${e90a}',
    fontFamily: 'family name given in the link above'));

Answer 3

正如@user3705905 所指出的和 https://github.com/flutter/flutter/issues/75633 中提到的，使用十六进制或 IconData.codePoint 值将不再起作用。为了解决这个问题并存储图标 IconData 的引用，您可以使用以下使用地图的解决方案（例如）：

Map<String, IconData> iconsMap = {
   'add_shopping_cart': Icons.add_shopping_cart,
   'calendar_view_week_rounded': Icons.calendar_view_day_rounded,
   'call_end_outlined': Icons.call_end_outlined,
   'call_made': Icons.call_made,
};

稍后您可以简单地使用 map 键并稍后获取 Icons 数据。

Answer 4

{
  "page": 1,
  "MenuItems": [
    {
      "id": 419701,
      "icon": "0xf2dc",
      "name": "account"
    },
    {
      "id": 419702,
      "icon": "0xf2dc",
      "name": "Funds"
    },
    {
      "id": 419703,
      "icon": "0xf2dc",
      "name": "home"
    }
  ]
}

Icon(IconData(int.parse(_dynamicListMenu[index].icon),
              fontFamily:'Material Design Icons',
              fontPackage:'material_design_icons_flutter'),color: Colors.white, size: 30)

Answer 5

使用flutter_remote_icon

var remoteIconData = new RemoteIconData("material://Icons.add"); // -> native material icons remotely (dynamically)  

return RemoteIcon(icon: remoteIconData);

https://pub.dev/packages/flutter_remote_icon

Answer 6

我为此创建了一个简单的类。

import 'package:flutter/material.dart';

class HelperIcons {

  static Map<String, int> materialIcons = <String, int> {
    'ten_k': 0xe52a,
    'ten_mp': 0xe52b,
    'eleven_mp': 0xe52c,
    'twelve_mp': 0xe52d,
    'thirteen_mp': 0xe52e,
    'fourteen_mp': 0xe52f,
    'fifteen_mp': 0xe530,
    'sixteen_mp': 0xe531,
    'seventeen_mp': 0xe532,
    'eighteen_mp': 0xe533,
    'nineteen_mp': 0xe534,
    'one_k': 0xe535,
    'one_k_plus': 0xe536,
    'twenty_mp': 0xe537,
    'twenty_one_mp': 0xe538,
    'twenty_two_mp': 0xe539,
    'twenty_three_mp': 0xe53a,
    'twenty_four_mp': 0xe53b,
    'two_k': 0xe53c,
    'two_k_plus': 0xe53d,
  };

  static Map<String, int> materialIconsWithDirection = <String, int> {
    'arrow_back': 0xe5a7,
    'arrow_back_ios': 0xe5a8,
    'arrow_forward': 0xe5af,
    'arrow_forward_ios': 0xe5b0,
    'arrow_left': 0xe5b1,
    'arrow_right': 0xe5b2,
    'assignment': 0xe5b9,
    'assignment_return': 0xe5bc,
    'backspace': 0xe5d6,
    'battery_unknown': 0xe5e3,
    'call_made': 0xe627,
    'call_merge': 0xe628,
    'call_missed': 0xe629,
    'call_missed_outgoing': 0xe62a,
    'call_received': 0xe62b,
    'call_split': 0xe62c,
    'chevron_left': 0xe652,
    'chevron_right': 0xe653,
  };

  static IconData getIconData(String iconName) {
    iconName = iconName is String ? iconName.toLowerCase().trim() : null;

    if (iconName == null || iconName.isEmpty) {
      return null;
    }

    if (materialIcons.containsKey(iconName)) {
      return IconData(materialIcons[iconName], fontFamily: 'MaterialIcons');
    }

    if (materialIconsWithDirection.containsKey(iconName)) {
      return IconData(
          materialIconsWithDirection[iconName],
          fontFamily: 'MaterialIcons',
          matchTextDirection: true
      );
    }

    return null;
  }

  static bool isExistIcon(String iconName) {
    iconName = iconName is String ? iconName.toLowerCase().trim() : null;

    if (iconName == null || iconName.isEmpty) {
      return false;
    }

    if (materialIcons.containsKey(iconName) || materialIconsWithDirection.containsKey(iconName)) {
      return true;
    }

    return false;
  }
}

用法：

if (HelperIcons.isExistIcon(iconString)) {
  Icon(HelperIcons.getIconData(iconString))
}

我不能在这里放置所有的类代码。因为该帖子的字符数限制为3万。

颤动字符串到图标值

6 个答案: