SwiftUI 如何让文本自动支持查找和替换功能？网站首页 技术杂谈

SwiftUI 如何让文本自动支持查找和替换功能？

大熊猫侯佩 2024-05-30 13:35:54

简介SwiftUI 如何让文本自动支持查找和替换功能？

在这里插入图片描述

概览

有些情况下，我们需要为文本编辑器实现文本的查找和替换功能（find & replace），如果完全靠自已撸码还是比较棘手的。

所幸的是，从 SwiftUI 4.0 （iOS 16）开始，Apple 已经将查找与替换功能原生嵌入到 TextEditor 中了：

在这里插入图片描述

只需几行代码，我们即能恣意任性实现文本查找和替换功能的开启与关闭，以及其它定制细节。

在本篇博文中，就让我们一起来看看如何轻松实现它吧！

Let‘s go！！！?

开启和关闭

从 SwiftUI 4.0 开始，TextEditor 已经可以原生支持查找和替换功能了。

struct ContentView: View {
    @State private var bio = "Describe someone, Thanks./n contained no UIScene configuration dictionary (looking for configuration named BEST!"
    @State private var isShowingFindNavigator = false

    var body: some View {
        NavigationStack {
            TextEditor(text: $bio)
                .font(.title)
                .padding()
                .navigationTitle("查找与替换DEMO")
        }
    }
}

如果设备已连接物理键盘，我们可以使用键盘快捷键 Cmd+F 开启查找界面，用 Option+Cmd+F 来开启替换界面：

在这里插入图片描述

我们还可以在 TextEditor 上调用 findNavigator() 修改器方法来手动启用和关闭查找和替换界面：

struct ContentView: View {
    @State private var bio = "Describe someone, Thanks./n contained no UIScene configuration dictionary (looking for configuration named BEST!"
    @State private var isShowingFindNavigator = false

    var body: some View {
        NavigationStack {
            TextEditor(text: $bio)
                .font(.title)
                .findNavigator(isPresented: $isShowingFindNavigator)
                .toolbar {
                    Button("打开查找与替换") {
                        isShowingFindNavigator.toggle()
                    }
                }
                .padding()
                .navigationTitle("查找与替换DEMO")
        }
    }
}

默认情况下，findNavigator() 首先弹出查找界面，我们可以点击其中的放大镜小图标来继续显示替换界面：

在这里插入图片描述

需要注意的是：在 Xcode 14.2 预览中无法通过此种方法来显示替换界面，必须在模拟器或真机中才可以。

自定义条件

有些情况下，我们可能不希望 TextEditor 响应查找或替换功能。

这可以通过在 TextEditor 上调用 replaceDisabled() 或 findDisabled() 修改器来实现：

struct ContentView: View {
    @State private var bio = "Describe someone, Thanks./n contained no UIScene configuration dictionary (looking for configuration named BEST!"
    @State private var isShowingFindNavigator = false

    var body: some View {
        NavigationStack {
            TextEditor(text: $bio)
                .font(.title)
                // 不开启文本替换功能
                .replaceDisabled(true)
                .findNavigator(isPresented: $isShowingFindNavigator)
                .toolbar {
                    Button("打开查找与替换") {
                        isShowingFindNavigator.toggle()
                    }
                }
                .padding()
                .navigationTitle("查找与替换DEMO")
        }
    }
}