前言

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

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

代码如下：

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

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