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 demonstration

Correct appearance

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的问题。尝试从.aspectRatio(contentMode: .fit)的{{1}}中删除Rectangle()。

对于矩形比例，请检查诸如this之类的东西。

SwiftUI ZStack对齐错误

2 个答案: