4

红色边框是几何区域，黑色边框是文本区域

目前使用 Xcode12 Beta 3

struct Testing_Geometry_: View {
    var body: some View {
        GeometryReader { geo in
            Text("Hello, World!")
                .border(Color.black)
        }
        .border(Color.red)
    }
}

我想用这段代码将文本放在中心

struct Testing_Geometry_: View {
    var body: some View {
        GeometryReader { geo in
            Text("Hello, World!")
                .position(x:geo.frame(in:.global).midX,y:geo.frame(in:.global).midY)
                .border(Color.black)
        }
        .border(Color.red)
    }
}

但我得到了这个结果，这意味着文本占用了整个几何尺寸，我认为这是不正确的！因为文本必须适合它们的空间

@twostraws 为布局系统建议的三个角色是

1-父母提供其大小

2-child 选择它的大小

3-parent 定位它的孩子

但我认为这是不对的！

文本占据了整个几何空间

4

2 回答 2

10

如果有人正在寻找基本解决方案，您可以将其放在 Stack 之一中，并使其使用具有对齐中心的几何尺寸的整个尺寸。这将使下面的所有元素都使用正确的大小并居中对齐

GeometryReader { geometry in
    ZStack {
        // ... some of your views
    }
    .frame(width: geometry.size.width, height: geometry.size.height, alignment: .center)
}
于 2020-09-29T17:57:47.390 回答
1

问题是修饰符顺序很重要，因为修饰符实际上创建了父视图。我使用背景而不是边框​​，因为我认为它们更容易看到。考虑一下与您的代码相同但仅使用背景的代码：

struct TestingGeometryView: View {
    var body: some View {
        GeometryReader { geo in
            Text("Hello, World!")
                .position(x:geo.frame(in:.global).midX,y:geo.frame(in:.global).midY)
                .background(Color.gray)
        }
        .background(Color.red)
    }
}

这给出了以下内容：

Xcode 预览

从这里你在想“文本占用了整个几何尺寸，我认为这是不正确的！” 因为灰色背景占据了整个屏幕，而不是围绕文本。同样，问题是修饰符顺序-背景（或示例中的边框）是父视图，但您将其设为“位置”视图而不是文本视图的父视图。为了让位置做它所做的事情，它需要整个可用的父空间（在这种情况下是整个屏幕减去安全区域）。因此，将背景或边框作为位置的父级意味着它们将占据整个屏幕。

让我们将顺序切换到这个，以便背景视图仅用于文本视图，我们可以看到文本视图的大小：

struct TestingGeometryView: View {
    var body: some View {
        GeometryReader { geo in
            Text("Hello, World!")
                .background(Color.gray)
                .position(x:geo.frame(in:.global).midX,y:geo.frame(in:.global).midY)
        }
        .background(Color.red)
    }
}

这给出了我认为您期望的结果，文本视图仅占用所需的最小大小，并遵循@twostraws 很好解释的那些规则。

Xcode 预览如预期

这就是修饰符顺序如此重要的原因。很明显，GeometryReader 视图占据了整个屏幕，而 Text 视图只占据了它需要的空间。在您的示例中，文本视图仍然只占用所需的空间，但您的边框围绕位置视图，而不是文本视图。希望很清楚:-)

于 2020-09-19T16:35:03.280 回答