如何解决ZStack中Text视图在VStack/LazyVGrid内添加垂直边距的问题

问题场景 #

当使用ZStack包裹Text视图，并将其放入VStack或LazyVGrid时，会出现额外的垂直边距。具体表现为：

• 实现了CardView结构体，未翻转时仅展示带颜色的RoundedRectangle
• 点击翻转后，显示白色填充、带描边的RoundedRectangle以及ZStack内的Text
• 仅当卡片翻转显示Text时，会出现垂直边距，与未翻转卡片的布局产生明显差异

已尝试的无效方案 #

• 给外层VStack设置spacing: 0，无法消除边距
• 移除翻转状态下的Text，额外边距消失，但业务需要保留Text内容
• 给ZStack添加极小值的垂直padding（如.padding(.vertical, 0.000001)）可临时解决，但属于不合理的 workaround

完整复现代码 #

struct ContentView: View {
    var contents = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    @State var contentCount = 20
    
    var body: some View {
        VStack(spacing: 0) {
            ScrollView {
                LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))]) {
                    ForEach(contents[0..<contentCount], id: \.self) { content in
                        CardView(content: content).aspectRatio(2/3, contentMode: .fit)
                    }
                }.foregroundColor(.red)
            }
            HStack {
                removeButton
                Spacer()
                addButton
            }.font(.largeTitle).padding(.horizontal).foregroundColor(.blue)
        }.padding(.horizontal)
    }
    
    var removeButton: some View {
        Button {
            if contentCount > 1 {
                contentCount -= 1
            }
        } label: {
            Image(systemName: "minus.circle")
        }
    }
    
    var addButton: some View {
        Button {
            if contentCount < contents.count {
                contentCount += 1
            }
        } label: {
            Image(systemName: "plus.circle")
        }
        
    }
}

struct CardView: View {
    @State var isFaceUp: Bool = true
    var content: String
    
    var body: some View {
        ZStack {
            let shape = RoundedRectangle(cornerRadius: 20)
            if isFaceUp {
                shape.fill().foregroundColor(.white)
                shape.strokeBorder(lineWidth: 5)
                Text(content).font(.largeTitle)
            } else {
                shape.fill()
            }
        }
        //.padding(.vertical, 0.000001) // 临时 workaround
        .onTapGesture {
            isFaceUp = !isFaceUp
        }
    }
}

解决方案 #

问题根源是Text视图自带默认垂直边距：SwiftUI的Text会根据字体的lineHeight自动添加上下额外空间，用于容纳字母的延伸部分（如下伸的g、y）。当ZStack中加入Text后，这部分额外空间会被计算到ZStack的总尺寸中，而仅含RoundedRectangle的ZStack没有该空间，导致布局不一致。

推荐以下几种解决方案：

方案1：给Text添加fixedSize()

强制Text仅占用自身内容所需的最小空间，避免额外垂直扩展：

Text(content).font(.largeTitle).fixedSize()

方案2：给Text设置lineLimit(1)

限制Text只显示一行，同时消除默认的额外边距：

Text(content).font(.largeTitle).lineLimit(1)

方案3：统一两种状态的布局边界

在未翻转状态下添加透明的占位Text，让两种状态的ZStack尺寸保持一致：

if isFaceUp {
    shape.fill().foregroundColor(.white)
    shape.strokeBorder(lineWidth: 5)
    Text(content).font(.largeTitle)
} else {
    shape.fill()
    Text(content).font(.largeTitle).opacity(0) // 透明占位，保证尺寸一致
}

以上三种方法都能有效消除翻转前后的布局差异，根据业务需求选择即可。

内容的提问来源于stack exchange，提问作者joshgalv