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

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

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

问题

在SwiftUI中，您可以使用GeometryReader和Spacer来实现您所描述的布局。以下是示例代码：

  1. import SwiftUI
  3. struct ContentView: View {
  4.     var body: some View {
  5.         VStack {
  6.             // 1st subview with fixed size
  7.             Text("Subview 1")
  8.                 .frame(height: 50)
  9.             
  10.             // 2nd subview in the middle, taking the rest of available height
  11.             GeometryReader { geometry in
  12.                 Text("Subview 2")
  13.                     .frame(height: geometry.size.height - 100) // Adjust the value as needed
  14.             }
  15.             
  16.             // 3rd subview with fixed size
  17.             Text("Subview 3")
  18.                 .frame(height: 50)
  19.         }
  20.     }
  21. }
  23. struct ContentView_Previews: PreviewProvider {
  24.     static var previews: some View {
  25.         ContentView()
  26.     }
  27. }

请注意，上述示例中的值可能需要根据设备和布局需求进行调整。

英文:

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

以下是已翻译好的代码部分：

  1.     struct TestSwiftUIView: View {
  2.     var body: some View {
  3.         VStack {
  4.             HStack { //视图 1 - 固定
  5.             }
  6.             .frame(maxWidth: .infinity, minHeight: 100)
  7.             .background(Color.red)
  8.             HStack { //视图 2 - 扩展
  9.             }
  10.             .frame(maxWidth: .infinity, maxHeight: .infinity)
  11.             .background(Color.blue)
  12.             HStack { //视图 3 - 固定
  13.             }
  14.             .frame(maxWidth: .infinity, minHeight: 100)
  15.             .background(Color.green)
  16.         }
  17.         .frame(maxWidth: .infinity, maxHeight: .infinity)
  18.         .background(Color.black)
  19.     }
  20. }
英文:

You can try something like below code, Replacing HStacks with your views

  1. struct TestSwiftUIView: View {
  2. var body: some View {
  3.     VStack {
  4.         HStack { //View 1 - fixed
  5.         }
  6.         .frame(maxWidth: .infinity, minHeight: 100)
  7.         .background(Color.red)
  8.         HStack { //View 2 - expanded
  9.         }
  10.         .frame(maxWidth: .infinity, maxHeight: .infinity)
  11.         .background(Color.blue)
  12.         HStack { //View 3 - fixed
  13.         }
  14.         .frame(maxWidth: .infinity, minHeight: 100)
  15.         .background(Color.green)
  16.     }
  17.     .frame(maxWidth: .infinity, maxHeight: .infinity)
  18.     .background(Color.black)
  19. }

}

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

发表评论

匿名网友

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

确定