Flutter 字符串到图标值

ndh0cuux  于 2023-03-13  发布在  Flutter
关注(0)|答案(8)|浏览(151)

如何在Flutter中将字符串值转换为图标值,我从json中获取字符串形式的图标值。
当我尝试使用该值时,出现以下错误

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"
    }
  ]
}
qfe3c7zg

qfe3c7zg1#

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

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

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

r55awzrz

r55awzrz2#

您可以根据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'));
bttbmeg0

bttbmeg03#

正如@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键,然后获取图标数据。

inb24sb2

inb24sb24#

使用 Flutter _远程_图标

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

cdmah0mi

cdmah0mi5#

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

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字符。

xlpyo6sf

xlpyo6sf6#

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

ryoqjall7#

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

n9vozmp4

n9vozmp48#

我用材质图标来解决这个问题
导入“包:材料设计图标Flutter/材料设计图标Flutter. dart”;

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

相关问题