前言
笔者最近在学习SwiftUI,我发现这是一个不仅强大,门槛也低的UI框架,所以萌生了写一个教程的想法,通过自己创造一个元素周期表,让零基础的同学也能享受到编程的快乐。
没接触编程也可以试着做一做,这篇文章就是为零基础准备的,下面是最终成果图:
开始
首先,启动Xcode,建立一个 SwiftUI 项目(Projects)。
由于我们制作的是元素周期表,所以将项目命名为ElementsTable,然后,单击“完成”。
⚠️:请务必勾选SwiftUI。
进入页面后,我们会看到一个名为ContentView的预览界面。这是SwiftUI默认的核心界面,稍后我们将用元素周期表替代这个页面。
制作模型
为了制作元素周期表,我们首先需要一个“元素” 的模型。何为模型?就是一个包含了元素的名称、描述、ID的结构。等到最后我们完成的元素周期表,就是将这些模型一个一个串起来,排列而成的。
我们创造一个像ContentView那样的文件来储存模型。进入菜单栏 -> File -> New -> File... 来建立一个文件。文件类型选择Swift File,文件名称改为Element。
⚠️:Element即元素的英文。
进入刚刚创建的文件后,我们定义一个名为Element的struct
(结构体),这个结构体就是我们的模型。
struct Element: Identifiable {
let id = UUID()
var name, fullName, description: String
}
这个结构体中有4个属性,其中ID属性是为了达成协议Identifiable
。SwiftUI使用这个协议来判别不同的试图。
至于剩下的3个属性,他们是元素的名称、全名、和属性。
最后,制作包含多个模型的数组。我们在struct
的下方定义一个名为elements的数组。
这里我用一个示例元素 氢 制作数组,且当抛砖引玉。
var elements = [Element(name: "H", fullName: "氢", description: "一种很轻的元素")]
这是一个只包含一个元素的元素周期表!但未来我们可以添加更多元素。先继续下一步吧。
制作“行”
你肯定也希望自己的UI界面干净整洁吧?所以我们一步一步分类打造UI界面。首先我们要制作的是元素周期表的每一“行”的界面,然后在将它们拼合成一个大周期表。
再次建立一个文件。这次,我们选择SwiftUI View文件,将文件名改为ElementRow。
进入文件后,我们在struct
ElementRow里面定义一个变量element:
var element: Element
然后将这行默认代码删除:
Text("Hello, World!")
将它替换为:
HStack {
Text(element.name)
.font(.system(size: 45))
}
⚠️:这时,Xcode会报错,因为我们没有在预览中定义变量element的来源。我们只需将下方的预览代码改为:
static var previews: some View {
ElementRow(element: elements[0])
}
就行了。
这其中,我们使用Text()
将元素的名字展示出来了,并且将它的字体大小设为45。如果你做的没错,预览视图应该显示一个大大的“H”,这是氢元素的名字(name)。
但你还可以丰富你的视图,比如我就加入了其他的属性。预览如下:
代码如下:
这其中,HStack
和 VStack
的用处分别是将{...}
中的元素,按照横向或纵向排列。
Spacer()
的用处便是尽量填充空白部分,使得我们的元素👈向左对齐。
我还加入了透明度.opacity(0.5)来使主次更加清晰。
制作元素周期表
好了,我们已经打磨完了好几块拼图,是时候将它们拼起来了!你应该注意到,有一个CotentView我们还没用过。ContentView是所有视图的入口,他就在左侧的导航栏里,现在立即进入他。
ContentView中也有一个默认的Hallo World。同样将它删掉,加入下方代码:
NavigationView {
List(elements) { element in
}
}
上方代码的作用是加入一个导航列表视图。列表视图可以帮助我们将元素周期表中的元素一个一个展示出来。我们只需要在in
下方输入我们想对每个element
执行的操作就可以了。
那我们的操作是什么呢❓当然是为每一个element
,都用我们之前制作的“行”视图显示了!所以我们只需插入:
ElementRow(element: element)
即可。同样的,你还可以丰富你的视图,比如添加标题什么的,这是我的预览:
代码如下:
做到这里,元素周期表就基本结束了。
后续你可以试着在数组中加入更多的元素、在“行”视图中添加插图,按照氧化性排列... 来把它改造成一个真正的元素周期表!