给 SwiftUI 添加一个原生搜索栏：使用 TextField 构建自己的 SearchBar

2023-12-10 03:02:24

自定义 SwiftUI 搜索栏：在 SwiftUI 中实现原生搜索栏功能

概述

在 SwiftUI 中，我们无法使用原生组件来构建与 UIKit 中的 UISearchBar 完全相同的搜索栏。但是，我们可以利用 SwiftUI 的强大功能和灵活性，使用 TextField 组件创建自定义搜索栏，具有与 UISearchBar 类似的外观和功能。

自定义 SwiftUI 搜索栏

要自定义 SwiftUI 搜索栏，我们需要对 TextField 组件进行一系列修改：

文本框样式： 使用 .roundedBorder 修改器为文本框添加圆角边框，模拟搜索栏的外观。
清除按钮： 使用 .clearButtonMode(.whileEditing) 修改器添加一个清除按钮，以便用户可以轻松清除搜索文本。
占位符文本： 使用 .placeholder(Text("搜索")) 修改器设置占位符文本，提示用户输入搜索内容。
搜索图标： 使用 .searchTextFieldStyle() 修改器添加一个搜索图标，表示这是一个搜索栏。

以下是自定义 SwiftUI 搜索栏的示例代码：

struct CustomSearchBar: View {
    @State private var searchText = ""

    var body: some View {
        HStack {
            TextField("搜索", text: $searchText)
                .padding(7)
                .background(Color(.systemGray6))
                .cornerRadius(8)
                .overlay(
                    HStack {
                        Image(systemName: "magnifyingglass")
                            .foregroundColor(.gray)
                            .frame(width: 24, height: 24)
                            .padding(.leading, 8)

                        Spacer()

                        if !searchText.isEmpty {
                            Button(action: {
                                searchText = ""
                            }) {
                                Image(systemName: "xmark.circle.fill")
                                    .foregroundColor(.gray)
                                    .frame(width: 24, height: 24)
                                    .padding(.trailing, 8)
                            }
                        }
                    }
                )
        }
        .padding()
    }
}