Section 08 : SF Symbols and Props

Section 08 : SF Symbols and Props - SF 符号与属性 （13’31"）

How to use Apple’s iOS icons and pass values to components.

使用苹果 iOS 图标与向组件传递值

1. SF 符号

SF 符号包括超过1500个可配置的符号，与苹果平台的系统字体 San Francisco 无缝集成。SF符号的字号和字形都很丰富，可以自动与文本标签对齐，支持动态类型和辅助功能的粗体文本。您还可以设计具有相同设计特征和辅助功能的自定义符号。

（1）下载 SF Symbols App

下载链接：https://developer.apple.com/design/downloads/SF-Symbols.dmg

（2）安装 SF Symbols App

双击下载的文件，根据提示安装 App，可以在 启动台中找到它。启动 App，大叔建议最好是设置为“在程序坞中保留”，这样今后使用方便些。

（3）使用 SF Symbols

在App中，可以看见很多个图标，左侧边栏对图标做了一些分类，右侧图标的显示方式有列表和缩略图两种。每个图标都有自己的名字。使用的时候复制名称就好。另外，顶部工具栏中可以选择字体（我尝试更换字体，但是没看出变化，不知道为啥，大概我没下载相关的字体吧。）和字号（预设好的，我们在前面 fontWeight 修饰器中有过体会的）。因为是系统内置的，所以不用在 assets 文件夹中保留需要使用的图标文件，用起来还是很方便的。

补充知识：

• 如果使用 Sketch 或 Figma 设计 SF 符号，需要下载字体，官网有关字体的页面提供了字体的下载。
• 苹果官网的人机界面指南值得每个开发者认真看看。遵循这个指南，我想开发出来的 app 更显得那么正宗一丢丢，好像是科班出来的。 比如，排版（Typography）部分就介绍了字体、字形、字号等内容，包括修饰器使用的默认值。

2. 新建视图 MenuView

下面为今天课程需要的菜单创建一个单独的视图文件。

（1）打开项目浏览器（快捷键⇧ + ⌘ + J），在 ContentView 文件上右击选择 New File...（大叔说，有很多方法，菜单啊什么的，也可以快捷键⌘ N。视频中的方法利于快速定位新建文件的保存位置）

（2）在对话框中选择 SwiftUI View 类型，单击 Next，选择保存路径（一般不改），在 Save as 的文本框中输入文件名（这里我们输入 MenuView），确认下面那个 Targets 中已经勾选项目。然后单击 Create。

可以看见与 ContentView 文件所在的文件夹中，创建了名为 MenuView 的文件，并且编辑器已经自动切换到编辑这个文件。

3. 制作并抽取 MenuRow 视图

以往的网页设计，都是先搭好整个页面的框架，再逐步填充细节，我觉得可能是因为那种标签套标签的原因吧。大叔去年学习的 Vue 因为使用了组件的概念，比最初的 HTML 要清晰了许多，特别是各个组件的功能和样式细节上。

这里用是方式也是从最具体的某个组件开始，逐步向父级容器（类似 HTML 标签中的上一层）拓展。类似前面提到的，这里的页面设计实现过程好像是玩拼图，一片一片地最终组合成完整的视图。

（1）在 ContentView 中设计好菜单行——封装在一个 HStack 中的 icon 图片和文本框，然后先封装在一个 VStack 中，再将这个 HStack 抽取为子视图 MenuRow。

（2）为 MenuView 视图添加两个属性，标题 Title 和图标 iconName。类型都是 String，用于记录菜单项的标题和前面图标的名称。

视图 MenuRow 的代码如下：

struct MenuRow: View {
    var title: String   	// 定义标题属性，如果定义了默认值，则调用的时候可以省略
    var iconName: String    // 定义图标名称属性
    
    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: iconName)   // gear 就是 SF 符号的名称
                .font(.system(size: 20, weight: .light))	// 字体修饰
                .imageScale(.large)							// 图片缩放
            Text(title)
                .font(.system(size: 20, weight: .bold, design: .default))
        }
    }
}

4. 调用 MenuRow 视图

（1）修改 MenuView 中对 MenuRow 视图的调用。

由于上一步给 MenuRow 增加了属性，此时默认的无参数调用就会报错了。Xcode 很智能，报错的同时给了个 Fix 按钮，点击后可以发现自动增加了第一个参数 title。但是这样还不行，继续报错。再次查看错误提示并点击 Fix 按钮，Xcode 智能补充了第二个参数 iconName。暂时不报错了，等待我们输入具体的参数值。

（2）在 MenuView 中再增加两个 MenuRow。分别指定标题和图标名称。

（3）给包裹 MenuRow 的VStack增加修饰。

struct MenuView: View {
    var body: some View {
        VStack {
            Spacer()        // 占位
            
            VStack(spacing: 16) {
                MenuRow(title: "账  号", iconName: "gear")
                MenuRow(title: "账  单", iconName: "creditcard")
                MenuRow(title: "退  出", iconName: "person.circle")
            }
            .frame(maxWidth: .infinity)
            .frame(height: 300)
            .background(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: 30, style: .continuous))
            .shadow(radius: 30)
            .padding()
        }
        .padding(.bottom, 30)   // 底部留空
    }
}

这里我们再次看到用了两个 frame，这是因为 frame 直接指定宽高的 init() 和定义相对宽高的 init() 的参数不能混用。

// 这么写是错误的
Text("hello")
	.frame(maxWidth: .infinity, height: 300)

本节小结

本节代码请参见 GitHub 和 码云

• SF 符号
• 新建文件
• 为视图添加属性
• 调用视图时根据需要输入参数
• 参数不同的方法不能混用

接下来

给菜单加上头像，学习渐变和颜色等……