GeometryReader的简单使用

VStack {
    GeometryReader { geo in
        Text("GeometryReader")
            .frame(width: geo.size.width * 0.9, height: 40)
            .background(.red)
    }
    .background(.green)
    
    Text("More text")
        .background(.blue)
}

GeometryReader { geometry in
    HStack {
        VStack {
            Text("Left Column")
                .frame(width: geometry.size.width * 0.4)
                .padding()
                .background(Color.red.opacity(0.3))
            
            Spacer()
            
            Text("Bottom Left")
                .frame(width: geometry.size.width * 0.4)
                .padding()
                .background(Color.green.opacity(0.3))
        }
        
        Spacer()
        
        VStack {
            Text("Right Column")
                .frame(width: geometry.size.width * 0.6)
                .padding()
                .background(Color.blue.opacity(0.3))
        }
    }
    .padding()
}

• 使用 geometry.size 可以获取可用空间的宽度和高度。

  struct GReaderView: View {
      var body: some View {
          OuterView()
              .background(.red)
      }
  }
  
  struct OuterView: View {
      var body: some View {
          VStack {
              Text("top")
              InnerView()
                  .background(.green)
              Text("Bottom")
          }
      }
  }
  
  struct InnerView: View {
      var body: some View {
          HStack {
              Text("left")
              GeometryReader { geo in
                  Text("Center")
                      .background(.blue)
                      .onTapGesture {
                          print("Global center: \(geo.frame(in: .global).midX) x \(geo.frame(in: .global).midY)")
                      }
              }
              .background(.orange)
              Text("right")
          }
      }
  }