Closed konohazukux closed 2 months ago
Listの各行に横スクロールのカルーセルを追加するには、ScrollViewを使います。以下にその実装例を示します。
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アイテムの下に横スクロール可能なカルーセルが追加されます。
214bff8d90b2b958a99877139664604d94f188a7
Listの各行に横スクロールのカルーセルを追加するには、
ScrollView
を使います。以下にその実装例を示します。更新されたコード
説明
ScrollView(.horizontal, showsIndicators: false):
showsIndicators: false
でスクロールインジケーターを非表示に。HStack:
ForEach
でダミーデータ(カルーセルのアイテム)を生成。この構造により、各To-Doアイテムの下に横スクロール可能なカルーセルが追加されます。