美文网首页100 Days of SwiftUI
100 Days of SwiftUI - Day 16 项目1

100 Days of SwiftUI - Day 16 项目1

作者: 星星星宇 | 来源:发表于2020-10-15 17:46 被阅读0次

我们将创建一个WeSplit项目

1.WeSplit:项目简介

创建
1.启动Xcode
2.创建新的Xcode项目
3.选择iOS和Single View App
4.选择SwiftUI构建用户界面

2.SwiftUI基本结构

新建项目的结构
  • App.swift 包含应用程序中启动一个窗口的代码。
  • ContentView.swift包含您程序的初始用户界面(UI),并且我们将在该项目中完成所有工作。
  • Assets.xcassets是资源目录–您要在应用程序中使用的图片的集合。您还可以在此处添加颜色,以及应用程序图标,iMessage贴纸等。
  • Info.plist是一个特殊值的集合,这些特殊值描述了系统如何运行您的应用程序-它是哪个版本,您支持的设备方向等等。不是代码,但仍然很重要的事情。
  • 预览内容是一个黄色的组,其中包含Preview Assets.xcassets –这是另一个资产目录,这一次专门针对例如在设计用户界面时要使用的图像,以使您了解它们在外观时的外观该程序正在运行。

工作从ContentView.swift进行,
var body: some View中some关键字增加了一个重要的限制:它必须始终返回view类型的视图

3.创建表格

SwiftUI提供了专用的视图类型,称为Form
添加10个以上的内容时,SwiftUI需要将其分组,使用Group

Form {
    Group {
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
    }

    Group {
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
        Text("Hello World")
    }
}

如果希望表单拆分为大块时,可以使用Section分为多个独立组。

Form {
    Section {
        Text("Hello World")
    }

    Section {
        Text("Hello World")
        Text("Hello World")
    }
}

4.添加导航栏

var body: some View {
    NavigationView {
        Form {
            Section {
                Text("Hello World")
            }
        }
        .navigationBarTitle(Text("SwiftUI"))
        .navigationBarTitleDisplayMode(.inline) //如果不想使用大标题,可以使用inline
    }
}

5.修改程序状态

“视图是它们状态的函数“。
用户界面由程序状态决定,例如,文本中输入姓名后才能点击继续。
这与之前的方案有很大不同,用户界面由一系列事件决定。事件意味着很难存储应用程序的状态。

struct ContentView: View {
    @State var tapCount = 0

    var body: some View {
        Button("Tap Count: \(tapCount)") {
            self.tapCount += 1
        }
    }
}

@State允许我们解决结构体的局限性。结构体无法更改属性值。但是@State由SwiftUI单独将其存储在可以修改的位置。
为什么不使用类保存状态?
使用类允许我们自由修改它们,但是随着学习,你会发现SwiftUI经常销毁并重新创建结构体,因此使用小而简单的结构体对性能至关重要。

@State专为存储在一个视图中的简单属性而设计。因此,Apple建议我们private向这些属性添加访问控制,例如:@State private var tapCount = 0。

6.状态绑定到View

双向绑定:我们绑定文本字段,以便它显示属性的值,但是我们也绑定它,以便对文本字段的任何更改也可以更新属性。

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
            Text("Hello World")
        }
    }
}

在属性前加入$,这将告诉Swift读取该属性的值,同时发生更改时将其写回。

7.循环创建视图

SwiftUI为循环遍历并创建视图提供了专用的视图类型ForEach

    var body: some View {
        Form {
            ForEach(0 ..< 12) {
                Text("num is \($0)")
            }
        }
    }

在Picker中使用ForEach

struct ContentView: View {

    let students = ["Harry", "Hermione", "Ron"]
    @State private var selectedStudent = 0
    
    var body: some View {
        VStack {
            Picker("Select your student", selection: $selectedStudent) {
                ForEach(students.indices) {
                    Text(self.students[$0])
                }
            }
            Text("You chose: Student # \(students[selectedStudent])")
        }
    }
}

相关文章

网友评论

    本文标题:100 Days of SwiftUI - Day 16 项目1

    本文链接:https://www.haomeiwen.com/subject/ykbwpktx.html