SwiftUI-如何将TextField放入导航栏（如设置应用程序）

Question

在本机“设置”应用中，其中有一个NavigationView，其中带有TextField，可随着用户滚动而很好地过渡：

我能够使用以下方法创建类似内容：

struct HomeView: View {
    @State var searchQuery: String = ""

    var body: some View {
        NavigationView {
            List {
                TextField("Search", text: $searchQuery).textFieldStyle(RoundedBorderTextFieldStyle())
            }
            .navigationBarTitle(Text("My App"))
        }
    }
}

这给了我这个

但是，它的外观或功能与本机设置实际上并不相同，我甚至不知道如何在其中获得搜索图标。非常感谢！

Answer 1

您试图在SwiftUI中创建的将是swift的UIKit中的UISearchBar。

所以您需要样式化文本字段

            TextField("Search ...", text: $text)
            .padding(7)
            .padding(.horizontal, 25)
            .background(Color(.systemGray6))
            .cornerRadius(8)
            .padding(.horizontal, 10)
            .onTapGesture {
                self.isEditing = true
            }

然后为了实现放大镜图标，这是UISearchBar项目的标准配置。我们需要在SwiftUI中使用叠加手动添加它们

.overlay(
HStack {
    Image(systemName: "magnifyingglass")
        .foregroundColor(.gray)
        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
        .padding(.leading, 8)

    if isEditing {
        Button(action: {
            self.text = ""
        }) {
            Image(systemName: "multiply.circle.fill")
                .foregroundColor(.gray)
                .padding(.trailing, 8)
        }
    }
}

）

您可以参考本文以了解更多https://www.appcoda.com/swiftui-search-bar/