[英]Multiple level List in SwiftUI
我正在處理 SwiftUI 中的一個項目。 我想創造類似的東西,
我目前使用的代碼:
TaskListView
struct TaskListView: View {
var tasks: [Task] = Task.all()
var body: some View {
List {
ForEach(self.tasks) {task in
TaskView(task: task)
}
}
}
}
TaskView
struct TaskView: View {
@ObservedObject var task: Task
var body: some View {
VStack {
Text(task.name)
.font(.custom("Avenir Next Regular", size: 14))
//Here.................
if !task.subtasks.isEmpty {
Section {
ForEach(task.subtasks) {subtask in
TDTaskView(task: subtask)
}
}.padding(.leading)
}
}
}
}
Task
model:
class Task: Identifiable, ObservableObject {
var id: UUID = UUID()
var name: String
@Published var isCompleted: Bool = false
var subtasks = [Task]()
init(name: String, isCompleted: Bool = false, subtasks: [Task] = [Task]()) {
self.name = name
self.isCompleted = isCompleted
self.subtasks = subtasks
}
}
我嘗試實現嵌套List
的方式現在可以在選擇上正常工作。 我是否錯誤地執行它?
您可以嘗試遞歸地創建項目:
struct ContentView: View {
var tasks: [Task] = Task.all()
var body: some View {
List {
TaskListView(tasks: tasks)
}
}
}
struct TaskListView: View {
var tasks: [Task]
var body: some View {
ForEach(tasks, id: \.id) { task in
TaskView(task: task)
}
}
}
struct TaskView: View {
@ObservedObject var task: Task
var body: some View {
VStack {
HStack {
Circle().stroke() // replace with a custom control
.frame(width: 20, height: 20)
Text(task.name)
.font(.custom("Avenir Next Regular", size: 14))
Spacer()
}
if !task.subtasks.isEmpty {
TaskListView(tasks: task.subtasks)
.padding(.leading)
}
}
}
}
你非常接近,我會說只改變兩件事。
首先,將 VStack 更改為 Group,這樣各個“任務”將由 List 管理:
var body: some View {
VStack {
Text(task.name)
.font(.custom("Avenir Next Regular", size: 14))
var body: some View {
Group {
Text(task.name)
.font(.custom("Avenir Next Regular", size: 14))
其次,將您的TDTaskView
更改為TaskView
,這樣您已經編寫的代碼將遞歸地構建您的任務列表:
if !task.subtasks.isEmpty {
Section {
ForEach(task.subtasks) {subtask in
TDTaskView(task: subtask)
}
}.padding(.leading)
}
if !task.subtasks.isEmpty {
Section {
ForEach(task.subtasks) {subtask in
TaskView(task: subtask)
}
}.padding(.leading)
}
這是完整的工作代碼(非常接近您的原始代碼):
import SwiftUI
struct ContentView: View {
var tasks: [Task] = [Task(name: "thing"), Task(name: "more work"), Task(name: "Huge job", isCompleted: false, subtasks: [Task(name: "smaller job"), Task(name: "sorta small job")])]
var body: some View {
List {
ForEach(self.tasks) {task in
TaskView(task: task)
}
}
}
}
struct TaskView: View {
@ObservedObject var task: Task
var body: some View {
Group {
Text(task.name)
.font(.custom("Avenir Next Regular", size: 14))
//Here.................
if !task.subtasks.isEmpty {
Section {
ForEach(task.subtasks) {subtask in
TaskView(task: subtask)
}
}.padding(.leading)
}
}
}
}
class Task: Identifiable, ObservableObject {
var id: UUID = UUID()
var name: String
@Published var isCompleted: Bool = false
var subtasks = [Task]()
init(name: String, isCompleted: Bool = false, subtasks: [Task] = [Task]()) {
self.name = name
self.isCompleted = isCompleted
self.subtasks = subtasks
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.