[{"data":1,"prerenderedAt":182},["ShallowReactive",2],{"page-Icon-1":3,"page-count-Icon":181},[4],{"id":5,"title":6,"body":7,"date":156,"description":13,"extension":157,"meta":158,"navigation":161,"path":173,"seo":174,"stem":175,"tags":176,"__hash__":180},"blogs\u002F_legacy\u002F2015\u002F2015-08-18-slate-icons.md","Slate中图标的使用",{"type":8,"value":9,"toc":149},"minimark",[10,14,17,20,24,27,38,41,47,50,56,59,62,68,72,75,78,81,84,90,93,99,102,113,116,119,122,125,128,131,140,143,146],[11,12,13],"p",{},"在Slate控件中，图标的使用除了直接引用图片外，还是有一些其他便利的方法的。",[11,15,16],{},"当前UE4版本4.8.3。",[11,18,19],{},"目前官方的版本已经到4.9.0了，但是由于FMod并没有更新对应版本的插件，项目无法迁移，故而依然使用4.8.3版本。",[21,22,23],"h2",{"id":23},"自带图标",[11,25,26],{},"UE4自带的图标在对SWidget进行封装时比较容易遇到。UWidget在编辑器中的显示图标使用的就是自带的图标系统。通常为对如下的函数进行覆盖实现：",[28,29,34],"pre",{"className":30,"code":32,"language":33},[31],"language-text","const FSlateBrush* UCListViewWidget::GetEditorIcon() \n{     \n  return FUMGStyle::Get().GetBrush(\"Widget.TextBlock\"); \n}\n","text",[35,36,32],"code",{"__ignoreMap":37},"",[11,39,40],{},"这些图标都是在引擎内部预定义的，通过搜索就能看到这些图标的定义。",[28,42,45],{"className":43,"code":44,"language":33},[31],"\u002F\u002F UMGStyle.cpp  \n\nStyle->Set(\"Widget.NativeWidgetHost\", new IMAGE_BRUSH(TEXT(\"NativeWidgetHost\"), Icon16x16));\n",[35,46,44],{"__ignoreMap":37},[11,48,49],{},"其中IMAGE_BRUSH是同一个文件中定义的宏",[28,51,54],{"className":52,"code":53,"language":33},[31],"#define IMAGE_BRUSH( RelativePath, ... ) FSlateImageBrush( Style->RootToContentDir( RelativePath, TEXT(\".png\") ), __VA_ARGS__ )\n",[35,55,53],{"__ignoreMap":37},[11,57,58],{},"ICON16x16也同样是宏定义，再次就不赘述了。",[11,60,61],{},"自带图标也可以直接在控件中进行使用",[28,63,66],{"className":64,"code":65,"language":33},[31],"const FSlateBrush *m_Icon = FUMGStyle::Get().GetBrush(\"Palette.Icon\");\n \nreturn SNew(STableRow\u003C FFileListItemPtr >, OwnerTable)\n[\nSNew(SHorizontalBox)\n    + SHorizontalBox::Slot()\n    .HAlign(HAlign_Left)\n    .AutoWidth()\n    [\n        SNew(SImage)\n        .Image(m_Icon)\n    ]\n    + SHorizontalBox::Slot()\n    .HAlign(HAlign_Left)\n    [\n        SNew(STextBlock)\n        .Text(FText::FromString(Item->GetDisplayName()))\n        .Font(FSlateFontInfo(FPaths::EngineContentDir() \u002F TEXT(\"Slate\u002FFonts\u002FRoboto-Bold.ttf\"), 12))\n    ]\n];\n",[35,67,65],{"__ignoreMap":37},[21,69,71],{"id":70},"icon-font","Icon Font",[11,73,74],{},"Icon Font添加图标确实非常的方便，UE4编辑器中也有使用到Font Awesome作为图标显示。",[11,76,77],{},"由于Font Awesome比较有名，项目中使用的也是它。",[11,79,80],{},"C++中的使用",[11,82,83],{},"要在C++中使用Font Awesome，首先要对UFont对象进行生成。",[28,85,88],{"className":86,"code":87,"language":33},[31],"FontAwesome = Cast\u003CUFont>(StaticLoadObject(UFont::StaticClass(), NULL, TEXT(\"Font'\u002FGame\u002FResource\u002FFont\u002Ffontawesome-webfont.fontawesome-webfont'\")));\n",[35,89,87],{"__ignoreMap":37},[11,91,92],{},"其中Font部分为直接对导入的字体进行引用复制所得。接下来只要使用STextBlock来使用相应的图标就可以了",[28,94,97],{"className":95,"code":96,"language":33},[31],"return SNew(STableRow\u003C FFileListItemPtr >, OwnerTable)\n    [\n        SNew(SHorizontalBox)\n        + SHorizontalBox::Slot()\n        .HAlign(HAlign_Left)\n        .AutoWidth()\n        .Padding(FMargin(0.0f, 3.0f, 1.0f, 0.0f))\n        [\n            SNew(STextBlock)\n            .Font(FSlateFontInfo(FontAwesome, 12))\n            .Text(FText::FromString(FString(Item->IsDirectory ? TEXT(\"\\xf07b\" \u002F*fa-folder*\u002F) : TEXT(\"\\xf15b\" \u002F*fa-file*\u002F))))\n        ]\n        + SHorizontalBox::Slot()\n        .HAlign(HAlign_Left)\n        .Padding(FMargin(3.0f, 3.0f, 0.0f, 0.0f))\n        [\n            SNew(STextBlock)\n            .Text(FText::FromString(Item->GetDisplayName()))\n            .Font(FSlateFontInfo(FPaths::EngineContentDir() \u002F TEXT(\"Slate\u002FFonts\u002FRoboto-Bold.ttf\"), 12))\n        ]\n \n    ];\n",[35,98,96],{"__ignoreMap":37},[11,100,101],{},"如果要在蓝图中进行使用的话，需要首先将字体的使用制定为对应的Icon Font。",[11,103,104,105,112],{},"通常Icon Font在提供的时候都会有每一个图标对应的Unicode编码，Font Awesome的编码集在[",[106,107,111],"a",{"href":108,"rel":109},"https:\u002F\u002Ffortawesome.github.io\u002FFont-Awesome\u002Fcheatsheet\u002F",[110],"nofollow","这里","]。",[11,114,115],{},"Font Awesome的编码集页面是可以直接复制对应的字符的，但是也有只提供了编码集的情况出现。",[11,117,118],{},"只要有编码集就可以对Icon进行使用了，要输入对应的Unicode码有很多种方式，这里提供两种。",[11,120,121],{},"Win+R输入并运行charmap，在其中选择对应的图标并复制其Unicode码。",[11,123,124],{},"在Word中输入对应的Unicode码，选中这些值按Alt+X就可以实现转换。",[11,126,127],{},"由于UE4编辑器中使用的字体并非对应的Icon Font，所以会以乱码显示，不过并不影响实际使用。",[21,129,130],{"id":130},"排版",[11,132,133,134,139],{},"使用到图标的时候有时需要对布局进行控制，布局的具体操作可以参看官方的",[106,135,138],{"href":136,"rel":137},"https:\u002F\u002Fdocs.unrealengine.com\u002Flatest\u002FCHN\u002FProgramming\u002FSlate\u002FWidgets\u002Findex.html",[110],"Slate控件文档","。",[11,141,142],{},"其中需要注意的是，Padding布局使用的是数据结构FMargin。作用参看FMargin本身的构造函数定义即可，只是Padding参数本身对FMargin进行了封装，光看官方的例子会有一定的迷惑性。",[11,144,145],{},"对于FMargin，当参数为4个时分别对应Left, Top, Right, Bottom；为2个时对应Horizontal和Vertical；为1个时则对应所有方向。",[11,147,148],{},"另外要注意的是在列表中AutoWidth必须手动指定，并不像文档中所描述的一样是默认启动的。",{"title":37,"searchDepth":150,"depth":151,"links":152},2,3,[153,154,155],{"id":23,"depth":150,"text":23},{"id":70,"depth":150,"text":71},{"id":130,"depth":150,"text":130},"2015-08-18","md",{"layout":159,"status":160,"published":161,"author":162,"author_login":163,"author_email":164,"author_url":165,"wordpress_id":166,"wordpress_url":167,"date_gmt":168,"excerpt":169},"post","publish",true,{"display_name":163,"login":163,"email":164,"url":165},"chaoshikari","chaoshikari@gmail.com","\u002F",1524,"\u002F\u002F?p=1524","2015-08-18 04:53:15 +0000",{"type":8,"value":170},[171],[11,172,13],{},"\u002F2015-08-18-slate-icons",{"title":6,"description":13},"_legacy\u002F2015\u002F2015-08-18-slate-icons",[177,178,179],"UE4","Slate","Icon","A8mfQicx3BCg5ItNQMw-s9Z2yH3w34f1SwIYUghvJeE",1,1788763180537]