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.
- 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
- 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 :)
