SwiftUI卡片视图尺寸随文本变化：如何固定卡片大小？

我编写了如下SwiftUI卡片视图代码：

var body: some View {
    VStack {
        Text(tip)
            .padding(.bottom)
            .font(.custom("Roboto-Light", size:10))
        Text(tipTitle)
            .multilineTextAlignment(.center)
            .font(.custom("Roboto-Bold", size:24))
        Text(tipMessage)
            .font(.custom("Roboto-Light", size:14))
            .multilineTextAlignment(.center)
            .padding(.top,1)
        Image(image)
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 200, height: 150)
    }
    .padding()
    .background(Color("grey"))
    .cornerRadius(15)
    .padding(.horizontal)
}

使用这些卡片时，卡片的内边距会随添加的文本内容而变化，请问如何修改代码，使所有卡片的尺寸保持一致？

解决方案 #

要让所有卡片尺寸统一，核心是给卡片容器添加固定尺寸约束，同时确保文本内容不会撑开容器。以下是两种实用修改方式：

方式一：固定卡片整体尺寸

给外层容器设置固定的frame(width:height:)，同时调整文本布局避免内容溢出：

var body: some View {
    VStack(alignment: .center, spacing: 8) { // 统一设置间距，替代零散padding
        Text(tip)
            .font(.custom("Roboto-Light", size:10))
        Text(tipTitle)
            .multilineTextAlignment(.center)
            .font(.custom("Roboto-Bold", size:24))
            .fixedSize(horizontal: false, vertical: true) // 允许文本垂直换行
        Text(tipMessage)
            .font(.custom("Roboto-Light", size:14))
            .multilineTextAlignment(.center)
            .fixedSize(horizontal: false, vertical: true)
        Image(image)
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 200, height: 150)
            .clipped() // 防止图片超出设定的frame
    }
    .padding()
    .frame(width: 280, height: 420) // 根据需求调整固定尺寸数值
    .background(Color("grey"))
    .cornerRadius(15)
    .padding(.horizontal)
}

方式二：限制最小/最大尺寸

如果需要保留一定灵活性但仍保持尺寸统一，可设置minWidth/maxWidth和minHeight/maxHeight：

var body: some View {
    VStack(alignment: .center, spacing: 8) {
        // 文本和图片部分同方式一
    }
    .padding()
    .frame(minWidth: 280, maxWidth: 280, minHeight: 420, maxHeight: 420) // 强制尺寸一致
    .background(Color("grey"))
    .cornerRadius(15)
    .padding(.horizontal)
}

关键说明 #

• 用VStack的spacing替代零散的padding，布局更规整
• fixedSize(horizontal: false, vertical: true)确保文本过长时自动换行，不会撑开容器
• 图片添加.clipped()避免因fill模式超出设定的frame范围

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