解放区在住氷翠 緑の閃光
【解放区在住氷翠】デスクトップアプリケーション

【SwiftUI】リスト表示を作ってみる

2022-12-04

氷翠です。

iMac M1
メモリ：16GB
MacOS：Ventura 13.0.1
Xcode：14.1

情報としては2022.12.4時点での情報となります。

新規プロジェクトから「MacOS」だけを対象に作成。言語も「SwiftUI」を選択して作成していきます。

上の画像の通り完成形としてはこんな感じになります。

とりあえず、今回のは形を作っていくというものです。そして、普通にリストを作成していくだけではなく、リストの一個のアイテムにもデザインを適用していこうというものです。

で、以下に別のファイルで「SwiftUI」にて「fileListView.swift」というファイルを作成します。

import SwiftUI

struct fileListView: View {
    
    var fileName: String
    var midashi: String
    
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "doc.text.fill")
                    .padding(.horizontal, 5.0)
                VStack(alignment: .leading) {
                    Text("\(fileName)")
                        .font(.title3)
                        .multilineTextAlignment(.leading)
                    Divider()
                        .padding(.vertical, -4.0)
                        .foregroundColor(.black)
                    Text("\(midashi)")
                        .font(.caption)
                        .multilineTextAlignment(.leading)
                }
                Spacer()
                Image(systemName: "chevron.right.circle.fill")
                    .padding(.horizontal, 5.0)
            }
        }
        .padding(.horizontal, 0.0)
        Divider()
            .foregroundColor(.gray)
    }
}

struct fileListView_Previews: PreviewProvider {
    static var previews: some View {
        fileListView(fileName: "テスト.txt", midashi: "見出し見出し")
    }
}

大したデザインではないので、このくらいの簡単なものになりました。

要は最後にある「fileListView(fileName: “テスト.txt”, midashi: “見出し見出し”)」これが必要になってくる。で、「ContentView.swift」この標準で用意されているファイルを編集していく。

struct ContentView: View {
    var body: some View {
        VStack {
            HStack(alignment: .bottom, spacing: -2.0) {
                Text("ファイル数")
                Spacer()
                Text("000本")
            }
            .padding(10.0)
            Divider()
            List {
                fileListView(fileName: "テスト_001.txt", midashi: "見出し　１")
                fileListView(fileName: "テスト_002.txt", midashi: "見出し　２")
                fileListView(fileName: "テスト_003.txt", midashi: "見出し　３")
                fileListView(fileName: "テスト_004.txt", midashi: "見出し　４")
                fileListView(fileName: "テスト_005.txt", midashi: "見出し　５")
                fileListView(fileName: "テスト_006.txt", midashi: "見出し　６")
                fileListView(fileName: "テスト_007.txt", midashi: "見出し　７")
                fileListView(fileName: "テスト_008.txt", midashi: "見出し　８")
                fileListView(fileName: "テスト_009.txt", midashi: "見出し　９")
                fileListView(fileName: "テスト_010.txt", midashi: "見出し　１０")
            }
            .frame(width: 300.0)
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
        }
        .frame(width: 300.0)
    }
}

一応、プログラムの中身を一部解説すると、「Divider」というのは罫線をいれるというもの。その下にある「List」が今回のメイン。その中にオブジェクトを並べていくことでリストが成り立つという感じ。

コメントを残す

メールアドレスが公開されることはありません。