首页 > 解决方案 > SwiftUI - 嵌套列表

问题描述

我正在尝试创建一个嵌套的分层列表,以便对于每个任务我都可以拥有像 iOS 提醒应用程序中的子任务:

在此处输入图像描述

第一次尝试是在列表单元格中嵌入另一个列表。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {

        List {
            List {
              Text("Hello, World!")

            }

        }
    }
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }

但是,没有成功...

任何人都可以帮忙吗?

干杯

标签: xcodeswiftuiswiftui-list

解决方案


为什么你认为它应该是 List in List... 这样的视觉表示可以仅使用一个列表生成,并且具有原生的外观和感觉。

这只是一个演示(没有 UI 调整和显示/隐藏部分的逻辑,这超出了主题),但想法应该很清楚

嵌套列表

import SwiftUI

struct ItemRow: View {
    let category: Bool
    let text: String

    init(_ text: String, isCategory: Bool = false) {
        self.category = isCategory
        self.text = text
    }

    var body: some View {
        HStack {
            Circle().stroke() // this can be custom control
                .frame(width: 20, height: 20)
                .onTapGesture {
                    // handle tap here
                }
            if category {
                Text(self.text).bold()
            } else {
                Text(self.text)
            }
        }
    }
}

struct TestNestedLists: View {
    var body: some View {
        List { // next pattern easily wrapped with ForEach
            ItemRow("Category", isCategory: true) // this can be section's header
            Section {
                ItemRow("Item 1")
                ItemRow("Item 2")
                ItemRow("Item 3")
            }.padding(.leading, 20)
        }
    }
}

struct TestNestedLists_Previews: PreviewProvider {
    static var previews: some View {
        TestNestedLists()
    }
}

推荐阅读