75142913在线留言
【SwiftUI基础篇】9 控件视图List(列表)、Form(表单)、Section(分组)_IOS开发_网络人

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

Kwok 发表于:2021-04-03 11:03:10 点击:3 评论: 0

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.neter8.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.neter8.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.neter8.com/ios/109.html(EditingPage.swift)

 

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

3、使用Link跳转到网站:http://www.neter8.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("这是可以使用其它视图布局")
}

 

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/123.html
标签:ListFormSectionKwok最后编辑于:2021-04-03 12:03:47
0
感谢打赏!

《【SwiftUI基础篇】9 控件视图List(列表)、Form(表单)、Section(分组)》的网友评论(0)

本站推荐阅读

热门点击文章