ios - 图像未在 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 忍者？

标签： iosswiftui

Answer 1

如果您可以接受系统为您选择图像大小，您实际上可以添加自定义Symbol Image Set来实现这一点。您可以使用任何矢量图标作为您的基础。

导出现有符号

要获取我们需要的符号模板，您可以打开SF Symbols 应用程序，选择一个图标并将其导出。

在草图中编辑

在 Sketch（或您选择的其他工具）中打开。请注意，定义了一个独特的结构。我们需要遵循这个结构。在中间，有一个名为“Regular-M”的尺寸，定义这个尺寸就足以满足我们的目的。打开“形状”组并将路径元素放在那里。

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

在 Xcode 中导入

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

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

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