前言

笔者最近在学习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)。

但你还可以丰富你的视图,比如我就加入了其他的属性。预览如下:

代码如下:

这其中,HStackVStack 的用处分别是将{...}中的元素,按照横向或纵向排列。

Spacer()的用处便是尽量填充空白部分,使得我们的元素👈向左对齐。

我还加入了透明度.opacity(0.5)来使主次更加清晰。

制作元素周期表

好了,我们已经打磨完了好几块拼图,是时候将它们拼起来了!你应该注意到,有一个CotentView我们还没用过。ContentView是所有视图的入口,他就在左侧的导航栏里,现在立即进入他。

ContentView中也有一个默认的Hallo World。同样将它删掉,加入下方代码:

NavigationView {

            List(elements) {  element in               

            }

 }

上方代码的作用是加入一个导航列表视图。列表视图可以帮助我们将元素周期表中的元素一个一个展示出来。我们只需要在in下方输入我们想对每个element执行的操作就可以了。

那我们的操作是什么呢❓当然是为每一个element,都用我们之前制作的“行”视图显示了!所以我们只需插入:

ElementRow(element: element)

即可。同样的,你还可以丰富你的视图,比如添加标题什么的,这是我的预览:

我还在之前的示例数组里多添加了一个“氦”

代码如下:

做到这里,元素周期表就基本结束了。

后续你可以试着在数组中加入更多的元素、在“行”视图中添加插图,按照氧化性排列...   来把它改造成一个真正的元素周期表!