SwiftUI如何在屏幕中间添加可搜索文本框（非顶部）

SwiftUI默认的.searchable修饰符和导航栈绑定，会固定显示在屏幕顶部。要把搜索框放在"Add Party Members"下方，你可以放弃系统的.searchable，自己实现一个搜索输入框并放在指定位置。

修改后的代码如下：

struct AddExpenseView: View {
    @State var expense: Expenses
    @State var newExpenseItem = expenseItem()
    @State private var searchQuery = ""
    @Environment(\.dismiss) var dismiss

    var body: some View {
        NavigationStack {
            Form {
                Section {
                    TextField("Name:", text: $newExpenseItem.name)
                    TextField("Amount:", value: $newExpenseItem.amount, format: .currency(code: "INR"))
                        .keyboardType(.decimalPad)
                    TextField("Type:", text: $newExpenseItem.type)
                }
                Section {
                    Toggle("Add Party Members?", isOn: $newExpenseItem.addExpensesWithFriends)
                    
                    // 自定义搜索框，放在Toggle下方
                    if newExpenseItem.addExpensesWithFriends {
                        TextField("搜索成员", text: $searchQuery)
                            .textFieldStyle(.roundedBorder)
                            .padding(.horizontal)
                        
                        List {
                            ForEach(searchResults, id: \.self) { result in
                                Text(result.name)
                            }
                        }
                    }
                }
            }
            .navigationTitle("New Expense")
            .toolbar {
                Button("Cancel") {
                    dismiss()
                }
            }
        }
    }

    var searchResults: [expenseItem] {
        if searchQuery.isEmpty {
            return expense.items
        } else {
            return expense.items.filter { $0.name.localizedCaseInsensitiveContains(searchQuery) }
        }
    }
}

关键修改说明： #

• 移除列表上的.searchable修饰符，手动添加TextField作为搜索框，直接放置在Toggle和列表之间，精准控制位置
• 给搜索框添加.roundedBorder样式，贴近系统搜索框的视觉效果
• 优化搜索逻辑，使用localizedCaseInsensitiveContains实现不区分大小写的搜索，提升用户体验
• 搜索框和列表仍受addExpensesWithFriends状态控制，保留原有的显示逻辑，避免出现空白区域

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