【问题标题】:Use section headers on SwiftUI Picker list?在 SwiftUI Picker 列表上使用部分标题?
【发布时间】:2021-10-22 03:49:37
【问题描述】:

我正在尝试使用 SwiftUI 和 Picker() 获得类似于以下内容的内容

但是当我尝试使用 Section(header: ) 时,我得到以下信息:

Form {
    Picker("S", selection: $sensor) {
        Section(header: Text("This should be a header")) {
           Text("This is the content")
            Text("This is more content")
        }
        
        Section(header: Text("Another header")) {
           Text("This is the content 2")
            Text("This is more content 2")
        }
    }
}

【问题讨论】:

    标签: swift xcode swiftui swiftui-list swiftui-form


    【解决方案1】:

    我认为那不是Picker。我认为这是两个选择器,可能只有一个选择变量。

    在 Xcode 13 中,您可以使用 Inline Picker Style 创建插图外观

    import SwiftUI
    struct PickerModel: Identifiable{
        let id: UUID = UUID()
        var parent: String
        var children: [String]
    }
    
    var pickers: [PickerModel]{
        [PickerModel(parent: "Child 1-B", children: ["Child 1-A","Child 1-B","Child 1-C"]),
         PickerModel(parent: "Parent 2", children: ["Child 1-A","Child 1-B","Child 1-C","Child 1-D"])
        ]
    }
    struct MultiplePickerView: View {
        @State var sensor: String = "no sensor selected"
        var body: some View {
            Form{
                Text(sensor)
                ForEach(pickers){picker in
                    Section(header: Text(picker.parent)){
                        Picker("", selection: $sensor){
                            ForEach(picker.children, id:\.description){child in
                                Text(child)
                                    //Make sure tag is unique across pickers
                                    .tag("\(picker.parent)  \(child)")
                            }
                        }.pickerStyle(InlinePickerStyle())
                            .labelsHidden()
                    }
                }
            }
        }
    }
    

    但在 Xcode 12 中,您必须手动创建选择器功能

    struct MultiplePickerView: View {
        @State var sensor: String = "no sensor selected"
        var body: some View {
            Form{
                Text(sensor)
                ForEach(pickers){picker in
                    Section(header: Text(picker.parent)){
                            ForEach(picker.children, id:\.description){child in
                                //tag must be unique throughout the pickers
                                let tag = "\(picker.parent)  \(child)"
                                HStack{
                                    Text(child)
                                    Spacer()
                                    
                                    if sensor == tag{
                                        Image(systemName: "checkmark").foregroundColor(.blue)
                                    }
                                }
                                .contentShape(Rectangle())
                                .onTapGesture {
                                    sensor = tag
                                }
                                
                            }
                    }
                }
            }
        }
    }
    

    【讨论】:

    • 嗯,你是如何让选择器看起来像这样的?使用该代码时,我的就像轮子一样。
    • 标签下方的选择器样式。如果您复制并粘贴代码,您应该可以立即使用它
    • 是的,我有你那里的代码,但是当我在 Xcode 中尝试它时,选择器作为轮子出来......否则它工作正常。我希望选择器具有与 InsetGroupedListStyle() 相同的样式,这就是您的屏幕截图所显示的。
    • 将我的代码粘贴到一个空项目中,你会看到也许你有一些东西 g 覆盖了样式
    • 刚刚在一个新的应用程序上测试过,同样的事情。也许您使用的 Swift/iOS 版本与我不同?我现在的目标是 iOS 14。
    猜你喜欢
    • 1970-01-01
    • 2020-10-26
    • 1970-01-01
    • 2021-11-11
    • 1970-01-01
    • 2021-11-24
    • 1970-01-01
    • 2022-12-10
    • 2019-11-13
    相关资源
    最近更新 更多