カルーセルをつける

[konohazukux]

Listの各行に横スクロールのカルーセルを追加するには、ScrollViewを使います。以下にその実装例を示します。

更新されたコード

import SwiftUI

@main
struct MyListAppApp: App {
    var body: some Scene {
        WindowGroup {
            MainView()
        }
    }
}

struct MainView: View {
    var body: some View {
        TabView {
            ContentView()
                .tabItem {
                    Label("To-Do List", systemImage: "list.bullet")
                }
            SettingsView()
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
        }
    }
}

struct ContentView: View {
    @StateObject private var viewModel = ToDoViewModel()

    var body: some View {
        NavigationView {
            List {
                ForEach($viewModel.toDoItems) { $item in
                    VStack(alignment: .leading) {
                        HStack {
                            Text(item.title)
                            Spacer()
                            Image(systemName: item.isCompleted ? "checkmark.circle.fill" : "circle")
                                .foregroundColor(item.isCompleted ? .green : .gray)
                                .onTapGesture {
                                    item.toggleCompletion()
                                }
                        }
                        ScrollView(.horizontal, showsIndicators: false) {
                            HStack {
                                ForEach(0..<5) { index in
                                    RoundedRectangle(cornerRadius: 10)
                                        .fill(Color.blue)
                                        .frame(width: 100, height: 100)
                                        .overlay(
                                            Text("Item \(index)")
                                                .foregroundColor(.white)
                                        )
                                        .padding(5)
                                }
                            }
                        }
                    }
                    .padding(.vertical, 10)
                }
            }
            .navigationTitle("To-Do List")
        }
    }
}

struct SettingsView: View {
    var body: some View {
        Text("Settings")
            .font(.largeTitle)
            .padding()
    }
}

struct ToDoItem: Identifiable {
    let id = UUID()
    let title: String
    var isCompleted: Bool

    mutating func toggleCompletion() {
        isCompleted.toggle()
    }
}

class ToDoViewModel: ObservableObject {
    @Published var toDoItems = [
        ToDoItem(title: "Buy groceries", isCompleted: false),
        ToDoItem(title: "Walk the dog", isCompleted: true),
        ToDoItem(title: "Read a book", isCompleted: false)
    ]

    func toggleCompletion(of item: ToDoItem) {
        if let index = toDoItems.firstIndex(where: { $0.id == item.id }) {
            toDoItems[index].toggleCompletion()
        }
    }
}

説明

• ScrollView(.horizontal, showsIndicators: false):

  • 横スクロールを有効にするために使用。
  • showsIndicators: falseでスクロールインジケーターを非表示に。

• HStack:

  • 横に並べるために使用。
  • ForEachでダミーデータ（カルーセルのアイテム）を生成。

この構造により、各To-Doアイテムの下に横スクロール可能なカルーセルが追加されます。

[konohazukux]

214bff8d90b2b958a99877139664604d94f188a7