圖像未在 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 應用程序select 一個圖標並將其導出。

在草圖中編輯

在 Sketch（或您選擇的其他工具）中打開。 請注意，定義了一個獨特的結構。 我們需要遵循這個結構。 在中間，有一個名為“Regular-M”的尺寸，定義這個尺寸就足以滿足我們的目的。 打開“形狀”組並將路徑元素放在那里。

您可以刪除其他尺寸。 然后，使整個頁面可導出並導出為 SVG。

導入 Xcode

在您的 XCAsset 文件中，添加一個新的Symbol Image Set並將新創建的 SVG 文件拖放到其中。

現在，您可以使用您在 XCAsset 文件中定義的名稱來簡單地引用圖像，正如您所期望的那樣。 圖像大小自動並正確使用重音 colors：

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

Answer 2

這在 UIKit 中是相同的，解決方案是為您的圖像使用正確的尺寸；

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