小编Giu*_*Dev的帖子

我想显示一个数学分数。为此，我有一个 VStack，其中包含分子视图（称为 ContainerView）、用作分数线的矩形和分母视图（与分子相同类型）。由于分数是可编辑的，因此分子和分母的大小可以改变，并且分数线必须相应地适应。我的第一次尝试是将分数线放在背景中，并使用几何阅读器仅根据分子和分母的大小来获取分数的框架。这样分数线就在背景的中心，大小是我想要的。这是代码：

struct FractionView: View {\n\n@EnvironmentObject var buffer: Buffer\nvar numeratorBufferIndex: Int\nvar denominatorBufferIndex: Int\n\nvar body: some View {\n    VStack(alignment: .center, spacing: 0) {\n        ContainerView(activeBufferIndex: numeratorBufferIndex)\n            .environmentObject(self.buffer)\n        \n        ContainerView(activeBufferIndex: denominatorBufferIndex)\n            .environmentObject(self.buffer)\n    }\n    .background(GeometryReader { geometry in\n        Rectangle()\n            .frame(width: geometry.frame(in: .local).width, height: 2)\n            .foregroundColor(Color(.systemGray))\n    })\n}\n}\n

这三个属性用于渲染分子和分母。结果是这样的。\n但是，由于它在后台，所以它不知道分子和分母的高度。当它们具有不同的大小时，就像在本例中一样，这会产生问题。在图像中，您可以看到分子中有另一个分数，因此其视图的高度更大。这会导致问题，因为第一条分数线穿过分子的一部分。

为了避免这种情况，我认为最好的方法是将分数线直接放在主 VStack 中，这样它就会除分子和分母而不关心它们的高度。然而，矩形形状占用了所有可用空间，我不知道如何将其宽度限制为父级的宽度。这是新代码及其外观：

struct FractionView: View {\n\n@EnvironmentObject var buffer: Buffer\nvar numeratorBufferIndex: Int\nvar denominatorBufferIndex: Int\n\nvar body: some View {\n    VStack(alignment: .center, spacing: 0) {\n        ContainerView(activeBufferIndex: numeratorBufferIndex)\n            .environmentObject(self.buffer)\n …