SwiftUI框架詳細(xì)解析（二十八） —— 基于SwiftUI的文字識(shí)別（一）

版本記錄

版本號(hào)	時(shí)間
V1.0	2022.02.23 星期三

前言

今天翻閱蘋果的API文檔，發(fā)現(xiàn)多了一個(gè)框架SwiftUI捻激，這里我們就一起來看一下這個(gè)框架檩赢。感興趣的看下面幾篇文章。
1. SwiftUI框架詳細(xì)解析（一） —— 基本概覽（一）
2. SwiftUI框架詳細(xì)解析（二） —— 基于SwiftUI的閃屏頁的創(chuàng)建（一）
3. SwiftUI框架詳細(xì)解析（三） —— 基于SwiftUI的閃屏頁的創(chuàng)建（二）
4. SwiftUI框架詳細(xì)解析（四） —— 使用SwiftUI進(jìn)行蘋果登錄（一）
5. SwiftUI框架詳細(xì)解析（五） —— 使用SwiftUI進(jìn)行蘋果登錄（二）
6. SwiftUI框架詳細(xì)解析（六） —— 基于SwiftUI的導(dǎo)航的實(shí)現(xiàn)（一）
7. SwiftUI框架詳細(xì)解析（七） —— 基于SwiftUI的導(dǎo)航的實(shí)現(xiàn)（二）
8. SwiftUI框架詳細(xì)解析（八） —— 基于SwiftUI的動(dòng)畫的實(shí)現(xiàn)（一）
9. SwiftUI框架詳細(xì)解析（九） —— 基于SwiftUI的動(dòng)畫的實(shí)現(xiàn)（二）
10. SwiftUI框架詳細(xì)解析（十） —— 基于SwiftUI構(gòu)建各種自定義圖表（一）
11. SwiftUI框架詳細(xì)解析（十一） —— 基于SwiftUI構(gòu)建各種自定義圖表（二）
12. SwiftUI框架詳細(xì)解析（十二） —— 基于SwiftUI創(chuàng)建Mind-Map UI（一）
13. SwiftUI框架詳細(xì)解析（十三） —— 基于SwiftUI創(chuàng)建Mind-Map UI（二）
14. SwiftUI框架詳細(xì)解析（十四） —— 基于Firebase Cloud Firestore的SwiftUI iOS程序的持久性添加（一）
15. SwiftUI框架詳細(xì)解析（十五） —— 基于Firebase Cloud Firestore的SwiftUI iOS程序的持久性添加（二）
16. SwiftUI框架詳細(xì)解析（十六） —— 基于SwiftUI簡(jiǎn)單App的Dependency Injection應(yīng)用（一）
17. SwiftUI框架詳細(xì)解析（十七） —— 基于SwiftUI簡(jiǎn)單App的Dependency Injection應(yīng)用（二）
18. SwiftUI框架詳細(xì)解析（十八） —— Firebase Remote Config教程（一）
19. SwiftUI框架詳細(xì)解析（十九） —— Firebase Remote Config教程（二）
20. SwiftUI框架詳細(xì)解析（二十） —— 基于SwiftUI的Document-Based App的創(chuàng)建（一）
21. SwiftUI框架詳細(xì)解析（二十一） —— 基于SwiftUI的Document-Based App的創(chuàng)建（二）
22. SwiftUI框架詳細(xì)解析（二十二） —— 基于SwiftUI的AWS AppSync框架的使用（一）
23. SwiftUI框架詳細(xì)解析（二十三） —— 基于SwiftUI的AWS AppSync框架的使用（二）
24. SwiftUI框架詳細(xì)解析（二十四） —— 基于SwiftUI的編輯占位符的使用（一）
25. SwiftUI框架詳細(xì)解析（二十五） —— 基于SwiftUI的編輯占位符的使用（二）
26. SwiftUI框架詳細(xì)解析（二十六） —— 基于SwiftUI和Xcode12的Multiplatform App的搭建（一）
27. SwiftUI框架詳細(xì)解析（二十七） —— 基于SwiftUI和Xcode12的Multiplatform App的搭建（二）

開始

首先看下主要內(nèi)容：

了解如何將 iPhone 攝像頭中的文本捕捉到您的 SwiftUI 應(yīng)用程序中宴猾，以便您的用戶可以更快速陡舅、更輕松地輸入數(shù)據(jù)抵乓。內(nèi)容來自翻譯。

接著看下寫作環(huán)境：

Swift 5.5, iOS 15, Xcode 13

下面就是正文了

您的 iPhone 相機(jī)可以讓您捕捉風(fēng)景靶衍、人物和事件灾炭，但它也是一個(gè)有用的信息收集工具。您會(huì)看到一張音樂會(huì)海報(bào)或您需要的服務(wù)的廣告或一家看起來很有趣的餐廳颅眶，然后拍照蜈出。稍后，您在搜索引擎或新聯(lián)系人中鍵入或說出照片中的一些文本（URL涛酗、日期铡原、電話號(hào)碼）。

但是鍵盤或語音輸入很容易出錯(cuò)商叹，要是您可以從照片或直接從相機(jī)視圖中復(fù)制和粘貼文本該多好燕刻？更好的是，要是您可以將照片或相機(jī)視圖中的文本直接掃描到您的應(yīng)用程序中會(huì)怎樣剖笙？熱烈歡迎 iOS 15實(shí)時(shí)文本卵洗！

在本教程中，您將學(xué)習(xí)如何將 iPhone 相機(jī)中的文本捕獲到您的 SwiftUI應(yīng)用程序中弥咪，讓您的用戶更快速过蹂、更輕松地輸入數(shù)據(jù)。

注意：您應(yīng)該熟悉使用 SwiftUI酪夷、Swift 和 Xcode 開發(fā) iOS 應(yīng)用程序。您需要 Xcode 13 和運(yùn)行 iOS 15 的 iPhone孽惰。您的 iPhone 必須是 2018 年或之后生產(chǎn)的晚岭，因此它具有 A12（或更高版本）神經(jīng)引擎(Neural Engine)。其首選語言列表必須至少包括以下語言之一：英語勋功、西班牙語坦报、中文、法語狂鞋、意大利語片择、德語、葡萄牙語骚揍。并檢查您所在地區(qū)的此列表check this list for your region字管。

iOS 15 Live Text

精彩的新 iOS 15 實(shí)時(shí)文本功能開箱即用啰挪，并且僅適用于上述注釋中列出的語言和地區(qū)。

您需要一部新的 (2018+) iPhone嘲叔，配備 A12 或更高版本的神經(jīng)引擎亡呵。 Live Text 使用 Apple 的 Vision 機(jī)器學(xué)習(xí)模型，該模型需要神經(jīng)引擎硫戈。

Live Text 適用于iPhone XS, iPhone XR and later锰什。這些 iPhone 不支持實(shí)時(shí)文本：iPhone SE（第一代）、iPhone 6S丁逝、iPhone 6S Plus汁胆、iPhone 7、iPhone 7 Plus 和 iPhone X霜幼。

Live Text 可以在 2018 年或之后的 iPad 上的照片中使用嫩码，但在 iPad 相機(jī)上則不行not iPad Camera。這篇文章是關(guān)于使用帶有相機(jī)的實(shí)時(shí)文本辛掠，所以它只是關(guān)于 iPhone谢谦。

現(xiàn)在拿起你的 iPhone 并確保 Live Text 已打開：在 Settings 中，打開 Camera ? Live Text 和 General ? Language & Region ? Live Text：

注意：如果您沒有看到這些設(shè)置萝衩，則您的 iPhone 沒有神經(jīng)引擎回挽。如果您正在尋找購買 iPhone 13 的借口，那這個(gè)接口就不錯(cuò)猩谊！

1. Live Text in Photos

實(shí)時(shí)文本檢測(cè)照片和Camera ? Photo取景器中的文本千劈。在本教程中，您將使用 iPhone 的相機(jī)牌捷。但首先墙牌，看看它在您現(xiàn)有的照片上有多棒。在手持相機(jī)視圖中沒有移動(dòng)的圖像上使用實(shí)時(shí)文本也更容易練習(xí)暗甥。

打開照片并找到包含一些文字的照片喜滨，尤其是 URL、電話號(hào)碼撤防、電子郵件或街道地址虽风。

我有這張我在yarn expo上拍的照片，作為提醒我以后想查找的供應(yīng)商寄月。

我點(diǎn)擊了Live Text按鈕（取景器正方形中的三行）辜膝；它變成了藍(lán)色。然后我點(diǎn)擊了 tarndie.com漾肮，他們的網(wǎng)頁在 Safari 中打開了厂抖！

如果您的照片中有地圖地址，點(diǎn)擊它會(huì)打開地圖Maps克懊。點(diǎn)擊電話號(hào)碼會(huì)顯示呼叫忱辅、發(fā)送消息七蜘、FaceTime 等常用菜單。

如果有一個(gè)電子郵件地址耕蝉，點(diǎn)擊它會(huì)在您的電子郵件應(yīng)用程序中打開一條新消息崔梗。

如果您想從不允許您選擇文本的應(yīng)用程序中復(fù)制文本，只需截取屏幕截圖并打開預(yù)覽照片：

注意：感謝 Harshil Shah 發(fā)推文tweeting垒在。截屏來自 Chris Wu 的Museum Shuffle蒜魄。

Live Text在相機(jī)Camera應(yīng)用程序中的原理相同，但您需要穩(wěn)定的手场躯。如果你不能讓它專注于你想要的東西谈为，只需拍張照片，然后使用Live Text踢关。

現(xiàn)在繼續(xù)閱讀以了解如何在應(yīng)用程序中使用Live Text伞鲫。

打開demo文件夾，在 starter 文件夾中打開 WaitForIt 項(xiàng)目签舞。這是一個(gè)簡(jiǎn)單的應(yīng)用程序秕脓，您可以在其中記錄您需要等待某人生日的時(shí)間。它使用新的 Date.RelativeFormatStyle 方法 relative(presentation:unitsStyle:)儒搭。

要獲得相機(jī)輸入吠架，您必須在您的 iPhone-with-Neural-Engine 上運(yùn)行此應(yīng)用程序。

2. Build and Run on Your Device

使用電線將 iPhone 連接到 Mac搂鲫。在target的 Signing & Capabilities 選項(xiàng)卡中傍药，自定義 Bundle Identifier 并設(shè)置 Team。

從運(yùn)行目標(biāo)菜單中選擇您的 iPhone魂仍，然后構(gòu)建并運(yùn)行拐辽。

以這種格式寫下或輸入您的姓名和生日：

相機(jī)輸入適用于手寫，但根據(jù)我的經(jīng)驗(yàn)擦酌，書寫需要非常清晰俱诸，更像是仔細(xì)打印而不是草書。

點(diǎn)擊 + 按鈕赊舶。在 Add Person 視圖中睁搭，點(diǎn)擊 Name的text field，然后再次點(diǎn)擊它以顯示 Scan Text 按鈕：

注意：您可能只會(huì)在粘貼按鈕旁邊看到掃描按鈕圖標(biāo)锯岖。這往往會(huì)在您使用掃描按鈕幾次之后發(fā)生介袜，并且系統(tǒng)決定您不再需要文本標(biāo)簽甫何。

點(diǎn)擊此按鈕打開相機(jī)并將相機(jī)對(duì)準(zhǔn)您的姓名和生日文本：

檢測(cè)到的文本周圍出現(xiàn)括號(hào)出吹，檢測(cè)到的文本也出現(xiàn)在text field中。括號(hào)和text field文本可以隨著您的手移動(dòng)相機(jī)而改變辙喂，檢測(cè)不同數(shù)量的文本捶牢。

您可以點(diǎn)擊以指示您希望相機(jī)聚焦的位置鸠珠，您可以在相機(jī)視圖上向上拖動(dòng)以放大它：

如果您只想要部分檢測(cè)到的文本，請(qǐng)點(diǎn)擊右下角的掃描按鈕以顯示文本：

然后點(diǎn)擊或滑動(dòng)以從檢測(cè)到的文本中選擇您想要的內(nèi)容：

然后點(diǎn)擊Insert以接受您選擇的文本：

現(xiàn)在以相同的方式添加生日文本秋麸，然后點(diǎn)擊Done返回列表視圖：

3. It’s Magic

現(xiàn)在查看 AddPersonView.swift 中的代碼渐排。代碼中絕對(duì)沒有關(guān)于從相機(jī)掃描文本的內(nèi)容。此功能是 iOS 15 的一部分灸蟆，您可以在任何可編輯的視圖中免費(fèi)使用驯耻。

那么這篇文章的其余部分是什么？改善用戶體驗(yàn)的幾個(gè)功能：

針對(duì)特定文本內(nèi)容類型（如日期炒考、電話號(hào)碼和電子郵件地址）過濾相機(jī)輸入可缚。
顯示Scan Text按鈕以使您的用戶可以看到相機(jī)輸入功能。

您還可以實(shí)現(xiàn)Scan Text按鈕來創(chuàng)建不是text field or text view的可編輯視圖斋枢，例如WWDC presentation帘靡。

Filtering Text Content Types

您可能對(duì)這種掃描、點(diǎn)擊過程有點(diǎn)不知所措瓤帚。如果您的應(yīng)用正在尋找特定格式的信息——URL描姚、日期、電子郵件或電話號(hào)碼——您希望相機(jī)僅“看到”相關(guān)文本而忽略其余文本戈次。

您的應(yīng)用程序可能已經(jīng)指定了鍵盤到了類型轩勘，以便用戶更方便地輸入數(shù)字或電子郵件地址。也許您還指定文本內(nèi)容類型來指導(dǎo)鍵盤的建議和自動(dòng)填充朝扼。

好消息：您可以使用文本內(nèi)容類型來過濾相機(jī)文本輸入赃阀！

1. Filtering Date Text

首先將此修飾符添加到 AddPersonView.swift 中的second (Birthday) TextField：

.textContentType(.dateTime)

這告訴系統(tǒng)您希望輸入文本是某種形式的日期、時(shí)間或持續(xù)時(shí)間擎颖。神經(jīng)引擎的Vision模型將使用此提示來過濾相機(jī)的日期或時(shí)間文本輸入榛斯。

有幾種與人名相關(guān)的文本內(nèi)容類型，那么為什么不修改Name text field呢搂捧？好吧驮俗，目前，相機(jī)輸入僅適用于少數(shù)文本內(nèi)容類型允跑。

在屬性檢查器文本內(nèi)容類型菜單中的所有Text Content Type中王凑，相機(jī)當(dāng)前僅過濾 fullStreetAddress、telephoneNumber聋丝、emailAddress索烹、URL、shippingTrackingNumber弱睦、flightNumber 和 dateTime百姓。

好的，是時(shí)候看看你的修飾符是否有幫助况木。

在您的設(shè)備上構(gòu)建并運(yùn)行垒拢，然后點(diǎn)擊 + 按鈕旬迹。在Add Person視圖中，點(diǎn)擊Birthday text field 求类，然后再次點(diǎn)擊它：

注意：與Scan Text按鈕標(biāo)簽一樣奔垦，您可能會(huì)看到Paste | scan-button-icon圖標(biāo)而不是Scan Date or Time。日期過濾器仍然有效尸疆。

現(xiàn)在相機(jī)只突出顯示與日期或時(shí)間相關(guān)的文本：

和以前一樣椿猎，任何檢測(cè)到的日期或時(shí)間文本都會(huì)立即出現(xiàn)在text field中。您仍然必須點(diǎn)擊Insert以接受文本寿弱。

從相機(jī)加速文本輸入的好方法鸵贬！

注意：我添加了一個(gè)電子郵件地址來試用該文本內(nèi)容類型。如果將 dateTime 更改為 emailAddress脖捻，相機(jī)將只關(guān)注電子郵件地址阔逼。

Display a Camera Button

到目前為止，所有內(nèi)容都內(nèi)置在 iOS 15 中地沮。但您也可以將相關(guān)代碼添加到您的應(yīng)用程序中嗜浮。

例如，為了讓您的用戶更容易看到相機(jī)輸入功能摩疑，您可以添加一個(gè)按鈕來設(shè)置整個(gè)神奇過程危融。一旦您知道魔法是如何發(fā)生的，您就可以使用它將來自相機(jī)的文本掃描到不是text fields or text views的視圖中雷袋。

1. Magic Method

新方法 captureTextFromCamera(responder:identifier:)是魔法的關(guān)鍵吉殃，它在您的應(yīng)用調(diào)用此方法啟動(dòng)相機(jī)時(shí)開始。響應(yīng)者必須遵循 UIResponder 和 UIKeyInput楷怒。響應(yīng)者使用 UIKeyInput 方法來實(shí)現(xiàn)簡(jiǎn)單的文本輸入蛋勺。

哦，UI 前綴……確實(shí)鸠删，captureTextFromCamera(responder:identifier:) 是一個(gè) UIAction抱完，所以你需要一個(gè) UIView來調(diào)用它。您將創(chuàng)建一個(gè) AddPersonView 可以顯示的 UIButton刃泡。您將將此按鈕的操作設(shè)置為 captureTextFromCamera(responder:identifier:)巧娱。并且動(dòng)作的responder將從相機(jī)捕獲的任何文本傳遞到 AddPersonView 中的 TextField。

2. UIViewRepresentable

要?jiǎng)?chuàng)建可以在 SwiftUI 應(yīng)用程序中使用的 UIView烘贴，您需要構(gòu)建一個(gè)符合 UIViewRepresentable 的結(jié)構(gòu)禁添。

注意：在 SwiftUI Apprentice 和 SwiftUI by Tutorials中了解更多關(guān)于 UIViewRepresentable 的信息。

首先桨踪，創(chuàng)建一個(gè)新的 Swift 文件并將其命名為 ScanButton老翘。在這個(gè)新文件中，將 import Foundation 替換為以下代碼：

import SwiftUI

struct ScanButton: UIViewRepresentable {
  func makeUIView(context: Context) -> UIButton {
    let button = UIButton()
    return button
  }

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

為了遵循 UIViewRepresentable，ScanButton 必須實(shí)現(xiàn) makeUIView(context:)和 updateUIView(_:context:)酪捡。

在這個(gè)最小形式中，makeUIView(context:)只是創(chuàng)建了一個(gè) UIButton纳账。 AddPersonView 不會(huì)更新按鈕逛薇，所以 updateUIView(_:context:)是空的。

3. Coordinator

點(diǎn)擊可以捕獲 ScanButton 必須傳遞給 AddPersonView 的文本的按鈕疏虫。要將數(shù)據(jù)從 UIView 傳輸?shù)?SwiftUI View永罚，ScanButton 需要一個(gè)coordinator。

在 ScanButton 中添加此代碼：

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) { }
  func deleteBackward() { }
}

ScanButton 在 makeUIView(context:) 之前調(diào)用 makeCoordinator()并將 Coordinator 對(duì)象存儲(chǔ)在context.coordinator 中卧秘。

行為captureTextFromCamera(responder:identifier:)需要符合 UIKeyInput 的 UIResponder 參數(shù)呢袱，因此您將 Coordinator 設(shè)為 UIResponder 的子類并添加 UIKeyInput 協(xié)議。實(shí)現(xiàn)此協(xié)議將使協(xié)調(diào)器能夠控制文本輸入翅敌。

UIKeyInput 要求您提供 hasText羞福、insertText(_:)和 deleteBackward()。您需要相機(jī)輸入而不是鍵盤輸入蚯涮，因此您只需實(shí)現(xiàn) insertText(_:)即可處理相機(jī)輸入治专。 hasText 的值無關(guān)緊要，所以設(shè)置為 false遭顶。而 deleteBackward()不需要做任何事情张峰。

Coordinator 的目的是將文本從相機(jī)傳回調(diào)用 ScanButton 的 SwiftUI 視圖，因此 ScanButton 需要綁定到 SwiftUI 視圖中的 String 屬性棒旗。

在 ScanButton 頂部添加此屬性：

@Binding var text: String

AddPersonView 會(huì)將 $name 或 $birthday 傳遞給 ScanButton喘批。

現(xiàn)在您可以完成 Coordinator 的設(shè)置。將此行添加到 insertText：

parent.text = text

是的铣揉，這確實(shí)是 Coordinator 需要做的所有事情饶深！

4. Setting the Button’s Action

現(xiàn)在回到制作你的 UIButton。

在 makeUIView(context:)中逛拱，將button聲明替換為以下內(nèi)容：

let textFromCamera = UIAction.captureTextFromCamera(
  responder: context.coordinator,
  identifier: nil)
let button = UIButton(primaryAction: textFromCamera)

您創(chuàng)建一個(gè) UIAction 以使用您的 Coordinator 對(duì)象作為responder從相機(jī)捕獲文本粥喜。

然后，使用此操作action作為主要操作創(chuàng)建按鈕橘券。這會(huì)將按鈕的標(biāo)題和圖像設(shè)置為操作action的標(biāo)題和圖像额湘。

那么這看起來像什么？設(shè)置預(yù)覽以查看…

在 ScanButton 下方添加此代碼：

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

出現(xiàn)預(yù)覽畫布旁舰。

如果該應(yīng)用程序仍在您的手機(jī)上運(yùn)行锋华，請(qǐng)停止它。

在運(yùn)行目標(biāo)菜單中選擇一個(gè)模擬器箭窜，然后按 Option-Command-P 或單擊 Resume 以查看：

sizeThatFits 實(shí)際上是所選模擬器的全屏尺寸毯焕。您將在 AddPersonView 中通過為其frame設(shè)置寬度和高度值來修剪它。

5. Adding ScanButton to AddPersonView

現(xiàn)在回到 AddPersonView.swift。有兩種方法可以在這里使用 ScanButton纳猫。

一種方法是在text field旁邊顯示按鈕婆咸。

用這個(gè) HStack 替換 Name TextField：

HStack {
  TextField("Name", text: $name)
  ScanButton(text: $name)
    .frame(width: 100, height: 56, alignment: .leading)
}

您將綁定傳遞給 name，設(shè)置按鈕的寬度和高度芜辕，并確保操作的圖像位于按鈕frame的leading邊緣尚骄。

刷新預(yù)覽以查看您的按鈕：

顯示按鈕的另一種方法是在鍵盤工具欄中。

將此修飾符添加到Birthday TextField：

.toolbar {
  ToolbarItemGroup(placement: .keyboard) {
    Spacer()
    ScanButton(text: $birthday)
  }
}

這一次侵续，您將綁定傳遞給birthday倔丈。工具欄約束按鈕的frame，您插入 Spacer()以將按鈕推到工具欄的后沿状蜗。

運(yùn)行實(shí)時(shí)預(yù)覽需五，然后點(diǎn)擊Birthday text field以在鍵盤工具欄中查看您的按鈕：

注意：實(shí)際上，此屏幕截圖來自模擬器轧坎。鍵盤不會(huì)出現(xiàn)在 Xcode 13 的實(shí)時(shí)預(yù)覽中宏邮。

現(xiàn)在，關(guān)閉實(shí)時(shí)預(yù)覽并在您的設(shè)備上運(yùn)行該應(yīng)用程序以試用這兩個(gè)按鈕缸血。

您的 ScanButton 的行為與內(nèi)置掃描按鈕不完全相同蜀铲。相機(jī)檢測(cè)到的文本不會(huì)立即出現(xiàn)在text field中。此外属百，Birthday Scan Text按鈕會(huì)忽略text field的文本內(nèi)容類型設(shè)置记劝。至少，Xcode 13 和 iOS 15 的 RC 版本會(huì)發(fā)生這種情況族扰。您可能會(huì)在更高版本的 Xcode/iOS 中看到更好的結(jié)果厌丑。

雙擊Birthday text field，然后使用內(nèi)置的掃描按鈕渔呵，仍然會(huì)過濾日期文本怒竿。

Scan Text Into Title

ScanButton 可幫助您的用戶了解此輸入選項(xiàng)，但這并不是必需的扩氢。一旦用戶了解了相機(jī)輸入耕驰，他們就會(huì)期望將它與任何text field or text view一起使用。這很有效录豺，不需要你的幫助朦肘。

如果您想將文本掃描進(jìn)label之類的東西怎么辦？沒問題双饥，ScanButton 不關(guān)心它在哪里插入捕獲的文本：只需給它一個(gè) String 變量來插入文本媒抠，然后調(diào)用視圖可以在任何它想要的地方使用這個(gè) String 值。

例如咏花，您可以使用掃描文本來更改 AddPersonView 的導(dǎo)航標(biāo)題趴生。

在 ScanButton 中，添加此 @Binding：

@Binding var title: String

在insertText(_:)中，加下面這行：

parent.title = "Add \(text)"

在previews中苍匆，將 ScanButton(text:)替換為：

ScanButton(text: .constant(""), title: .constant(""))

現(xiàn)在刘急，AddPersonView.swift 警告參數(shù)title缺少參數(shù)。

將此@State 屬性添加到 AddPersonView：

@State private var title = "Add a Person"

在 Name text field的 HStack 中浸踩，將 ScanButton(text:)替換為以下行：

ScanButton(text: $name, title: $title)

在Birthday text field的toolbar中叔汁，將 ScanButton(text:) 替換為以下行：

ScanButton(text: $birthday, title: .constant(title))

您不希望birthday text影響視圖的導(dǎo)航標(biāo)題。

最后民轴，將 .navigationTitle("Add a Person")更改為：

.navigationTitle(title)

在您的手機(jī)上構(gòu)建并運(yùn)行，點(diǎn)擊 + 按鈕球订，然后點(diǎn)擊Name text field旁邊的Scan Text按鈕后裸。掃描名稱并將其插入。

導(dǎo)航標(biāo)題更改以匹配插入的名稱：

這僅適用于您的Scan Text按鈕冒滩。雙擊Name text field微驶，然后使用該掃描按鈕，不會(huì)更改標(biāo)題开睡。

還要檢查將文本掃描到Birthday text field不會(huì)影響導(dǎo)航標(biāo)題因苹。

Button Menu

如果您希望Scan Text選項(xiàng)出現(xiàn)在按鈕菜單中，或者您只想讓掃描按鈕占用更小的空間篇恒，請(qǐng)更改創(chuàng)建 ScanButton 的方式扶檐。

修改 ScanButton 中的 makeUIView(context:) ：注釋掉button聲明并添加以下代碼：

let button = UIButton()
button.setImage(
  UIImage(systemName: "camera.badge.ellipsis"),
  for: .normal)
button.menu = UIMenu(children: [textFromCamera])

您將button圖像設(shè)置為一個(gè)小的 SF 符號(hào)，并將 textFromCamera 操作添加到按鈕的菜單中胁艰。

在 AddPersonView.swift 中款筑，將 Name text field的 ScanButton 寬度更改為 56（或更小）：

ScanButton(text: $name, title: $title)
  .frame(width: 56, height: 56, alignment: .leading)

在實(shí)時(shí)預(yù)覽腾么、模擬器或您的設(shè)備上查看這一點(diǎn)奈梳。現(xiàn)在，長按會(huì)顯示Scan Text選項(xiàng)解虱。

在本教程中攘须，您練習(xí)了在照片中使用實(shí)時(shí)文本Live Text，并使用內(nèi)置的掃描文本功能從手機(jī)攝像頭獲取文本輸入殴泰。然后于宙，您指定文本字段的 textContentType 以使 Vision 模型過濾相機(jī)輸入以獲取該格式的文本。

為了讓用戶更容易看到相機(jī)輸入功能悍汛，您創(chuàng)建了一個(gè) UIViewRepresentable 按鈕來啟動(dòng) captureTextFromCamera(responder:identifier:)限煞。對(duì)于text fields and text views，這提供了類似于內(nèi)置掃描文本按鈕的功能员凝。您可以輕松擴(kuò)展按鈕以將文本掃描到不可編輯的視圖中署驻。最后，您修改了您的按鈕，使其具有一個(gè)菜單旺上，其中包含掃描文本作為其項(xiàng)目之一瓶蚂。

蘋果資源

WWDC 2021 視頻：Use a camera for keyboard input in your app
了解響應(yīng)者鏈* Understanding the responder chain
從相機(jī)捕獲文本Capture text from camera：在撰寫本文時(shí)這里沒有太多內(nèi)容，但希望 Apple 會(huì)盡快添加更多內(nèi)容宣吱。

后記

本篇主要講述了基于SwiftUI的文字識(shí)別窃这，感興趣的給個(gè)贊或者關(guān)注~~~

最后編輯于：2022.02.23 20:28:49

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市征候，隨后出現(xiàn)的幾起案子杭攻，更是在濱河造成了極大的恐慌，老刑警劉巖疤坝，帶你破解...
沈念sama閱讀 216,402評(píng)論 6贊 499
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件兆解，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡跑揉，警方通過查閱死者的電腦和手機(jī)锅睛，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,377評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來历谍，“玉大人现拒，你說我怎么就攤上這事⊥蓿” “怎么了印蔬？”我有些...
開封第一講書人閱讀 162,483評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長脱衙。經(jīng)常有香客問我扛点，道長，這世上最難降的妖魔是什么岂丘？我笑而不...
開封第一講書人閱讀 58,165評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任陵究，我火速辦了婚禮，結(jié)果婚禮上奥帘，老公的妹妹穿的比我還像新娘铜邮。我一直安慰自己，他們只是感情好寨蹋，可當(dāng)我...
茶點(diǎn)故事閱讀 67,176評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布松蒜。她就那樣靜靜地躺著，像睡著了一般已旧。火紅的嫁衣襯著肌膚如雪秸苗。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,146評(píng)論 1贊 297
城市分裂傳說
那天运褪，我揣著相機(jī)與錄音惊楼，去河邊找鬼玖瘸。笑死，一個(gè)胖子當(dāng)著我的面吹牛檀咙，可吹牛的內(nèi)容都是我干的雅倒。我是一名探鬼主播，決...
沈念sama閱讀 40,032評(píng)論 3贊 417
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼弧可，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼蔑匣！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起棕诵，我...
開封第一講書人閱讀 38,896評(píng)論 0贊 274
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤裁良，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后校套，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體价脾，經(jīng)...
沈念sama閱讀 45,311評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,536評(píng)論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年搔确，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了彼棍。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片灭忠。...
茶點(diǎn)故事閱讀 39,696評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡膳算，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出弛作，到底是詐尸還是另有隱情涕蜂，我是刑警寧澤，帶...
沈念sama閱讀 35,413評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布映琳，位于F島的核電站机隙，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏萨西。R本人自食惡果不足惜有鹿，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,008評(píng)論 3贊 325
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望谎脯。院中可真熱鬧葱跋，春花似錦、人聲如沸源梭。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,659評(píng)論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽废麻。三九已至荠卷，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間烛愧，已是汗流浹背油宜。一陣腳步聲響...
開封第一講書人閱讀 32,815評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工掂碱，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人验庙。一個(gè)月前我還...
沈念sama閱讀 47,698評(píng)論 2贊 368
代替公主和親
正文我出身青樓顶吮，卻偏偏與公主長得像，于是被迫代替她去往敵國和親粪薛。傳聞我的和親對(duì)象是個(gè)殘疾皇子悴了，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,592評(píng)論 2贊 353

SwiftUI框架詳細(xì)解析 （二十八） —— 基于SwiftUI的文字識(shí)別（一）