SwiftUI中调整Stack内元素宽度占比（25%/75%）的实现方案

解决要点 #

要实现图片区占25%、文本区占75%的宽度分配，直接用GeometryReader获取父容器宽度，给两个子视图分配对应比例即可。同时处理好图片填充裁剪和自定义形状的正确应用。

修改后完整代码 #

主视图（核心调整宽度比例）

struct CardHomeContent: View {
    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) {
                // 图片区：占总宽度25%
                ImageContent(image: "Croissant")
                    .frame(width: geometry.size.width * 0.25)
                    .clipShape(RoundedRectangle(cornerRadius: 25)
                                .path(in: CGRect(x: 0, y: 0, width: geometry.size.width * 0.25, height: geometry.size.height))
                                .trimmedPath(from: 0, to: 1))
                // 文本区：占总宽度75%
                TextCardContent()
                    .frame(width: geometry.size.width * 0.75)
            }
            .frame(height: 120) // 按需调整卡片高度
            .clipShape(RoundedRectangle(cornerRadius: 25)) // 整体保持圆角胶囊样式
        }
        .padding(.horizontal)
    }
}

图片视图（优化填充与裁剪）

struct ImageContent: View {
    let image: String
    
    var body: some View {
        Image(image)
            .resizable()
            .scaledToFill()
            .clipped() // 裁剪溢出部分，确保图片填满区域
    }
}

文本视图+自定义形状实现

假设你需要的自定义形状是右侧两个角为直角、左侧两个角为圆角，实现如下：

// 自定义形状：左圆角、右直角
struct RoundedRectangleCustomShapeRight: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 左上角圆角
        path.addArc(center: CGPoint(x: rect.minX + 25, y: rect.minY + 25), radius: 25, startAngle: .degrees(180), endAngle: .degrees(270), clockwise: false)
        // 右上角直角
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        // 右下角直角
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        // 左下角圆角
        path.addArc(center: CGPoint(x: rect.minX + 25, y: rect.maxY - 25), radius: 25, startAngle: .degrees(90), endAngle: .degrees(180), clockwise: false)
        path.closeSubpath()
        return path
    }
}

struct TextCardContent: View {
    let description = "Unos croissants que harán chuparte los dedos llenos de mantequilla"
    
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                Text("Croissants tradicionales")
                    .bold()
                    .lineLimit(2)
                    .minimumScaleFactor(0.4)
                Text(description)
                    .font(.footnote)
                    .foregroundStyle(.gray)
                    .lineLimit(3)
                    .minimumScaleFactor(0.5)
                    .multilineTextAlignment(.leading)
            }
            .padding()
            Spacer()
            Text(">")
                .padding(.trailing)
        }
        .background(RoundedRectangleCustomShapeRight().foregroundStyle(.white))
    }
}

关键修改说明 #

1. 宽度比例精准控制：通过GeometryReader获取卡片总宽度，直接给图片/文本视图设置0.25*总宽和0.75*总宽，彻底解决比例调整问题。
2. 图片溢出处理：给图片添加.clipped()，配合scaledToFill()保证图片填满分配的区域，不会超出边界。
3. 自定义形状简化：把自定义形状直接作为文本视图的背景，去掉多余的ZStack嵌套，布局更简洁。
4. 文本区布局优化：用Spacer让箭头自动靠右，避免手动调整位置，适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Jesús Mariscal