TabView 中的奇怪图像行为：图像无法缩放

Question

这是一个非常有趣的问题。基本上，我正在尝试缩小图像；它可以在普通视图中使用，但不能在 tabview 中使用，这很烦人。我尝试了多种缩放图像的方法（.frame、.scaleToFit、GeometryReader 等），但基本上图像只是拒绝缩放。为简单起见，我将在示例中仅使用 .frame。

TabView() {
        StatsUI()
          .tabItem {
            Text("Report")
            Image("Stats")
              .resizable()
              .frame(width : 50, height : 50)
        }

作为参考，这里是缩放图像的代码。

struct StatsUI : View {
  var body : some View {
    HStack {
      Spacer()
      Text("Stats")
      Image("Stats")
        .resizable()
        .frame(width : 50, height : 50)
      Spacer()
    }
  }
}

如果看起来差不多，那是因为它是。

这就是它的样子。

tabview 中的图像不会缩放。很奇怪。

感谢任何有想法的人！

Answer 1

tabItem 采用 Text 和 Image，并且应用修饰符似乎不起作用，因此您需要提供一个原生缩放到正确大小的图像。

我已经拼凑了这个 SwiftUI 视图，它将创建一个 Image，并按您指定的大小进行绘制。

你可以这样使用它：

ScaledImage(name: "Stats", size: CGSize(width: 24, height: 24))

---

struct ScaledImage: View {
    let name: String
    let size: CGSize
    
    var body: Image {
        let uiImage = resizedImage(named: self.name, for: self.size) ?? UIImage()
        
        return Image(uiImage: uiImage.withRenderingMode(.alwaysOriginal))
    }
    
    func resizedImage(named: String, for size: CGSize) -> UIImage? {
        guard let image = UIImage(named: named) else {
            return nil
        }

        let renderer = UIGraphicsImageRenderer(size: size)
        return renderer.image { (context) in
            image.draw(in: CGRect(origin: .zero, size: size))
        }
    }
}

---

演示

这是一个在 tabView 和 tabItem 中使用相同图像的演示：

struct ContentView: View {
    
    var body: some View {
        TabView() {
            ZStack {
                Color.yellow
                Image("Stats")
                    .resizable()
                    .frame(width: 200, height: 200)
            }
            .tabItem {
                ScaledImage(name: "Stats", size: CGSize(width: 26, height: 26))
                Text("Stats")
            }
        }
    }

}

---

注意：我从 NSHipster.com 开始写这篇博文