SwiftUI戦闘-NuggetsAPPの模倣（1）

8月のアップデートチャレンジに参加して13日目です。イベントの詳細については、8月のアップデートチャレンジをご覧ください。

一、`TabView`

まず、タブをTabView作成し首页、いくつかのタブ、、、、、およびに対応するビューファイルとフォルダを作成します。沸点发现小册我

2.ホームページ-検索バー

検索バーは2つのモジュールで構成されています。

1. 静的表示モジュール。これは実際のTextFieldテキスト入力フィールドではありません。クリックすると、実際の検索ページがポップアップ表示されます。
1. 検索ページ。実際TextFieldの検索フィールド（検索結果を表示）、および検索イベントが含まれます。

実装は、SwiftUIの実際の戦闘を参照することもできます-WeChatアプリ（3）を模倣しているため、詳細については説明しません。

静的モジュール

表紙

3.検索ページ

スペースの都合上、内容は繰り返さず、難しさについてのみお話します。

1つ目は综合、文章、小册、标签、用户このナビゲーションメニューです。

5つのメニューをクリックし、対応するメニューをクリックして、クエリ条件に従って指定されたコンテンツをクエリします。クリックしたメニューには、色と下線を付ける必要があります。

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)
    }
}
复制代码

searchTitleIndex現在のメニューを指定します。
if searchTitleIndex == index現在必要なメニューボタンが色+下線であることを指定します。それどころか、変色、下線はありません、
searchTitleIndex検索ページのコンテンツを制御するためにも使用されますplaceholder。

第四に、並べ替えとフィルタリング

SwiftUIDisclosureGroup既知のコンテンツを拡張および非表示にするためのコンポーネントがで提供されていますが、十分ではありません。

1. DisclosureGroup1つのボタンに基づいてのみ拡張できますが、これは現在の2つのボタンの拡張のニーズを満たしていません。
1. DisclosureGroup>現在のスタイル要件を満たしていない三角形のアイコンが付属しています。

幸いDisclosureGroup、展開、非表示、非表示のいずれを自由に制御できます>。

このコードは長すぎてコードを投稿できません。興味がある場合は、ローカルデバッグ用の完全なコードを付録で確認できます。

最終効果：

スクリーンレコーディング2021-08-1516.22.54.gif

付録

コードアドレス