ios - TabView 中的奇怪图像行为 : Image Fails To Scale

Question

这是一个非常有趣的问题。基本上，我试图缩小图像；它在普通 View 中工作，但在 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 ，并且应用修饰符似乎不起作用，因此您需要提供 native 缩放到正确大小的图像。
我拼凑了这个 SwiftUI View ，它将创建一个 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 的这篇博客条目开始