最近,我能够通过使用Flutter_Icons/Flutter_Icons.dart 在Flutter中动态加载材料设计图标
// First Approach
Icon icon = new Icon(Icons.settings);
// Second Approach
icon = new Icon(MaterialIcons.getIconData(Model.dynamic_icon_name);
Flutter屏幕截图
这让我思考,如果我能用原生的安卓方法做一些类似的事情,比如
// Glide Theoretical Example
Glide.with(context.getApplicationContext())
.asBitmap()
.load(MaterialIcons.getIconData(Model.dynamic_icon_name))
.apply(new RequestOptions().fitCenter())
.into(iconView);
我想知道这一点会很有趣,因为我认为这可以提供一些优势,开发者不需要将这些资产与应用捆绑在一起
在Android上没有有效的本地处理方法,所以我最终采用的解决方案是让服务器托管这些图标,我可以像这样使用Glide来提供它们。
步骤1:后端设置
- 下载您选择的图标的png资源,即:来自此材质图标链接的
thumbs_up
图标 - 现在,您可以继续将图像资产解压缩到服务器的资产文件夹中,在我的情况下,这是在服务器的公用文件夹中,因为我使用的是
Laravel
后端。最后,我的图标位于路径public/material-icons/thumb_up_black.png
中,并确保保持一致的命名约定public/material-icons/{icon_name_color}.png
,这是至关重要的一点,因为我需要再次引用这些资产 - 现在我们可以将图标与相应的项目链接起来
服务器端
...
// Creating the item
new Item::create([
'name' => 'Like-able item',
'icon' => 'thumb_up_black',
]);
...
列出项目API终点结果
[
{
"name": "Like-able item",
"icon_url": "https//server-name.fancy/thumb_up_black.png"
},
{
"name": "Like-able item #2",
"icon_url": "https//server-name.fancy/thumb_up_black.png"
},
....
]
步骤2:客户端设置(Android应用程序(
- 一旦我使用了API数据并将要显示这些项,我就可以使用
Glide
来完成这项工作
ItemModel item = new ItemModel(itemDataFromServer);
Glide.with(context.getApplicationContext())
.asBitmap()
.load(MaterialIcons.getIconData(item.icon_url))
.apply(new RequestOptions().fitCenter())
.into(iconView);
这就是我最终解决这个问题的方法,这个实现的好处是,从我们的三个客户端应用程序(Android、iOs和Web(中,我们可以使用相同的方法来相应地显示。