SwiftUI沼でゆっくり浸る 検索窓付きセクション付きList用Viewのネタ作成

著者：川上洋

公開日：2022/08/17

最終更新日：2022/08/17

カテゴリー：お知らせ 技術情報

タグ：Swift／SwiftUI

こんにちは、川上です。

アプリのMaster-Detail型のMaster-viewの表示作成です。

SwiftUIの検索窓の組み込みの仕方には、gg巷に結構ありますので、サラっと見てください。。

struct ContentView: View {
   @EnvironmentObject var vm : PostNumberViewModel
    
    @State private var searchText: String = ""
    var body: some View {
        
        NavigationView {
            // MARK: == Seachbox + Section + 都道府県名　->　郵便番号データDetail
            body_view
        } // == NavigationView
        .navigationTitle("都道府県名")
        .navigationBarTitleDisplayMode(.inline)

    } 

    // MARK: == Seachbox + Section + 都道府県名　->　郵便番号データDetail
    private var body_view: some View {
        VStack {
            SearchBar(text: $searchText, placeholder: "Search Spots")

            List { 
                ForEach (vm.tofukenAreaArry_Datas.indices, id: \.self) { item_idx in
                    if item_idx < vm.tofukenAreaArry_Datas.count {
                        // MARK: === 検索　＆　Filter
                        let retTpl = vm.getSortHitArry_All(item_idx,self.searchText)
                        ForEach(retTpl.Aleas.indices , id: \.self) { area in
                            // MARK: === セクションヘッダー
                            Section(header:
                                HStack {
                                    Image(systemName: "books.vertical.fill")
                                    Text(retTpl.Aleas[area])
                                } 
                               .font(.title3)
                               .foregroundColor(Color(hex: 0x9900ff))
                               .frame(maxWidth: .infinity, alignment: .leading)
                            ) {
                               // MARK: === 選択結果の都道府県名
                               ForEach(retTpl.Childs.indices, id: \.self)  { hitidx in
                                   NavigationLink(
                                       destination:
                                        detailPostNum(tfklstIdx:retTpl.AreasIdxs[area]
                                                      ,postsIdx:retTpl.ChildsIdxs[hitidx])
                                        .offset(y:vm.IS_IPAD_GRAND() ? -150 : 0)
                                        .frame(height:UIScreen.main.bounds.size.height - 20)
                                       ,
                                       label: {
                                           Text(retTpl.Childs[hitidx])
                                       }) 
                               } 
                           } 
                        } 
                    } 
                } 
            } 
        } 
    } 
}

で、

// MARK: === 検索　＆　Filter
 let retTpl = vm.getSortHitArry_All(item_idx,self.searchText)

検索処理のミソが続くのでした。

ではでは。