SwiftUI: VStack Layout with 2 fix size SubVIews and the 3rd subview (in Middle) taking rest of available height

huangapple go评论53阅读模式
英文:

SwiftUI: VStack Layout with 2 fix size SubVIews and the 3rd subview (in Middle) taking rest of available height

问题

在SwiftUI中,您可以使用GeometryReaderSpacer来实现您所描述的布局。以下是示例代码:

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 SwiftUISwiftUI: VStack Layout with 2 fix size SubVIews and the 3rd subview (in Middle) taking rest of available height

答案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)
}

}

huangapple
  • 本文由 发表于 2023年6月13日 00:01:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76458410.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定