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("xxxxxx@gmail.com")
  }
}

如上是一个常见的界面,通常我们会使手机和邮箱右对齐(或者第二列的文字左对齐),通过系统默认的对齐方式,是无法实现的,我们需要自定义 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("xxxxxx@gmail.com")
  }
}

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

本文为 Eul 样章,如果您喜欢,请移步 AppStore/Eul 查看更多内容。

posted @ 2021-06-21 20:32  Bruce2077  阅读(885)  评论(0编辑  收藏  举报