如何将Flutter String转换为Icon值

im9ewurl  于 2023-05-23  发布在  Flutter
关注(0)|答案(8)|浏览(234)

在Flutter中,我从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"
    }
  ]
}
xuo3flqw

xuo3flqw1#

我用材质图标解决了这个问题
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';

icon:  Icon(MdiIcons.fromString('sword'))
pgvzfuti

pgvzfuti2#

您可以根据官方Flutter文档使用Icon类常量来实现这一点。

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

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

n7taea2i

n7taea2i3#

你可以根据官方Flutter文档使用Icon类常量。(https://api.flutter.dev/flutter/material/Icons-class.html#constants)
示例:IconData(0xf518, fontFamily: 'MaterialIcons')
您还可以生成自定义图像的字体图标(生成字体)。保存ttf文件在资产.传递unicode数据(如“e90 a”)。
示例:

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

0qx6xfy64#

正如@user3705905所指出的,以及https://github.com/flutter/flutter/issues/75633中提到的,使用十六进制值或IconData.codePoint值将不再工作。为了克服这个问题,并存储图标的IconData的引用,您可以使用下面的解决方案使用Map(例如):

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键,稍后获得图标数据。

jyztefdp

jyztefdp5#

使用flutter_remote_icon

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

return RemoteIcon(icon: remoteIconData);

https://github.com/softmarshmallow/remote-ui/tree/master/flutter/packages/flutter_remote_icon
https://pub.dev/packages/flutter_remote_icon

ltskdhd1

ltskdhd16#

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

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))
}

我不能把所有的类代码都放在这里。因为这篇文章限制在30k字符。

fruv7luv

fruv7luv7#

{
  "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)
ttvkxqim

ttvkxqim8#

尝试删除此''撇号,因为图标数据不应是字符串

相关问题