SwiftUI项目：如何在iOS搜索栏旁添加自定义按钮？

首先明确：原生SwiftUI没有提供直接在系统搜索栏旁添加自定义按钮的内置选项，无法完全不用自定义代码实现，但可以通过两种方式达成需求，不用完全从零构建搜索栏。

方案1：组合原生搜索组件+自定义按钮 #

复用原生搜索样式的TextField，通过HStack将其与自定义按钮组合，视觉上模拟系统搜索栏的效果，同时保留原生输入逻辑。

代码示例：

struct SearchWithButtonView: View {
    @State private var searchText = ""
    
    var body: some View {
        HStack(spacing: 8) {
            // 原生搜索样式输入框
            TextField("搜索", text: $searchText)
                .textFieldStyle(.roundedBorder)
                .padding(.horizontal)
                .padding(.vertical, 8)
            
            // 自定义操作按钮
            Button(action: {
                // 替换为你的按钮逻辑
                print("自定义按钮触发")
            }) {
                Image(systemName: "plus.circle.fill")
                    .font(.title)
                    .foregroundColor(.blue)
            }
            .padding(.trailing)
        }
        .background(Color(.systemGray6))
        .cornerRadius(10)
        .padding()
    }
}

这种方式代码量小，快速实现需求，适合不需要复杂交互的场景。

方案2：完全自定义搜索栏（高灵活性） #

如果需要和系统搜索栏的交互逻辑（比如输入时显示清除按钮、搜索状态动画）完全对齐，或者有更复杂的自定义需求，可以构建全自定义的搜索栏组件。

代码示例：

struct CustomSearchBar: View {
    @Binding var text: String
    var onButtonTap: () -> Void
    
    var body: some View {
        HStack {
            Image(systemName: "magnifyingglass")
                .foregroundColor(.gray)
            
            TextField("搜索", text: $text)
            
            // 输入内容不为空时显示清除按钮
            if !text.isEmpty {
                Button(action: {
                    text = ""
                }) {
                    Image(systemName: "xmark.circle.fill")
                        .foregroundColor(.gray)
                }
            }
            
            Spacer()
            
            // 自定义功能按钮
            Button(action: onButtonTap) {
                Image(systemName: "gearshape.fill")
                    .foregroundColor(.blue)
            }
        }
        .padding(8)
        .background(Color(.systemGray6))
        .cornerRadius(8)
        .padding(.horizontal)
    }
}

// 使用示例
struct ContentView: View {
    @State private var searchText = ""
    
    var body: some View {
        CustomSearchBar(text: $searchText) {
            print("设置按钮被点击")
        }
    }
}

这种方式完全掌控搜索栏的布局、交互细节，适合需要高度定制的场景。

内容的提问来源于stack exchange，提问作者helloimbrando