图像未在 SwiftUI TabView 中调整大小

Posted 2023-03-08

【中文标题】图像未在 SwiftUI TabView 中调整大小

【英文标题】：Image not resizing in SwiftUI TabView

【发布时间】：2019-10-18 11:33:46

【问题描述】：

我正在尝试在 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 忍者？

【参考方案1】：

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

导出现有符号

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

在草图中编辑

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

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

在 Xcode 中导入

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

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

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

【讨论】：

我一直在这样做，但是在 TabView 中使用自定义符号时，图像比它应该的要小，实际上即使我跳过编辑步骤也是这种情况（导出 SFSymbol SVG，然后直接将其作为符号资产导入 Xcode，无需编辑）。知道为什么吗？

【参考方案2】：

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

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

【讨论】：

谢谢。我以为它可能已经在 SwiftUI 中解决了，但没有。

是的，你实际上可以解决它，只需使用 .renderingMode(.original)