Maximise Image above Form

Dear All,

I want to maximise an Image above a Form. That should be easy enough but with the naive code, the Form is pushed out of the screen. I don't want to allow scrolling.

This is my code:

Image(systemName: "gear")
    .resizable()
    .scaledToFit()

Form {
    Section("section 1") {
        Text("text 1")
        Text("text 2")
        Text("text 3")
    }
    Section("section 2") {
        Text("text 1")
        Text("text 2")
        Text("text 3")
    }
}
.scrollDisabled(true)

Any hint on how to achieve that the Form is fully displayed and the Image dynamically maximised in the space that is left?

Thanks in advance!

Cheers F

Answered by floteich in 781146022

Hi Timo2303,

Avoiding Form altogether and designing a nice report instead, as you indicated, is actually a very good solution.

It seems Forms are not made for this purpose as their dimensions are just the portion displayed on screen at any time.

Thank you very much for the hint and the code!

Cheers F

Hello :)

That's a really interesting question. I tried many things but I only found two different approaches. The problem is, you don't get the form's height itself in any way because a form always takes as much vertical space as it gets.

  1. So that's why you could fix the height of the image, so that there is enough space for the form with its content. The drawback of this solution is, that if the content in the form gets more and more, it's not visible anymore when it gets too much. It would be something like:
Image(systemName: "gear")
    .resizable()
    .scaledToFit()

Form {
    Section("section 1") {
        Text("text 1")
        Text("text 2")
        Text("text 3")
    }
    Section("section 2") {
        Text("text 1")
        Text("text 2")
        Text("text 3")
    }
}
.scrollDisabled(true)
.frame(height: 500) //added the .frame() modifier
  1. Another approach would be to not use the Form. By using a normal VStack with the .layoutPriority() modifier the image gets maximized dynamically and the VStack adjusts its height itself. The advantage is that you can fill the VStack with any content you want and the image resizes itself. Example would be:
Image(systemName: "gear")
    .resizable()
    .scaledToFit()

VStack {
    ForEach(1..<9) { value in
        HStack {
            Text("Test + " + value.description)
            Spacer()
        }
        .padding(.leading)
        .padding(.bottom, 4)
    }
}
.layoutPriority(1) //very important, otherwise it won't work

Maybe someone else found another solution but I think the second approach might be the best way to start in order to see everything good and adjusted on any device.

If you have any further questions, don't hesitate to ask :)

Accepted Answer

Hi Timo2303,

Avoiding Form altogether and designing a nice report instead, as you indicated, is actually a very good solution.

It seems Forms are not made for this purpose as their dimensions are just the portion displayed on screen at any time.

Thank you very much for the hint and the code!

Cheers F

Maximise Image above Form
 
 
Q