衬垫内部的SwiftUI框架？

Question

是否可以使用SwiftUI在此截图中填充左右文本？如果这是HTML，我会在CSS中使用padding-left和padding-right。唉，SwiftUI需要一种不同的思维方式。

​

​

现在我已经有了这两个很好的框架，按照我想要的方式工作，在框架内移动文本的技术是什么。怎么能把“左”稍微推到右边，把它从左边的边缘移开，给它一些好的视觉空间呢？同样的技术也可以相反地应用于“右”文本。

GeometryReader { geometry in
  HStack(spacing: 0) {
    Text("Left")
      .frame(width: geometry.size.width * 0.33, height: 50, alignment: .leading)
      .background(Color.yellow)
    Text("Right")
      .frame(width: geometry.size.width * 0.67, height: 50, alignment: .trailing)
      .background(Color.orange)
  }
}
.padding()

Answer 1

在SwiftUI中，修饰符的顺序很重要。请参见：

• Order of modifiers in SwiftUI view impacts view appearance

在下面的代码中，首先将.background(Color.yellow)应用于整个GeometryReader，然后将.padding()应用于整个GeometryReader。这意味着填充在Text("Left")之外。

GeometryReader { geometry in
  HStack(spacing: 0) {
    Text("Left")
      .frame(width: geometry.size.width * 0.33, height: 50, alignment: .leading)
      .background(Color.yellow)
    Text("Right")
      .frame(width: geometry.size.width * 0.67, height: 50, alignment: .trailing)
      .background(Color.orange)
  }
}
.padding()

您需要的是在padding视图之后添加Text：

GeometryReader { geometry in
  HStack(spacing: 0) {
    Text("Left")
      .padding(.leading) // add here
      .frame(width: geometry.size.width * 0.33, height: 50, alignment: .leading)
      .background(Color.yellow)
    Text("Right")
      .padding(.trailing) // add here
      .frame(width: geometry.size.width * 0.67, height: 50, alignment: .trailing)
      .background(Color.orange)
  }
}
.padding()

请注意，您可以指定填充的方向(例如.padding(.trailing))以及偏移量。

.padding(.trailing, 10)

还请注意，您需要在frame之前添加填充-否则视图的总宽度将是：

0.33 * GeometryReader width + 0.67 * GeometryReader width + width of `.padding(.leading)` + width of `.padding(.trailing)`

它将超过GeometryReader返回的宽度。