问题描述
请仔细阅读问题，这是一个MAC应用程序，在Mac OS上无法使用systemName
我正在尝试在macOS上使用swiftUI构建一个简单的应用程序，但是在显示某些图标时遇到了一些麻烦.
I'm trying to build a simple application using swiftUI on macOS, however I'm having some trouble displaying some icons.
我现在到处都读到了您需要下载SF Symbols应用程序并自己导出符号才能使用它们的方法，所以我做到了，然后将导出的符号添加到.xcassets中，现在我正在尝试创建带有图像的按钮，因此代码如下:
I have now read everywhere that you need to download the SF Symbols app and export the symbols yourself in order to use them, so I did that, then I added the exported symbol to the .xcassets and now I'm trying to create a button with an image, so here is the code:
import SwiftUI
struct ActionBar: View {
var body: some View {
HStack {
Spacer()
Button(action: {
}) {
Image("Plus")
.font(Font.system(size: 24, weight: .light))
.foregroundColor(Color.red)
Text("Test")
}
}
.frame(maxWidth: .infinity)
.padding()
.background(Color.init(red: 0.8, green: 0.8, blue: 0.8))
}
}
struct ActionBar_Previews: PreviewProvider {
static var previews: some View {
ActionBar()
}
}
我尝试了许多变体，例如:
I have tried many variations, for example:
Image(nsImage: NSImage(name: "Plus"))
，但那里的所有信息，包括苹果自己的文档只能讨论据我了解，UIImage是UIKit的一部分，UIKit是UI框架的iOS版本，有人能在macOS上使用它吗?
but all the information out there, including apples own documentation only talk about UIImage which as far as I understood is part of UIKit which is the iOS version of the UI framework, has anybody gotten this to work on macOS?
非常感谢！
资产作为Image Symbol Set导入，Xcode不会引发任何错误，因为我只是将SF Symbols应用程序生成的svg放在了资产上.
the asset was imported as a Image Symbol Set, Xcode doesn't throw any errors as I just took the svg generated by the SF Symbols app and put it directly on the assets.
我只是碰到了这个帖子，该帖子指出SVG支持是不可思议的...我曾尝试将SVG转换为PNG，但xcode不接受png作为符号集...因此，我猜这个功能简直是坏掉了吗?真烂...
Edit 2: I just run into this post which states SVG support is wonky... I tried converting the SVG into a PNG, but xcode does not accept pngs as Symbol sets... so, I guess this feature is just plain broken? which sucks...
推荐答案
这是我的解决方案，但这很像是黑客，我不知道苹果是否会批准.因此，我猜想这个答案是出于教育目的".
主要思想是修改SF Symbols应用程序导出的SVG文件，使其仅包含所选符号的一个实例而不是完整模板，并使用SVGKit框架通过NSViewRepresentable显示它对象.
The main idea is to modify the SVG file exported by the SF Symbols app so that it only contains one instance of the selected symbol instead of the full template, and to use the SVGKit framework to display it, via an NSViewRepresentable object.
在Mac上使用SF Symbols应用程序并选择要使用的符号，然后执行导出自定义符号模板".
Use the SF Symbols app on your Mac and select the symbol you want to use, then do "Export Custom Symbol Template".
在文本编辑器(例如Sublime Text或CotEditor)中打开导出的SVG文件.
Open the exported SVG file in a text editor, such as Sublime Text or CotEditor.
删除文件中除标题和"Symbols"字段外的所有内容，这些字段应仅包含要使用的符号变体.然后更改渲染的画布的大小，并正确对齐符号.
Delete everything in the file except the header and the "Symbols" field, which should only contain the symbol variation you want to use. Then change the size of the rendered canvas and also align the symbol properly.
例如，如果要使用"plus"符号的"Regular-L"版本，则最终的"plus.svg"文件应如下所示:
For example, if you want to use the "Regular-L" version of the "plus" symbol, your final "plus.svg" file should be like this:
<?xml version="1.0" encoding="UTF-8"?>
<!--Generator: Apple Native CoreSVG 123-->
<!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128">
<!--glyph: "uni10017C.medium", point size: 100.000000, font version: "Version 15.0d7e11", template writer version: "5"-->
<g id="Symbols">
<g id="Regular-L" transform="matrix(1 0 0 1 0 100)">
<path d="M 67.4316 17.3828 C 70.0684 17.3828 72.2168 15.2832 72.2168 12.7441 L 72.2168 -30.3711 L 114.062 -30.3711 C 116.65 -30.3711 118.848 -32.5684 118.848 -35.1562 C 118.848 -37.793 116.65 -39.9414 114.062 -39.9414 L 72.2168 -39.9414 L 72.2168 -83.1055 C 72.2168 -85.6445 70.0684 -87.7441 67.4316 -87.7441 C 64.8438 -87.7441 62.6953 -85.6445 62.6953 -83.1055 L 62.6953 -39.9414 L 20.8496 -39.9414 C 18.2617 -39.9414 16.0645 -37.793 16.0645 -35.1562 C 16.0645 -32.5684 18.2617 -30.3711 20.8496 -30.3711 L 62.6953 -30.3711 L 62.6953 12.7441 C 62.6953 15.2832 64.8438 17.3828 67.4316 17.3828 Z"/>
</g>
</g>
</svg>
总结:
- 保留标题
- 保留
id="Symbols"字段 - 在符号"字段中，仅保留一个类别，在我的示例中为
id="Regular-L" - 更改标题中的大小，在我的示例中为
width="128" height="128" - 通过更改变换字段的最后两个参数(在我的示例中为
transform="matrix(1 0 0 1 0 100)"(x 0和y 100))来对齐符号
- Keep the header
- Keep the
id="Symbols"field - In the Symbols field, keep only one category, in my example
id="Regular-L" - Change the size in the header, in my example
width="128" height="128" - Align the symbol by changing the last two parameters of the transform field, in my example
transform="matrix(1 0 0 1 0 100)"(x 0 and y 100)
- 关闭Xcode
- 使用Cocoapods版本安装SVGKit( https://github.com/SVGKit/SVGKit )
- 打开Cocoapods制作的.xcworkspace文件
- Close Xcode
- Install SVGKit (https://github.com/SVGKit/SVGKit) using the Cocoapods version
- Open the .xcworkspace file made by Cocoapods
将修改后的plus.svg文件添加到您的项目中(不在资产目录中，仅在项目本身中)
Add the modified plus.svg file to your project (not in the assets catalog, just in the project itself)
制作一个NSViewRepresentable结构，如下所示:
Make an NSViewRepresentable struct like this:
import SVGKit
struct IconView: NSViewRepresentable {
let name: String
func makeNSView(context: Context) -> SVGKFastImageView {
let img = SVGKImage(named: name)!
return SVGKFastImageView(svgkImage: img)!
}
func updateNSView(_ nsView: SVGKFastImageView, context: Context) {
// not implemented
}
}
使用视图
然后在ContentView中使用它(给它一个框架，使其不会填满整个窗口)，例如:
Use the view
Then use it in your ContentView (give it a frame so that it doesn't fill up the whole window), for example:
struct ContentView: View {
var body: some View {
VStack {
IconView(name: "plus")
.frame(width: 200, height: 200, alignment: .center)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
这篇关于在macOS上使用SwiftUI，如何在Button上使用自定义图片符号?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！