SwiftUI 简明教程之自定义对齐方式

本文为 eul 样章，如果您喜欢，请移步 appstore/eul 查看更多内容。

eul 是一款 swiftui & combine 教程 app（ios、macos），以文章（文字、图片、代码）配合真机示例（xcode 12+、ios 14+，macos 11+）的形式呈现给读者。笔者意在尽可能使用简洁明了的语言阐述 swiftui & combine 相关的知识，使读者能快速掌握并在 ios 开发中实践。

重写 alignmentguide

swiftui 为我们提供了多种默认的对齐方式，如 .top，.bottom，.center 等。如下是将苹果的 logo 和 文字 “apple” 对齐的代码：

hstack(alignment: .bottom) {
  image(systemname: "applelogo")
    .font(.largetitle)
  text("apple")
}

如果我们想把文字 “apple” 往上移动一些，换言之，文字的底部略高于于 logo 的底部。可以通过重写 alignmentguide 实现：

hstack(alignment: .bottom) {
  image(systemname: "applelogo")
    .font(.largetitle)
    .alignmentguide(.bottom, computevalue: { d in d[.bottom] - 5})
  text("apple")
}

computevalue 闭包中返回的是一个 viewdimensions 结构体实例，它有 height、width 属性供我们使用，还可以通过下标获取指定的对齐方式。

上例我们简单演示了重写 alignmentguide 的方法。当然，对于这种简单的情况，我们还可以使用 offset 实现：

hstack(alignment: .bottom) {
  image(systemname: "applelogo")
    .font(.largetitle)
    .offset(x: 0, y: 5)
  text("apple")
}

自定义 alignmentguide

vstack {
  hstack {
    text("手机")
    text("155********")
  }
  
  hstack {
    text("电子邮箱")
    text("[e-mail]")
  }
}

如上是一个常见的界面，通常我们会使手机和邮箱右对齐（或者第二列的文字左对齐），通过系统默认的对齐方式，是无法实现的，我们需要自定义 alignmentguide：

extension horizontalalignment {
  struct customalignment: alignmentid {
    static func defaultvalue(in context: viewdimensions) -> cgfloat {
      return context[.trailing]
    }
  }
  
  static let custom = horizontalalignment(customalignment.self)
}

通过实现 alignmentid 协议的方法，我们指定自定义的对齐方式为尾部对齐，然后我们使用自定义的对齐方式：

vstack(alignment: .custom) {
  hstack {
    text("手机")
      .alignmentguide(.custom, computevalue: { $0[.trailing] })
    text("155********")
      
  }
  
  hstack {
    text("电子邮箱")
      .alignmentguide(.custom, computevalue: { $0[.trailing] })
    text("[e-mail]")
  }
}

看看示例所示的效果，与我们的预期是一致的。

本文为 eul 样章，如果您喜欢，请移步 appstore/eul 查看更多内容。