实战需求

SwiftUI 布局之如何让一个组件居中另外一个组件向上偏移？

本文价值与收获

看完本文后，您将能够作出下面的界面

看完本文您将掌握的技能

• 掌握alignmentGuide基础使用
• 掌握绘制直角坐标系方法
• 实现自定义布局
  

  ---

  基础知识

  alignmentGuide(_:computeValue:)

  设置视图的水平对齐方式。

  func alignmentGuide(_ g: HorizontalAlignment, computeValue: @escaping (ViewDimensions) -> CGFloat) -> some View

  介绍

  alignmentGuide 功能强大但通常未充分使用的布局工具,在许多情况下，它们可以帮助我们避免使用更复杂的布局工具。aligmentGuide基本上是一个数值。它在视图中设置一个点，该点确定如何相对于其他兄弟姐妹定位它。请注意，路线可以是垂直或水平的。

返回值

根据在方法的关闭过程中执行的计算，针对其水平对齐方式修改的视图。

参量

• g
  在其处的偏移。HorizontalAlignment

• computeValue
  一个闭包，它返回偏移值以应用于此视图。

讨论区

使用以计算具体偏移复位意见，关系到彼此。您可以返回常量，也可以使用闭包的参数来计算返回值。alignmentGuide(_:computeValue:)ViewDimensions

在下面的示例中，HStack偏心于中心右边50个点：

VStack {
    Text("Today's Weather")
        .font(.title)
        .border(Color.gray)
    HStack {
        Text("🌧")
        Text("Rain & Thunderstorms")
        Text("⛈")
    }
    .alignmentGuide(HorizontalAlignment.center) { _ in  50 }
    .border(Color.gray)
}
.border(Color.gray)

更改一个视图的对齐方式可能会影响周围的视图。这里，堆栈及其包含的视图中的偏移值是它们的绝对偏移之差。

---

全文地址

CSDN:

• SwiftUI 布局之alignmentGuide如何让一个组件居中另外一个组件向上偏移(教程含源码)

小专栏：

• SwiftUI 布局之alignmentGuide如何让一个组件居中另外一个组件向上偏移(教程含源码)

---

加入我们一起学习SwiftUI

QQ:3365059189
SwiftUI技术交流QQ群:518696470