SwiftUI ZStack alignment 错误

Question

这是一个简单的代码，它产生一个奇怪的顶部 alignment 和 ZStack 内第二个元素的缩小文本。

但是，如果您稍微更改第二个文本（将text2替换为text2Alt1或text2Alt2 ）使其更长或更短，一切都会变得正确。

这种行为的原因是什么？

struct VCardView: View {
    let text: String
    let color: UIColor
    
    var body: some View {
        VStack {
            Rectangle()
                .fill(Color(self.color))
                .frame(idealWidth: 800, idealHeight: 500)
                .aspectRatio(contentMode: .fit)

            Text(self.text)
        }
    }
}

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            VCardView(text: text1, color: .blue)
                .frame(width: 180, height: nil)
                .alignmentGuide(.leading) { _ in 180 }
                .alignmentGuide(.top) { _ in 0 }
            
            //Replace text2 by text2Alt1 or text2Alt2 here:
            VCardView(text: text2, color: .green)
                .frame(width: 180, height: nil)
                .alignmentGuide(.leading) { _ in 0 }
                .alignmentGuide(.top) { _ in 0 }
        }
    }
    
    let text1 = "1Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidu!"
    
    let text2 = "2Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nat!"
    
    
    let text2Alt1 = "2Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. C"
    
    let text2Alt2 = "2Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nat! Cum sociis nat!"
}

此外，您可以使用适当的比例将Rectangle()替换为Image() ，因为它是最初的 state。 具有理想尺寸的Rectangle仅用于演示。

在这里，我将 ZStack 与显式 alignment 指南（不是 HStack）一起使用，因为它是另一个库的一部分。 这是必不可少的。

XCode 11.5 iOS 13.5 iPhone SE 2020

错误演示

正确的外观

Answer 1

我经常在 SwiftUI 中看到这样的Text截断问题。 大多数时候有帮助的解决方法：确保允许Text使用minimumScaleFactor修饰符自动调整其字体大小。

通过修改VCardView

Text(self.text)
    .minimumScaleFactor(0.5)

对于所有可能的文本值（ text1 、 text2 、 text2Alt1和text2Alt2 ），错位问题都会消失。

生成的文本看起来根本没有缩放。 一切都很好。 我没有很好的解释，但我认为如果你告诉 SwiftUI 你的Text不是 100% 刚性/僵硬，它在计算元素范围时表现更好。

也许这是一个 SwiftUI 错误，但我总是对这个minimumScaleFactor解决方法没问题，因为它没有对我的结果产生负面影响。

Answer 2

它看起来不像ZStack问题。 尝试从 VCardView 的Rectangle()中删除.aspectRatio(contentMode: .fit) VCardView

对于矩形比例检查类似这样的东西。