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

Posted 2023-02-24

【中文标题】TabView 中的奇怪图像行为：图像无法缩放

【英文标题】：Strange Image Behavior In TabView: Image Fails To Scale

【发布时间】：2020-09-18 06:20:44

【问题描述】：

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

感谢任何有想法的人！

【参考方案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 开始写这篇博文

【讨论】：

嘿，谢谢，太好了。很奇怪，您无法在选项卡视图中缩放，或者它不会为您缩放——非常随意。

不客气。结果证明这是一个非常具有挑战性的问题。

在幕后，它仍然是 UIKit。我认为这在 UIKit 中遇到了限制。

使用这种方法，活动标签颜色不会随着您在不同标签之间切换而改变。