配列のプロパティを含む、構造体の配列のList表示方法

Question

前提・実現したいこと

現状、テキストフィールドに文字列を入力後、ボタンを押すと構造体strsのlargeCateがリスト表示されますがsmallCateの"その他"がネストとして表示できるようにしたいです。

該当のソースコード

import SwiftUI

struct Sample: View {
    
    @State var inputStr: String = ""
    @State var keepStr: String = ""
    @State var strArray: [strs] = []
    
    struct strs: Hashable {
        var largeCate: String
        var smallCate: [String] = []
        
        init(largeCate: String) {
            self.largeCate = largeCate
            smallCate.append("その他")
        }
    }
    
    var body: some View {
        VStack(spacing: 10){
            
            TextField("入力まち", text: $inputStr)
                .font(.title)
                .background(checkStr() ? Color.green : Color.gray)
                .opacity(0.2).cornerRadius(15.0)
            
            Button(action: {
                savelargeCateStr()
            }, label: {
                /*@START_MENU_TOKEN@*/Text("Button")/*@END_MENU_TOKEN@*/
            })
            
            List(strArray, id: .hashValue){ num in
                Text(num.largeCate)
//                List(num, id: .hashValue){ num0 in
//                    Text(num0.smallCate)
//                }
            }
            
        }
        
    }
    
    func checkStr() -> Bool{
        if(inputStr.count >= 3){
            return true
        }
        return false
    }
    
    func savelargeCateStr(){
        keepStr = inputStr
        if strArray.count == 0{
            strArray = [strs(largeCate: keepStr)]
        }
        else{
            strArray.append(strs(largeCate: keepStr))
        }
        inputStr = ""
    }
    
}

struct Sample_Previews: PreviewProvider {
    static var previews: some View {
        Sample()
    }
}

試したこと

2D array List　とかで検索したり海外の動画も見たりしましたが動的にネスト型のリストの説明をしてるものは見つけられませんでした。

補足情報（FW/ツールのバージョンなど）

このようなイメージです。

Xcode Version 13.0 (13A233)
macOs Big Sur バージョン11.6

Comments

[退会済みユーザー]

回答に対してなんら反応がありませんがどうかされましたか？質問の意図と異なっていたり解決に関係ない回答であった場合はその旨ご指摘いただき質問文へもご反映下さい。

[taratarasiteru]

大変遅くなってすみません。さわれない状況が続いてました。

largeCateの右側に下向きの矢印みたいなアイコンが出て、それをタップするとsmallCateが展開されるようにしたかったです。

[taratarasiteru]

補足情報に実現したい状態の画像を添付しました。
画像のものは海外の動画で紹介されていたコードをそのまんま書いてみたものです。
この画像のものは配列要素を事前に書いてるものを展開できるようにしてます。
私が実現したのことはlargeCateとsmallCateを動的に表示させたいと思ってます。largeCateはとりあえずこのままでいいかと思ってます。smallCateは展開したり隠したりできるようにし、展開後smallCateの一番下に追加ボタンとかを実装しsmallCateを動的に増やせるようにしたいと思ってます。その前段階としてsmallCateを展開したり隠したりできるようにしたかったです。

Answer 1

公式ドキュメントを見て解決しました。
https://developer.apple.com/documentation/swiftui/list

Answer 2

List(strArray, id: .hashValue){ num in
    Text(num.largeCate)
//  List(num, id: .hashValue){ num0 in
//      Text(num0.smallCate)
//  }
}

この箇所の num は strs オブジェクトで配列でもなんでもないのですから、列挙対象にはできないでしょう。

文字列が入っている配列は num.smallCate ではないのですか？

List(strArray, id: .hashValue){ num in
    Text(num.largeCate)
    ForEach(num.smallCate, id: .hashValue) { item in
        Text(item)
    }
}

またセルの高さの計算が狂うので、List に List を入れるのはやめたほうがいいと思います。リストのひとつのセルの中でビューの並びを整理する場合は VStack, HStack が使用できます。

List(strArray, id: .hashValue){ num in
    VStack {
        Text(num.largeCate)
        VStack { // HStackならsmallCateの文字列の群れは横並びになる
            ForEach(num.smallCate, id: .hashValue) { item in
                Text(item)
            }
        }
    }
}

Comments

[taratarasiteru]

その他が隠せないので隠せるようにしたいです。

[退会済みユーザー]

放置された方には私自身はもう何も致しませんので。悪しからず。