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

问题描述

这是一个非常有趣的问题。基本上，我正在尝试按比例缩小图像；它可以在普通视图中工作，但不能在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中的图像将不会缩放。很奇怪。

感谢任何有想法的人！

解决方法

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

开始介绍此博客条目