【SwiftUI】Listのスタイル

iOS

automatic

struct automatic: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.automatic)
        .navigationTitle("automatic")
    }
}

grouped

struct grouped: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.grouped)
        .navigationTitle("grouped")
    }
}

inset

struct inset: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.inset)
        .navigationTitle("inset")
    }
}

insetGrouped

struct insetGrouped: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.insetGrouped)
        .navigationTitle("insetGrouped")
    }
}

plain

struct plain: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.plain)
        .navigationTitle("plain")
    }
}

sidebar

struct sidebar: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.sidebar)
        .navigationTitle("sidebar")
    }
}

macOS

automatic

struct automatic: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.automatic)
        .navigationTitle("automatic")
    }
}

bordered

struct bordered: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.bordered)
        .navigationTitle("bordered")
    }
}

inset

struct inset: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.inset)
        .navigationTitle("inset")
    }
}

plain

struct plain: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.plain)
        .navigationTitle("plain")
    }
}

sidebar

struct sidebar: View {
    var body: some View {
        List {
            Text("あいうえお")
            Text("かきくけこ")
            Text("さしすせそ")
            Text("たちつてと")
            Text("なにぬねの")
            Text("はひふへほ")
            Text("まみむめも")
            Text("やゆよ")
            Text("わをん")
        }
        .listStyle(.sidebar)
        .navigationTitle("sidebar")
    }
}