This is the 13th day of my participation in the August More Text Challenge. For details, see:August is more challenging

A,TabView

First, create a TabView. Create view files and folders corresponding to the home page, Boiling point, Discovery, Volume, and ME TAB.

Second, home – search bar

The search bar consists of two modules:

    1. Static display module. Not reallyTextFieldText input field, clicking on it will bring up the real search page.
    1. Search page. Contain realTextField, search area (display search results), and search events.

Implementation can also refer to SwiftUI actual combat – copy write wechat App (3), not much to repeat.

The static module

Home page

Third, search page

Because of the problem of space, do not repeat wordy content, say inside difficult point only.

The first is the navigation menu of general, article, booklet, TAB, and user.

There are five menus. Click the corresponding menu to query the specified content according to the search conditions. The menu you click on needs to be colored and underlined.

struct SearchMenuView: View {

    @Binding var searchTitleIndex: Int
    
    var body: some View {
        HStack(spacing: 20) {ForEach(0..<Constants.menuTitles.count){index in
                
                if searchTitleIndex = = index {
                    Button(action: {
                        searchTitleIndex = index
                    }, label: {
                        Text(Constants.menuTitles[index]).underline(true, color: Color.blue).foregroundColor(.blue)
                    })
                }else {
                    Button(action: {
                        searchTitleIndex = index
                    }, label: {
                        Text(Constants.menuTitles[index])
                    })
                }
            }
        }.foregroundColor(.gray)
    }
}
Copy the code
  • searchTitleIndexSpecifies the current menu.
  • if searchTitleIndex == indexSpecifies that the current desired menu button is color change + underline. Otherwise, there’s no color change, there’s no underlining,
  • searchTitleIndexAlso used to control the search pageplaceholderThe content.

Fourth, sorting and filtering

SwiftUI provides a DisclosureGroup component to expand and hide known content, but it’s not enough.

    1. DisclosureGroupCan only be expanded based on one button, does not meet the current 2 button expansion requirements.
    1. DisclosureGroupComes with a triangle icon>Does not meet the current style requirements.

Fortunately, The DisclosureGroup is free to control whether to expand, hide, and > can be hidden away.

This code is too long to post the code, interested in the appendix to see the full code native debugging.

Final result:

The appendix

The code address