【SwiftUI基础篇】9 控件视图List(列表)、Form(表单)、Section(分组)

List(列表)、Form(表单)、Section(分组)辅助类视图控件在开发中也是经常使用到的，内置了样式，我们可以写很少的代码就能完成布局。

一、List 列表视图

List 就是随系统平台而显示的列表控件，自动支持滑动。最简单的使用方法就是将需要传入的组件传给 List。

List {
    Text("低俗小说")
    Text("落水狗")
    Text("杀死比尔")
}

一般我们会配合ForEach遍历数据：

List {
    ForEach(0..<5) { i in
        Text("列表项目" + String(i))
    }
}

但List不需要ForEach也可以使用，上面的代码改为：

List(0..<5) { i in
        Text("列表项目" + String(i))
}

List 还支持传入 selection 参数，是用来配合 EditButton使用的。添加了 selection 参数后，点击 Edit 就会在左侧出现选择框了。演示地址：http://www.55mx.com/ios/122.html

var body: some View {
    NavigationView {
        List(movies, id: .self, selection: $selection) { movie in
            Text(movie.title)
        }
        .navigationBarItems(trailing: EditButton())
        .navigationBarTitle(Text("Select  (selection.count) movies"))
    }
}
@State var selection = Set()

List 还可以像 OutlineGroup 一样显示树状数据,这种模式的使用方法请参照 OutlineGroup: http://www.55mx.com/ios/121.html

List(data, children: .children) { item in
    Text("(item.description)")
}
//dat来源于 OutlineGroup 中定义的数据结构（看URL）

和 datePickerStyle 与 buttonStyle 一样我们可以使用专门的.listStyle 修改器来设置 List 样式定义列表。

 .listStyle(GroupedListStyle())

以下样式除注明以外，部分也仅支持IOS14+，在使用的时候要注意查看文档信息。

DefaultListStyle ：系统平台默认行为和列表外观的列表样式。

EllipticalListStyle ：描述椭圆列表的行为和外观的列表样式（仅支持wach OS）。

PlainListStyle：普通列表的行为和外观的列表样式。

GroupedListStyle：分组列表的行为和外观的列表样式。

CarouselListStyle：描述carousel的行为和外观的实例（仅支持wach OS）。

SidebarListStyle：侧栏列表的行为和外观的列表样式。

InsetListStyle：描述插入列表的行为和外观的列表样式。

InsetGroupedListStyle：嵌套分组列表的行为和外观的列表样式。

二、Form 表单

Form是一种视图容器，用于对用于数据输入的控件进行分组显示，，适合用在设置或检查器中这样的场景。SwiftUI 会自动显示适合平台习惯的 UI，例如在 iOS 中，就是分组的 List

Form {
    Section {
        Text("登录")
        TextField("用户名", text: $username)
        SecureField("密码", text: $password)
    }
    
    Section {
        Text("注册")
            .onTapGesture(perform: register)
    }
}

Form 非常适合和下面马上要讲到的 Section 搭配使用，从而能分组显示控件。SwiftUI以适合平台的方式呈现Form(表单)。例如，在iOS上，表单以分组列表的形式出现。

更多的表单演示代码：

1、一个ToDo类小程序： http://www.55mx.com/ios/109.html（EditingPage.swift）

 

2、简单的个人信息编辑页 ：http://www.55mx.com/ios/111.html

3、使用Link跳转到网站：http://www.55mx.com/ios/112.html

三、Section 分组显示

Section 主要用来在 List、Form 这样的控件中把列表划分成小组，所以可以通过查看上面的 List 和 Form 的对应例子查看 Section 的用法和效果，这里主要补充一些 Section 的其他用法：

Section {
    Text("低俗小说")
    Text("落水狗")
    // 嵌套的 Section 不会有什么效果
    Section {
        Text("杀死比尔 1")
        Text("杀死比尔 2")
    }
}

还可以通过 header 与 footer 参数来设置标题和尾注：

Section(header: Label("顶部标(可配合图标更漂亮)", systemImage: "film"),footer: Text("尾部标注也可以设置不同的样式哦")) {
    Text("这是可以使用其它视图布局")
}

 

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/123