SwiftUI ListとSection・データ更新について

SwiftUI-ListData

SwiftUIListは、データなどをリスト表示させる場合便利なコントロールです。このListSectionを持たせることができ ヘッダー・フッターをつけることもできます。LIstのシンプルな記述方法は下記です。

struct TListBox: View {
    var body: some View {
        List{
            Text("アイテム1")
            Text("アイテム2")
        }
    }
}
シンプルなList
シンプルなList

このコードの場合Textを個別に入れています。この記述方法ではList内のアイテムが多い場合対応できません。例えば100個のリストを作成する場合は下のように記述できます。

struct TListBox: View {
    var body: some View {
        List(0..<100){
            Text("アイテム\($0 + 1)")
        }
    }
}
100個のアイテムを作成
100個のアイテムを作成

Listのカッコ内に、Range式を入れることができます。Rangeは下記のように記述もできます。

var range: Range = 0..<10

RangeisEmpty, clamped, overlapsなどの機能も持っています。List内でForEachが記述できるのでRangeを使うことが可能です。

struct TListBox: View {
    var forEachText = ForEach(0..<10){
        Text("\($0 + 1)")
    }
    var body: some View {
        List{
            self.forEachText
        }
    }
}

ForEachforEachText変数に入れていますが、Listの中に直接書くこともできます。

Listに配列などが入れば便利なのですが、「List([1,2])」このようには記述できないようです。

Initializer 'init(_:rowContent:)' requires that 'Int' conform to 'Identifiable'

配列の場合、下のコードのように id指定が必要です。

List([1,2,3], id: \.self){
	Text("\($0)")
}

下のようなIdentifiable が付いた構造体の場合、配列をそのままList()に設定することが可能です。

struct TListItem: Identifiable {
    var id: Int
    init(_ i: Int) {
        id = i
    }
}

struct TListBox: View {
    var items: Array<TListItem> = [TListItem(1),TListItem(2)]
    var body: some View {
        List(items){
            Text("アイテム\($0.id)")
        }
    }
}

上のコードは、Identifiableを付けたTListItemの配列をList()内で使っています。

List内にはSectionを使いヘッダーとフッターをつけることもできます。

struct TListBox: View {
    var forEachText = ForEach(0..<2){
        Text("\($0 + 1)")
    }
    var body: some View {
        List{
            ForEach(0..<2){
                Section(header: Text("ヘッダー\($0 + 1)"), footer: Text("フッター\($0 + 1)")){
                    self.forEachText
                }
            }
        }
    }
}

List()のカッコ内に構造体配列の変数を設定することで動的にListを更新できます。下のコードは、Timerを使ってデータ内容を更新させListに反映させる例です。

struct TListItem: Identifiable {
    var id: Int
    var t: String
    init(_ i: Int, _ s: String) {
        id = i
        t = s
    }
}

struct TListBox: View {
    @State var listItems: [TListItem] = [];
    @State var count: Int = 0
    @State var timer1: Timer?
    var body: some View {
        List(listItems){
            Text($0.t)
        }.onAppear(){
            self.timer1?.invalidate()
            self.timer1 = Timer.scheduledTimer(withTimeInterval: 0.8, repeats: true) {_ in
                if (self.count <= 100) {
                    let df = DateFormatter()
                    df.dateFormat = "🕐 mm分ss秒SSS"
                    self.listItems.append(TListItem(self.count, df.string(from: Date())))
                    self.count += 1
                }
            }
        }
    }
}
タイマーを使ってList内データ更新
タイマーを使ってList内データ更新

上のように、List内アイテム間に線が入ってしまいます。これを回避するにはonAppear時に「separatorStyle = .none 」を設定します。

List(listItems){
	Text($0.t)
}.onAppear { UITableView.appearance().separatorStyle = .none }
.onDisappear { UITableView.appearance().separatorStyle = .singleLine }
Listアイテム間の線を消す
Listアイテム間の線を消す

Swift JSON文字列からenumへDecodeについて

Swift言語で、下記はシンプルなenumの書き方です。

enum MobileArmor {
    case bigro, zakrello
}

MobileArmorというenum(列挙型)を作成しました。このMobileArmorを変数に入れたい場合下記のように記述します。

let mobileArmor: MobileArmor = MobileArmor.zakrello

mobileArmor変数の中を.zakrelloに設定しています。この変数の状態によってswitch文で処理を変更したい場合下記のように書きます。

let mobileArmor: MobileArmor = .zakrello
switch mobileArmor {
case .zakrello:
    print("zakrello")
    break
case .bigro:
    print("bigro")
}

enumCaseIterableHashable, Codableなどをprotocolをつけることが可能です。

CaseIterableの場合AllCasesが使えるようになります。このAllCasesを使えば下記のコードのようにenumに設定している内容を確認することができます。

enum MobileArmor: CaseIterable {
    case bigro, zakrello
}
MobileArmor.allCases.forEach { print ( $0.self) }
型の内容をallCases.forEachで取得

enum型にHashableを設定した場合は、hashValuehash(into hasher: inout Hasher)が使えますがHashableを設定しなくてもhashValueなどは利用できるようでした。hash(into: &hasher)を設定するためのHasherは、任意のシーケンスを整数にマッピングするために使用できます。combine()とfinalize()をつかうようです。下記に例を書いてみますがあってるのか不明です。

enum MobileArmor: CaseIterable, Hashable {
    case bigro, zakrello
}
let mobileArmor: MobileArmor = .zakrello
var hasher1 : Hasher = Hasher()
hasher1.combine(128)
hasher1.finalize()
mobileArmor.hash(into: &hasher1)

Codableも他と同じく enumに設定できるprotocolです。Codableは下のコードのようにDecodableEncodableが合わさった機能を持っています。

public typealias Codable = Decodable  & Encodable

MobileArmor enum型にStringCodableを設定しました。Codableを指定しているので JSONのDecodeが可能です。

enum MobileArmor: String, Codable, CaseIterable, Hashable {
    case bigro = "ビグロ"
    case zakrello = "ザクレロ"
}

do {
    let amobileArmor = try JSONDecoder().decode(MobileArmor.self, from: "\"ザクレロ\"".data(using: .utf8)! )
    switch amobileArmor {
    case .zakrello:
        print("zakrello")
        break
    case .bigro:
        print("bigro")
    }
} catch { }

ザクレロ」という文字列をMobileArmor型にdecodeできました。JSONDecoderを使わない方法もあると思いますが、手っ取り早いコード例です。Codableが設定されているので、JSONEncoder()を使えば下のコードのように文字列に変換することもできます。

do {
    print( String(data: try JSONEncoder().encode(MobileArmor.bigro), encoding: .utf8)! )
} catch { }
2022 MJELD TECHNOLOGIES. ALL RIGHTS RESERVED