This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging

above

  • SwiftUI actual Combat – Copy wechat App (1)
  • SwiftUI Actual Combat – Copy wechat App (2)

A, goals,

Implement the address book page.

Second, the train of thought

Due to the length of this section, only the search bar is covered.

The search bar is actually a button that opens a new search page when clicked.

So this function, it’s divided into two steps.

  • First, draw this search box and click on it to open a new page.
  • The second step is to implement the new search page and add the real search bar.

Search box

First, the search box can be divided into a combination of rectangle and HStack(text and icon), so use ZStack to combine both.

ScrollView{
    ZStack{
        
        Rectangle().fill().frame(height: 50).foregroundColor(.white).cornerRadius(5).padding(12.5)
        
        HStack{
            Image(systemName: "magnifyingglass")
            Text("Search")
        }.foregroundColor(Color(red: 188/255, green: 188/255, blue: 188/255))
        
    }
}.background(Color(red: 237/255, green: 237/255, blue: 237/255))
Copy the code
  • useRectangleSet the rectangle
  • cornerRadiusSet the rounded corners
  • Color(red: 188/255, green: 188/255, blue: 188/255)You can set RGB color mode. But the actual value that you get from the color finder is divided by 255.

Next, click to open a new page, but the actual operation of wechat will find that the opened animation is not left and right to slide open, but similar to open full-screen animation mode.

SwiftUI provides this by adding a fullScreenCover property to the search box.

.fullScreenCover(isPresented: $searchFullPagePresented, content: {
     Button(action: {
        searchFullPagePresented = false
    }, label: {
        Text("back")
    })
}).onTapGesture {
    searchFullPagePresented = true
}
Copy the code
  • Among themisPresentedUsed to control the page open and close events.
  • contentThe contents of the full-screen page are wrapped.
  • onTapGestureAdd a touch screen click event by modifyingsearchFullPagePresented=trueTo reach an event that opens a full-screen page.
  • ButtonIs the back button in the full screen page to return to the address book.

Search full-screen pages

The difficulty here can be divided into two.

  • 1 is the implementation of this rectangular search bar
  • 2: The cancel button returns to the address book.

The back button, which was implemented in the previous step, is implemented with searchFullPagePresented=false, so I’m not going to talk about that.

Just looking at the first step, the entire search bar can be broken down.

  • To create aSearchFullScreenView.swiftAbstracts the contents of a full-screen page.
  • The whole rectangle is oneZStackaddRectangleCan be realized
  • The red one is a magnifying glass icon
  • The blue is the input fieldTextField
  • Green is also a voice icon
  • At last,HStackconnect

So the code looks like this

struct SearchFullScreenView: View {
    
    @State var searchText: String = ""
    
    @Binding var searchFullPagePresented: Bool
    
    var body: some View {
        ScrollView{
            HStack{
                ZStack{
                    Rectangle().fill().frame(height: 50).foregroundColor(.white).cornerRadius(5).padding(12.5)
                    
                    HStack{
                        
                        Image(systemName: "magnifyingglass")
                        TextField("Search", text: $searchText)
                        Image(systemName: "mic")
                        
                    }.padding()
                }
                Button("Cancel") {
                    searchFullPagePresented = false
                }.padding(.trailing)
            }.background(Color(red: 237/255, green: 237/255, blue: 237/255))}}}Copy the code
  • Bidirectional binding is used hereSubcomponents @ BindingaddThe parent component @ State, by controllingsearchFullPagePresentedthetruewithfalseTo open and close the page.

Five, commonly used search nine grid

LazyVGrid is provided in SwiftUI to implement a vertical nine-grid grid layout.

let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 3)
LazyVGrid(columns: columns) {
    ForEach((0..<commonSearchFilter.count), id: \.self) {index in

        Text("\(commonSearchFilter[index])").font(.callout).padding(.bottom).foregroundColor(.blue)

    }
}.font(.largeTitle)
            
Copy the code
  • LazyVGridTo receive acolumnsParameter layout Settings
  • throughrepeatingThe specified.fixed(100)Fixed width or.flexibleThe elastic width
  • countSpecifying the number of grids

Attached: Code address

Gitee.com/dkwingcn/we…

Related articles

SwiftUI Actual Combat – Copy wechat App (4)