SwiftUI ZStack对齐错误

Question

下面是一个简单的代码，它生成了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()，因为它是初始状态。具有理想大小的Rectangle只是为了演示。

这里的使用ZStack和显式对齐指南(而不是HStack)，因为它是另一个库的一部分。这是必要的。

XCode 11.5 iOS 13.5 iPhone SE 2020

Bug看起来是这样的：

预期布局：

​

Answer 1

我经常在Text中看到这样的SwiftUI截断问题。大多数情况下的解决办法是:确保允许Text使用minimumScaleFactor修饰符自动调整其字体大小。

通过修改VCardView

Text(self.text)
    .minimumScaleFactor(0.5)

对于所有可能的文本值(text1、text2、text2Alt1和text2Alt2)，不对齐问题都会消失。

结果的文本看起来一点也不缩放。一切都很合身。我没有一个很好的解释，但我认为如果您告诉SwiftUI您的Text不是100%刚性/刚性，它在计算元素范围方面表现得更好。

也许这是一个SwiftUI错误，但是我一直对这个minimumScaleFactor解决方案很满意，因为它并没有对我的结果产生负面影响。

Answer 2

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

对于矩形比例，请检查类似于this的内容。