SwiftUI 如何让视图适配指定尺寸 实现所有卡片大小统一

你遇到的卡片高度不一致问题，本质是长名字（如LaMarcus Aldridge）触发lineLimit(2)折为两行，比单行名字多占用文本区域高度，而卡片当前为自适应内容高度，所以出现尺寸差。无需手动计算间距，以下是两种更优解决方案：

方案1：固定卡片高度（最简单，适合需求稳定的场景） #

直接给所有卡片设置统一的固定高度即可，内部内容会自动居中对齐，你可以根据实际最长文本的展示效果调整高度数值。同时可以把重复的卡片逻辑抽为子组件，减少冗余代码：

// 通用球员卡片子组件
struct PlayerCard: View {
    let player: Player
    @Binding var selectedAnswer: Player?
    
    var body: some View {
        VStack(spacing: 15) {
            Image(uiImage: player.picture)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(height: 140)
            
            Text(player.name)
                .font(.title2)
                .fontWeight(.heavy)
                .foregroundColor(.black)
                .multilineTextAlignment(.center)
                .lineLimit(2)
            
            Text(player.team)
                .foregroundColor(.black)
                .multilineTextAlignment(.center)
        }
        .padding()
        .frame(maxWidth: .infinity)
        // 统一设置固定高度，数值可根据实际效果调整
        .frame(height: 280)
        .onTapGesture {
            selectedAnswer = player
        }
        .background(
            RoundedRectangle(cornerRadius: 15)
                .stroke(color(option: player), lineWidth: 5)
        )
        .cornerRadius(15)
    }
}

// 原页面的body简化后
var body: some View {
    // 外层容器可根据你的实际布局换成VStack
    HStack(spacing: 12) {
        ForEach(question.players.indices, id: \.self) { index in
            PlayerCard(player: question.players[index], selectedAnswer: $selectedAnswer)
        }
    }
}

方案2：动态适配最高内容高度（无需硬编码，自适应内容） #

如果希望卡片高度自动匹配所有卡片中最高的那个的高度，不需要手动写死数值，可以用SwiftUI的PreferenceKey实现高度同步：

// 定义高度读取用的PreferenceKey
struct CardHeightKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        // 取所有卡片的最大高度
        value = max(value, nextValue())
    }
}

// 改造卡片子组件
struct PlayerCard: View {
    let player: Player
    @Binding var selectedAnswer: Player?
    @Binding var maxCardHeight: CGFloat
    
    var body: some View {
        VStack(spacing: 15) {
            Image(uiImage: player.picture)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(height: 140)
            
            Text(player.name)
                .font(.title2)
                .fontWeight(.heavy)
                .foregroundColor(.black)
                .multilineTextAlignment(.center)
                .lineLimit(2)
            
            Text(player.team)
                .foregroundColor(.black)
                .multilineTextAlignment(.center)
        }
        .padding()
        .frame(maxWidth: .infinity)
        // 读取当前卡片的自适应高度并上报
        .background(GeometryReader { proxy in
            Color.clear.preference(key: CardHeightKey.self, value: proxy.size.height)
        })
        // 统一设置为所有卡片的最大高度
        .frame(height: maxCardHeight)
        .onTapGesture {
            selectedAnswer = player
        }
        .background(
            RoundedRectangle(cornerRadius: 15)
                .stroke(color(option: player), lineWidth: 5)
        )
        .cornerRadius(15)
    }
}

// 原页面使用
@State private var maxCardHeight: CGFloat = 0

var body: some View {
    HStack(spacing: 12) {
        ForEach(question.players.indices, id: \.self) { index in
            PlayerCard(
                player: question.players[index],
                selectedAnswer: $selectedAnswer,
                maxCardHeight: $maxCardHeight
            )
        }
    }
    // 监听所有卡片的高度，更新全局最大高度
    .onPreferenceChange(CardHeightKey.self) { height in
        maxCardHeight = height
    }
}

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