Set the width of an Image to half the width of its HStack container view in SwiftUI?

Question

So I just want to do something pretty simple which is have an Image take half the size of its container and a Vstack the other half.

Im currently doing this to force both views to take as much space as they can with maxWidth: .infinity, so they end up taking equal amounts of space:

    struct ContentView: View {
    var body: some View {
        HStack {
            Image("landscape")
                .resizable()
                .scaledToFill()
                .frame(maxWidth: .infinity, maxHeight: 170)
            VStack {
                Text("Test")
                Text("Test 2")
            }
            .frame(maxWidth: .infinity)
        }
        .frame(maxWidth: .infinity, maxHeight: 170)
        .background(Color.red)
        .padding()
    }
}

But it ends up in this poor result, sadly:

Any tips? I saw GeometryReader might come in handy here but seems to push my Views all the way to the top and end up with unwanted results.

Answer 1

you need to add a fixedSize() modifier to HStack and keep it's vertical to true.

var body: some View {
    HStack {
        Image("1")
            .resizable()
            .scaledToFill()
            .frame(maxWidth: .infinity, maxHeight: 170)
        
        VStack {
            Text("Test")
            Text("Test 2")
        }
        .frame(maxWidth: .infinity)
    }
    .frame(maxWidth: .infinity, maxHeight: 170)
    .background(Color.red)
    .padding()
    .fixedSize(horizontal: false, vertical: true)
}

you can read more about fixedsize() here

Now your HStack will be like this