英文:
SwiftUI: VStack Layout with 2 fix size SubVIews and the 3rd subview (in Middle) taking rest of available height
问题
在SwiftUI中,您可以使用GeometryReader
和Spacer
来实现您所描述的布局。以下是示例代码:
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
// 1st subview with fixed size
Text("Subview 1")
.frame(height: 50)
// 2nd subview in the middle, taking the rest of available height
GeometryReader { geometry in
Text("Subview 2")
.frame(height: geometry.size.height - 100) // Adjust the value as needed
}
// 3rd subview with fixed size
Text("Subview 3")
.frame(height: 50)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
请注意,上述示例中的值可能需要根据设备和布局需求进行调整。
英文:
I need to make a screen in SwiftUI where the 1st and 3rd subviews of a VStack have fixed size and I want the 2nd in the middle to take the rest of the available height (This value will differ based on device). How can this be achieved in SwiftUI
答案1
得分: 1
以下是已翻译好的代码部分:
struct TestSwiftUIView: View {
var body: some View {
VStack {
HStack { //视图 1 - 固定
}
.frame(maxWidth: .infinity, minHeight: 100)
.background(Color.red)
HStack { //视图 2 - 扩展
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.blue)
HStack { //视图 3 - 固定
}
.frame(maxWidth: .infinity, minHeight: 100)
.background(Color.green)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.black)
}
}
英文:
You can try something like below code, Replacing HStacks with your views
struct TestSwiftUIView: View {
var body: some View {
VStack {
HStack { //View 1 - fixed
}
.frame(maxWidth: .infinity, minHeight: 100)
.background(Color.red)
HStack { //View 2 - expanded
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.blue)
HStack { //View 3 - fixed
}
.frame(maxWidth: .infinity, minHeight: 100)
.background(Color.green)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.black)
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论