【SwiftUI】辞書型配列のキーと値をならべて、List表示させたい

Question

前提

SwiftUIを用いてiPhoneアプリを作ろうと考えている初心者です。

実現したいこと

辞書型の配列を作成し、その中身を "キー", "値"の順番で List { } に表示させたいのですが、うまく行きません。
以下のプログラムで言えば、
Tokyo　東京
Osaka　大阪
Chiba　千葉
Nara　　奈良
Kyoto　京都
というふうに並べて表示させたいと思っております。

情けない質問ですが、よろしくお願い申し上げます。

発生している問題・エラーメッセージ

Closure containing control flow statement cannot be used with result builder 'ViewBuilder'

該当のソースコード

import SwiftUI

struct DictionaryListView: View {
    var dictionary: [String:String] = ["Tokyo":"東京","Osaka":"大阪","Chiba":"千葉","Nara":"奈良","Kyoto":"京都"]
    
    var body: some View {
        List {
            for (key, value) in dictionary {
                Text("\(key) \(value)")
            }
        }
    }
}


struct DictionaryListView_Previews: PreviewProvider {
    static var previews: some View {
        DictionaryListView()
    }
}

試したこと

numbers = [1,2,3,4,5] という配列は、for ... in で表示ができたことを確認しています。

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

Xcode 13.4.1 を使用しています。

Answer 1

追記: ソート条件をコードで表現できれば以下でできるのですが、期待されている順序だと、私の方法では難しそうですね。

解決済みのようですが、ディクショナリの sorted(by:) を使うことで、ディクショナリ -> タプルの配列に変換できるので、こちらでも良いかと思います。

import SwiftUI

struct DictionaryListView: View {
    var dictionary: [String:String] = ["Tokyo":"東京","Osaka":"大阪","Chiba":"千葉","Nara":"奈良","Kyoto":"京都"]

    var body: some View {
        VStack {
            // タプルの配列に変換（条件: キーの昇順でソート）
            let sorted: [(key: String, value: String)] = dictionary.sorted { $0.key < $1.key}
            
            // 配列なので List で繰り返し可能
            List(sorted, id: \.key) { prefecture in
                Text("\(prefecture.key), \(prefecture.value)")
            }
        }
        .padding()
    }
}

Comments

[aokiplayer]

すみません、辞書順ではない並べ替えですね。
だとすると、私の回答ではダメでしたね。

[kuwatsy]

いろいろ考えていただきありがとうございます。今後のために理解しておきたいと思います。またよろしくお願いします。

Answer 2

辞書は、格納順序の情報を持っておらず、KeyとValueの組み合わせを登録しているだけなので、意図した順番で表示させるには、どの順番で表示するかを表す配列が必要です。
次のように、表示する順番を示すarrayを定義し、そのarrayをListに指定して、arrayの要素(英語都市名)とそれに対応する日本語都市名をdictionaryから引いて表示すれば、意図した順に表示できると思います。

struct DictionaryListView: View {
    var dictionary: [String:String] = ["Tokyo":"東京","Osaka":"大阪","Chiba":"千葉","Nara":"奈良","Kyoto":"京都"]
    var array: [String] = ["Tokyo", "Osaka", "Chiba", "Nara", "Kyoto"]
    
    var body: some View {
        List(array, id: \.self) { city in
                Text("\(city) \(dictionary[city]!)")
        }
    }
}

Comments

[kuwatsy]

早速のご回答、大変ありがとうございました。別リストを作成してそれを辞書で検索表示する、というのは、私にとって全くもって目から鱗の解決方法でした。これで一挙にプログラミングが進みます。
本当に助かりました。