几何学和.Frame的对齐

Question

我使用的是geometryReader（）和.frame（）来显示它们的可比性并播放其宽度。 但是，当宽度小于最小值时，包裹在geometryReader（）中的对象没有中心对齐。 请参阅随附的GIF进行演示。

你能帮我对齐吗？

理想：

当前：

struct ExampleView: View {
@State private var width: CGFloat = 50

var body: some View {
    VStack {
        SubView()
            .frame(width: self.width, height: 120)
            .border(Color.blue, width: 2)
        
        Text("Offered Width is \(Int(width))")
        Slider(value: $width, in: 0...200, step: 5)
      }
   }
}

struct SubView: View {
    var body: some View {
        GeometryReader { geometry in
            Rectangle()
                .fill(Color.yellow.opacity(0.6))
                .frame(width: max(geometry.size.width, 120), height: max(geometry.size.height, 120))
        }
    }
}

Answer 1

那是因为几何读程序不关心孩子。

您必须通过添加.position修改器或.offset来手动定位矩形。

.position将相对于父中心的矩形框架的原点。

.offset不会更改框架，而是更改渲染（像cgaffineTransform一样工作，并带有翻译）。

您的矩形的以下修饰符将以视觉上产生相同的结果（尽管在引擎盖下不同）：

Rectangle()
    .fill(Color.yellow.opacity(0.6))
    .frame(width: max(geometry.size.width, 120), height: max(geometry.size.height, 120))
    .position(x: geometry.size.width / 2, y: geometry.size.height / 2)

或

let rectWidth = max(geometry.size.width, 120)
Rectangle()
    .fill(Color.yellow.opacity(0.6))
    .frame(width: rectWidth, height: max(geometry.size.height, 120))
    .offset(x: ((geometry.size.width - rectWidth) / 2), y: 0)

注意您的矩形框架超过了其父级的界限。我建议避免这种情况，因为它将在屏幕上造成各种困难。

您可以以相反的方式构建它（除非您的实际目标是仅了解geometryReader有效）：

struct ExampleView: View {
    @State private var width: CGFloat = 50

    var body: some View {
        VStack {
            let minWidth: CGFloat = 120
            let subViewWidth: CGFloat = max(minWidth, width)
            SubView(desiredWidth: width)
                .frame(width: subViewWidth, height: 120)
                .background(.yellow.opacity(0.6))

            Text("Offered Width is \(Int(width))")
            Slider(value: $width, in: 0...200, step: 5)
        }
    }
}

struct SubView: View {
    let desiredWidth: CGFloat
    var body: some View {
        Rectangle()
            .fill(.clear)
            .border(Color.blue, width: 2)
            .frame(width: desiredWidth, height: nil)
    }
}

在此示例中而内部矩形只需在滑块上设置任何宽度。它还不再需要deegomeReader。它的外观和行为相同，但没有任何视图超过其父母的界限。