在SwiftUI TabView中图像无法调整大小

Question

我正在尝试在SwiftUI TabView中使用自定义图标。我看不到这段代码有什么问题–我在图像中加入了resizable，但它并没有缩小。

HomeView()
          .tag(0)
          .tabItem {
            VStack {
              Image("tab-home")
                .resizable()
                .aspectRatio(CGSize(width: 20, height: 20), contentMode: .fit)
              Text("Home")
            }

          }

当我查看此图像时，图像已放大。

当Image是SF符号时，它可以正常工作。

有什么想法，SwiftUI忍者吗？

Answer 1

如果您可以接受系统为您选择图像尺寸，则可以实际添加自定义Symbol Image Set来实现。您可以使用任何矢量图标作为基础。

导出现有符号

要获取所需的符号模板，您可以打开SF Symbols app，选择一个图标并将其导出。

在草图中编辑

在Sketch（或您选择的其他工具）中打开。注意，这里定义了一个不同的结构。我们需要遵循这种结构。 在中间，有一个名为“ Regular-M”的大小，定义此大小就可以满足我们的目的。打开“形状”组，然后在其中放置路径元素。

您可以删除其他尺寸。然后，使整个页面可导出并导出为SVG。

以Xcode导入

在XCAsset文件中，添加一个新的Symbol Image Set并将新创建的SVG文件拖放到该文件中。

现在，您可以按照期望的那样，使用在XCAsset文件中定义的名称来简单地引用该图像。图像会自动调整大小并正确使用强调色：

TabView {
    Text("Hello, world 1").tabItem {
        Image("your.image.name")
        Text("title1")
    }
}

Answer 2

在UIKit中也是如此，解决方案是为图像使用正确的大小；

https://stackoverflow.com/a/29874619/3393964