SwiftUI框架详细解析（二十九） —— 基于SwiftUI

2022-02-23 本文已影响0人刀客传奇

版本记录

版本号	时间
V1.0	2022.02.23 星期三

前言

今天翻阅苹果的API文档，发现多了一个框架SwiftUI，这里我们就一起来看一下这个框架。感兴趣的看下面几篇文章。
1. SwiftUI框架详细解析（一） —— 基本概览（一）
2. SwiftUI框架详细解析（二） —— 基于SwiftUI的闪屏页的创建（一）
3. SwiftUI框架详细解析（三） —— 基于SwiftUI的闪屏页的创建（二）
4. SwiftUI框架详细解析（四） —— 使用SwiftUI进行苹果登录（一）
5. SwiftUI框架详细解析（五） —— 使用SwiftUI进行苹果登录（二）
6. SwiftUI框架详细解析（六） —— 基于SwiftUI的导航的实现（一）
7. SwiftUI框架详细解析（七） —— 基于SwiftUI的导航的实现（二）
8. SwiftUI框架详细解析（八） —— 基于SwiftUI的动画的实现（一）
9. SwiftUI框架详细解析（九） —— 基于SwiftUI的动画的实现（二）
10. SwiftUI框架详细解析（十） —— 基于SwiftUI构建各种自定义图表（一）
11. SwiftUI框架详细解析（十一） —— 基于SwiftUI构建各种自定义图表（二）
12. SwiftUI框架详细解析（十二） —— 基于SwiftUI创建Mind-Map UI（一）
13. SwiftUI框架详细解析（十三） —— 基于SwiftUI创建Mind-Map UI（二）
14. SwiftUI框架详细解析（十四） —— 基于Firebase Cloud Firestore的SwiftUI iOS程序的持久性添加（一）
15. SwiftUI框架详细解析（十五） —— 基于Firebase Cloud Firestore的SwiftUI iOS程序的持久性添加（二）
16. SwiftUI框架详细解析（十六） —— 基于SwiftUI简单App的Dependency Injection应用（一）
17. SwiftUI框架详细解析（十七） —— 基于SwiftUI简单App的Dependency Injection应用（二）
18. SwiftUI框架详细解析（十八） —— Firebase Remote Config教程（一）
19. SwiftUI框架详细解析（十九） —— Firebase Remote Config教程（二）
20. SwiftUI框架详细解析（二十） —— 基于SwiftUI的Document-Based App的创建（一）
21. SwiftUI框架详细解析（二十一） —— 基于SwiftUI的Document-Based App的创建（二）
22. SwiftUI框架详细解析（二十二） —— 基于SwiftUI的AWS AppSync框架的使用（一）
23. SwiftUI框架详细解析（二十三） —— 基于SwiftUI的AWS AppSync框架的使用（二）
24. SwiftUI框架详细解析（二十四） —— 基于SwiftUI的编辑占位符的使用（一）
25. SwiftUI框架详细解析（二十五） —— 基于SwiftUI的编辑占位符的使用（二）
26. SwiftUI框架详细解析（二十六） —— 基于SwiftUI和Xcode12的Multiplatform App的搭建（一）
27. SwiftUI框架详细解析（二十七） —— 基于SwiftUI和Xcode12的Multiplatform App的搭建（二）
28. SwiftUI框架详细解析（二十八） —— 基于SwiftUI的文字识别（一）

开始

首先看下工程组织结构

下面就是源码了

1. AppMain.swift

import SwiftUI

@main
struct AppMain: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

2. ContentView.swift

import SwiftUI

struct ContentView: View {
  @State private var showAddPerson = false
  @StateObject private var people = PersonStore()

  var body: some View {
    NavigationView {
      List(people.persons) { person in
        VStack(alignment: .leading) {
          Text(person.name)
            .font(.largeTitle)
          HStack {
            Text("Birthday " + person.birthday)
            Text(person.birthdate.formatted(
              .relative(
                presentation: .named,
                unitsStyle: .wide)))
          }
        }
      }
      .sheet(isPresented: $showAddPerson) {
        AddPersonView(people: people)
      }
      .navigationTitle("Wait For It")
      .toolbar {
        ToolbarItem {
          // swiftlint:disable:next multiple_closures_with_trailing_closure
          Button(action: { showAddPerson.toggle() }) {
            Image(systemName: "plus.circle")
              .font(.title)
          }
        }
      }
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

3. AddPersonView.swift

import SwiftUI

struct AddPersonView: View {
  @Environment(\.dismiss) var dismiss
  @State private var name = ""
  @State private var birthday = ""
  @ObservedObject var people: PersonStore
  @State private var title = "Add a Person"

  var body: some View {
    NavigationView {
      VStack {
        HStack {
          TextField("Name", text: $name)
          ScanButton(text: $name, title: $title)
            .frame(width: 56, height: 56, alignment: .leading)
        }
        TextField("Birthday: Mmm dd", text: $birthday)
          .textContentType(.dateTime)
          .toolbar {
            ToolbarItemGroup(placement: .keyboard) {
              Spacer()
              ScanButton(text: $birthday, title: .constant(title))
            }
          }
        Button("Done") {
          if !name.isEmpty {
            let newPerson = Person(name: name, birthday: birthday)
            people.persons.append(newPerson)
          }
          dismiss()
        }
        Spacer()
      }
      .navigationTitle(title)
      .disableAutocorrection(true)
      .textFieldStyle(RoundedBorderTextFieldStyle())
      .padding()
    .environment(\.textCase, nil)
    }
  }
}

struct AddPersonView_Previews: PreviewProvider {
  static var previews: some View {
    AddPersonView(people: PersonStore())
  }
}

4. ScanButton.swift

import SwiftUI

struct ScanButton: UIViewRepresentable {
  @Binding var text: String
  @Binding var title: String

  func makeUIView(context: Context) -> UIButton {
    let textFromCamera = UIAction.captureTextFromCamera(
      responder: context.coordinator,
      identifier: nil)
    let button = UIButton()
    button.setImage(
      UIImage(systemName: "camera.badge.ellipsis"),
      for: .normal)
    button.menu = UIMenu(children: [textFromCamera])
    return button
  }

  func updateUIView(_ uiView: UIButton, context: Context) { }

  func makeCoordinator() -> Coordinator {
    Coordinator(self)
  }

  class Coordinator: UIResponder, UIKeyInput {
    let parent: ScanButton
    init(_ parent: ScanButton) { self.parent = parent }

    var hasText = false
    func insertText(_ text: String) {
      parent.text = text
      parent.title = "Add \(text)"
    }
    func deleteBackward() { }
  }
}

struct ScanButton_Previews: PreviewProvider {
  static var previews: some View {
    ScanButton(text: .constant(""), title: .constant(""))
      .previewLayout(.sizeThatFits)
  }
}

5. Person.swift

import SwiftUI

final class PersonStore: ObservableObject {
  @Published var persons: [Person] = [Person(name: "Audrey", birthday: "Nov 26")]
}

struct Person: Identifiable {
  let id = UUID()
  let name: String
  let birthday: String
  var birthdate: Date {
    Person.dateFrom(birthday)
  }

  static let dateFormatter: DateFormatter = {
    let dateFormatter = DateFormatter()
    dateFormatter.dateFormat = "MMM dd yyyy"
    return dateFormatter
  }()

  static func dateFrom(_ dayString: String) -> Date {
    let dateString = dayString + " " + Date.now.formatted(.dateTime.year())
    if let date = Person.dateFormatter.date(from: dateString) {
      if date < .now {
        var dateComponent = DateComponents()
        dateComponent.year = 1
        return Calendar.current.date(byAdding: dateComponent, to: date) ?? .now
      }
      return date
    }
    return .now
  }
}

后记

本篇主要讲述了基于SwiftUI的文字识别，感兴趣的给个赞或者关注~~~

SwiftUI框架详细解析（二十九） —— 基于SwiftUI

版本记录

前言

开始

后记

猜你喜欢

热点阅读

SwiftUI框架详细解析 （二十九） —— 基于SwiftUI

版本记录

前言

开始

后记

猜你喜欢

热点阅读

SwiftUI框架详细解析（二十九） —— 基于SwiftUI