SwiftUI设置间距时文本被截断，求固定按钮位置的解决方法

我做了一个卡片视图，想在标题文本、限制3行的描述文本和按钮之间加20px间距，但一加间距描述文本就被截断，用底部内边距也有同样问题。我要按钮位置固定，同时描述文本保持3行限制，该怎么实现？

相关代码：

struct CardView: View {
    // MARK: - Constants
    private struct ViewConstants {
        static let screenWidth = UIScreen.main.bounds.width
        static let cardWidth = screenWidth - 100
        static let cardRatio = 300.0/377.0
        static let cardHeight = cardWidth/cardRatio + 10
    }
    
    var body: some View {
        ZStack {
            VStack(spacing: 8) {
                LottieView(filename: "Animation", animationType: .loop)
                    .frame(height: ViewConstants.cardHeight / 2)
                
                VStack {
                    Text("CARD SHOPPING")
                        .font(.system(size: 18))
                        .lineLimit(1)
                        .padding(.bottom, 2)
                    
                    Text("The all-in-one solution to buy all the smartphones, laptops and tablets in your house. Many ")
                        .lineLimit(3)
                        .padding(.horizontal, 24)
                }
                
                Button(action: {
                    print("sign up bin tapped")
                }) {
                    Text("Click for more")
                        .font(.system(size: 14))
                        .padding()
                        .foregroundColor(.black)
                        .overlay(
                            RoundedRectangle(cornerRadius: 25)
                                .stroke(Color.black, lineWidth: 2)
                        )
                }
                .padding(.top, 4)
                .padding(.bottom, 24)
                
            }
            .frame(width: ViewConstants.cardWidth, height: ViewConstants.cardHeight)
            .multilineTextAlignment(.center)
            .background(Color.yellow)
            .cornerRadius(12)
        }
        .padding(.leading, -20 * 3)
    }
}

效果对比：

• 需求效果：
• 当前问题：

核心问题是你给整个VStack固定了高度，加间距后文本区域被挤压，导致描述文本被截断。要实现按钮固定、描述文本保持3行，调整布局优先级和高度分配即可：

1. 取消外层VStack的固定高度，改用frame(width:)只固定宽度，同时设置最小高度保证卡片布局稳定；
2. 给描述文本容器设置最小高度，确保能容纳3行文本，避免被挤压；
3. 用Spacer()把按钮推到卡片底部，保证按钮位置固定。

修改后的代码：

struct CardView: View {
    // MARK: - Constants
    private struct ViewConstants {
        static let screenWidth = UIScreen.main.bounds.width
        static let cardWidth = screenWidth - 100
        static let cardRatio = 300.0/377.0
        // 保留原卡片最小高度，避免布局塌陷
        static let minCardHeight = cardWidth/cardRatio + 10
        // 根据字体计算3行文本的最小高度（可根据实际字体调整）
        static let descriptionMinHeight: CGFloat = 60
    }
    
    var body: some View {
        ZStack {
            VStack(spacing: 20) { // 直接设置标题、描述、按钮之间的20px间距
                LottieView(filename: "Animation", animationType: .loop)
                    .frame(height: ViewConstants.minCardHeight / 2)
                
                VStack(spacing: 20) {
                    Text("CARD SHOPPING")
                        .font(.system(size: 18))
                        .lineLimit(1)
                    
                    Text("The all-in-one solution to buy all the smartphones, laptops and tablets in your house. Many ")
                        .lineLimit(3)
                        .padding(.horizontal, 24)
                        .frame(minHeight: ViewConstants.descriptionMinHeight, alignment: .top) // 固定最小高度
                }
                
                // 用Spacer把按钮推到底部
                Spacer()
                
                Button(action: {
                    print("sign up bin tapped")
                }) {
                    Text("Click for more")
                        .font(.system(size: 14))
                        .padding()
                        .foregroundColor(.black)
                        .overlay(
                            RoundedRectangle(cornerRadius: 25)
                                .stroke(Color.black, lineWidth: 2)
                        )
                }
                .padding(.bottom, 24)
            }
            .frame(width: ViewConstants.cardWidth, minHeight: ViewConstants.minCardHeight) // 只固定宽度和最小高度
            .multilineTextAlignment(.center)
            .background(Color.yellow)
            .cornerRadius(12)
        }
        .padding(.leading, -20 * 3)
    }
}

关键修改说明： #

• 移除外层VStack的固定高度，改为minHeight，既保证卡片不会太矮，又能让内容有足够空间展示；
• 给描述文本添加frame(minHeight:)，确保它能容纳3行文本，不会因为间距被挤压截断；
• 使用Spacer()将按钮固定在卡片底部，无论文本内容多少，按钮位置都保持不变；
• 直接把VStack的spacing设为20，实现标题、描述、按钮之间的间距需求，无需额外加内边距。

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