填充 SwiftUI 框架的内部？

Posted 2023-02-24

【中文标题】填充 SwiftUI 框架的内部？

【英文标题】：Pad the inside of a SwiftUI frame?

【发布时间】：2021-02-15 20:55:34

【问题描述】：

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

既然我已经让这两个漂亮的框架按照我想要的方式工作了，那么在框架内移动文本的技术是什么。如何将“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()

【问题讨论】：

类似Text("Left").padding(.leading, 20)（未测试）。

【参考方案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()

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

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返回的宽度。