SwiftUI 中级之徒手写个SearchBar

用了N多年Apple给我们提供的SearchBar，今天打算自己实现一个。

想一想SearchBar组成

• 文本输入的地址
• 一个按钮
• 列表

实现方案

使用HStack包裹一个TextField和Button，列表通过List实现。

代码

import SwiftUI

struct RFSearchView: View {
    @State var searchStr:String = ""
    @State private var items: [String] = Array(0...24).map { "Item \($0)" }
    
    var body: some View {
        NavigationView {
            VStack {
                HStack{
                    TextField("Search",text: $searchStr)
                        .frame(height:40)
                        .padding(EdgeInsets(top: 0, leading: 8, bottom: 0, trailing: 8))
                        .border(Color.gray,width:4)
                    .cornerRadius(8)
                        .padding(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 4))
                    
                    Button(action:{
                        print(self.searchStr)
                    }){
                        Text("Search")
                        
                    }
                    .frame(height:40)
                    .padding(EdgeInsets(top: 0, leading: 8, bottom: 0, trailing: 8))
                    .border(Color.blue,width: 4)
                .cornerRadius(8)
                    .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 16))
                    
                }
                List{
                    ForEach(items,id: \.self){ item in
                        Text(item)
                        
                    }
                }
            }
            .navigationBarTitle("Search ")
        }
    }
}

最终效果

更多SwiftUI教程和代码关注专栏

• 请关注我的专栏icloudend, SwiftUI教程与源码

https://www.jianshu.com/c/7b3...