SwiftUI—使用section将列表分为几个组

简介: SwiftUI—使用section将列表分为几个组

当列表里的数据很多,并且这些数据可以被分组时,我们可以使用section,将列表分为几个组。


示例代码:


struct ContentView : View {
    private var languages = ["Swift", "Objective-C"]
    @State private var selectedLanguage = 0
    @State var workingYear: Double = 2
    @State var enableNotification = false
    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Please enter your information:"), footer: Text("Note: Enabling notification to get more infomration")) {
                    Picker(selection: $selectedLanguage, label: Text("Languages")) {
                       ForEach(0 ..< languages.count) {
                        Text(self.languages[$0]).tag($0)
                       }
                    }.pickerStyle(SegmentedPickerStyle())
                    HStack{
                        Text("Working years")
                        Slider(value: $workingYear, in: 1...10, step: 1)
                    }
                    Toggle(isOn: $enableNotification) {
                        Text("Enable Notification")
                    }
                }
                Button(action: {
                // activate theme!
                    print("Your programming language: \(self.languages[self.selectedLanguage])")
                    print("Your working years: \(Int(self.workingYear))")
                    print("Enable notification: \(self.enableNotification)")
                }) {
                    Text("Submit")
                }
            }.navigationBarTitle(Text("Profiles"))
        }
    }
}


2466108-c5714db96e17b65d.webp.jpg

目录
相关文章
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
807 0
|
6月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数,如获取和操作子网元的方法,以及组(Group)的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中,并通过toChildren函数获取满足特定条件的图元。
69 0
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
|
8月前
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
881 0
element-plus:el-table展开图标替换
element-plus:el-table展开图标替换
654 0
el-menu导航报错Missing required prop: "index"、点击只有一级菜单时不合上其他已展开菜单
el-menu导航报错Missing required prop: "index"、点击只有一级菜单时不合上其他已展开菜单
313 0
SwiftUI极简教程10:State状态和Binding绑定的使用
SwiftUI极简教程10:State状态和Binding绑定的使用
1069 0
SwiftUI极简教程10:State状态和Binding绑定的使用
SwiftUI—如何删除List列表里的记录
SwiftUI—如何删除List列表里的记录
398 0
SwiftUI—如何删除List列表里的记录
SwiftUI—使用TabView包含和切换多个页面
SwiftUI—使用TabView包含和切换多个页面
996 0
SwiftUI—使用TabView包含和切换多个页面