SwiftUI 堆栈中元素之间的 maxWith 不同

Question

我想要一个视图，显示使用 customShape 创建的两个元素（它与 RoundedRectangle(cornerRadius:25.0) 的形状基本相同，但与普通矩形组合以使 2 个角锐化）。问题是，当我尝试组合这两个视图时（将其模仿为 Capsule() ），我无法修改其比例。我希望图像仅占据药丸的 25%，而文本占据 75% 的持久部分.但我无法做到这一点。这是我所拥有的照片：

我想要的：

我尝试使用 GeometryReader，但我不知道它是否是一个好的解决方案，或者我是否不知道如何使用它，但我得到了这个：

主视图的代码为：

struct CardHomeContent: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: /*@START_MENU_TOKEN@*/25.0/*@END_MENU_TOKEN@*/)
            HStack(spacing:0) { //Contenido
                ImageContent(image:"Croissant")
                TextCardContent()
            }
        }
        .clipShape(RoundedRectangle(cornerRadius: 25))
        .padding(.horizontal)
    }
}

ImageView 是：

struct ImageContent: View {
    let image : String
    
    var body: some View {
        ZStack {
            Image(image)
                .resizable()
                .scaledToFill()
        }
    }
}

还有文本视图：

struct TextCardContent: View {
    let uiFont: UIFont = .systemFont(ofSize: 13)
    let description = "Unos croissants que harán chuparte los dedos llenos de mantequilla"
    var justifiedTest: String {
        description.justified(font: uiFont, maxWidth: 165)
    }
    var body: some View {
        ZStack {
            RoundedRectangleCustomShapeRight().foregroundStyle(Color.white)
            HStack {
                VStack {
                    Text("Croissants tradicionales").bold().lineLimit(2).minimumScaleFactor(0.4)
                    Text(description).font(.footnote).foregroundStyle(Color.gray).lineLimit(3).minimumScaleFactor(0.5)
                        .multilineTextAlignment(.leading)
                }
                .padding(.all)
                Text(">")
                    .padding(.trailing)
            }

        }
    }
}

因此，如果有人能提出任何想法，我将不胜感激。

Answer 1

从我的角度来看，实现此目的最简单的方法是将 CardHomeContent 包装到

GeometryReader

中，然后计算每个卡片视图部分的宽度。即，ImageContent 占总宽度的 0.25，TextCardContent 占总宽度的 0.75。

var body: some View {
   ZStack {
        RoundedRectangle(cornerRadius: 25)
        GeometryReader { geo in //<- Here
            HStack(spacing: 0) {
                ImageContent(image: "square.and.arrow.up")
                    .frame(width: geo.size.width * 0.25) //<- Here

                TextCardContent()
                    .frame(width: geo.size.width * 0.75) //<- Here
            }
        }
    }
    .clipShape(RoundedRectangle(cornerRadius: 25))
    .padding(.horizontal)
}