SwiftUI：使视图B与视图A具有相同宽度的视图A更改比率

发布于02月07日

代码是这样的:

struct ContentView: View {
    
    @State var r:CGFloat = 1
    
    var body: some View {
        
        VStack(spacing:0) {
            Color.red
                .aspectRatio(r, contentMode: .fit)
            HStack {
                Text("LEFT")
                Spacer()
                Text("Right")
            }
            .frame(height: 40)
            .background(Color.blue)
        }
        
    }
}

#Preview {
    ContentView()
}

它简单地画出了这样的东西:

我希望HStack遵循我设置的比率为Color.red的宽度.

因此，Color.red的比率可以改变，我希望HStack具有与Color.red完全相同的宽度

随着r的变化，如何使HStack的宽度与Color.red视图的宽度匹配？

推荐答案

您可以使用GeometryReader读取Color.red的大小，并使用PreferenceKey将其传回层次 struct :

struct ContentView: View {
    @State private var r:CGFloat = 1
    @State private var redWidth: CGFloat = 0
    
    var body: some View {
        VStack(spacing:0) {
            Color.red
                .aspectRatio(r, contentMode: .fit)
                .readSize { redWidth = $0.width }
            HStack {
                Text("LEFT")
                Spacer()
                Text("Right")
            }
            .frame(width: redWidth, height: 40)
            .background(Color.blue)
        }
        
    }
}

extension View {
  func readSize(onChange: @escaping (CGSize) -> Void) -> some View {
    background(
      GeometryReader { geometryProxy in
        Color.clear
          .preference(key: SizePreferenceKey.self, value: geometryProxy.size)
      }
    )
    .onPreferenceChange(SizePreferenceKey.self, perform: onChange)
  }
}

struct SizePreferenceKey: PreferenceKey {
  static var defaultValue: CGSize = .zero
  static func reduce(value: inout CGSize, nextValue: () -> CGSize) {}
}

见https://www.fivestars.blog/articles/swiftui-share-layout-information/