问题​

使用 SwiftUI 制作开发如下图的点餐列表。

思路​

使用 SwiftUI 中 TextField、Stepper、Picker 控件设计界面，结合自定义类数据将数据传入控件，完成开发。

解答（XCode11.4）​

import SwiftUI

//ObservableObject使得Order成为被监听的对象

class Order : ObservableObject{
    //在添加ObservableObject协议的基础上，要改变值的变量必须加@Published
    let types : Array = ["香草","巧克力","芒果","草莓"]
    var type : Int = 0
    //@Published和@State的作用一样，当变量的值改变，视图中也会同步改变
    @Published var number : Int = 0
    @Published var text : String = "Name"
}

struct ContentView: View {
    //在结构体内容声明一个变量的类型为Order类，这样就可以用到外部的自定义数据类型
    @ObservedObject var order = Order()
    var body: some View{
        NavigationView{
            Form{
                TextField("name", text: $order.text)
                //Stepper是一个函数，其中的参数value必须要绑定一个值，rang给定一个范围.，访问变量值的时候不用加$，但是绑定，也就是改变的时候要加$，无论加不加$，它们的值都是一个值，所以这里前面加，后面不加。
                 Stepper("数量：\(order.number)", value: $order.number, in: 0…10)
                //selection表示已经选择的口味，
                Picker("请选择口味", selection: $order.type){
                // ForEach部分表示选择的范围，这其中的order.types只是将值传进去，而不会变化，因此不需要加$符号，从这里开始，是点击进入之后的内容
                    ForEach(0..<order.types.count){i in
                        Text(self.order.types[i])
                    }
                }
            }
            .navigationBarTitle("CupcakeCorner")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在SwiftUI中创建Tab Bar非常简单——以下是如何来做。

选项卡栏(在UIKit中称为UITabBars)非常适合为用户提供在不同视图之间快速切换的能力。以下是如何在你的SwiftUI应用程序中创建选项卡栏。

第一步：将包含子视图的整个视图封装到TabView中，这样会自动为我们创建一个具有完整功能的选项卡条。

第二步：将子视图放入到Tab View中。这将自动为TabBar中的每个子视图创建一个“槽”。

第三步：通过添加.tabItem修饰符为每个子视图创建一个Tab选项。你可以为每个选项卡选择任何图标和标签，SwiftUI会知道每个对象应该拥有哪个索引，并根据当前的选择更新状态！然后，您可以使用状态值，就像是我们对显示选定颜色的文本所做的操作一样。

struct ContentView: View {
    var body: some View {
        //1. 创建一个TabView
        TabView {
            //2. 将子视图放入TabView中
            Text("Home View")
                //3. 为每一个子视图创建一个tab bar
                .tabItem {
                    Image(systemName: "house")
                    Text("Home")
                }
            Text("Settings View")
                .tabItem {
                    Image(systemName: "gear")
                    Text("Settings")
                }
        }
    }
}

问题

创建一个如下图的待办事项视图。

思路

使用 SwiftUI 中的 HStack 和 VStack 来实现此视图，需要对扩张性控件和收缩性控件熟练把握。

解答

HStack{
    Button(action: {})
    {
        //左边的部分，包括蓝边、项目标题及时间
        HStack{
            //蓝边
            VStack{
                Rectangle()
                    .fill(Color.blue)
                    //frame就是元素的大小
                    .frame(width: 8,height: 74)
            }
            //项目标题及时间
            VStack{
                //项目标题
                HStack{
                    Text("看话剧")
                        .font(.headline)
                    //把标题挤到左边
                    Spacer()
                }
                //时间
                HStack{
                    Image(systemName: "clock")
                        .resizable()
                        .frame(width: 12,height: 12)
                    Text("1月18日")
                    .font(.subheadline)
                    //不设置frame，无限大，把时间挤到左边
                    Spacer()
                }
                .foregroundColor(Color.gray)
            }
                //padding是元素和frame之间的边距
                .padding(.leading,5)
        }
    }
            Button(action: {})
            {
                VStack{
                    Image(systemName: "square")
                        .resizable()
                        .frame(width: 24, height: 24)
                        .foregroundColor(Color.gray)
                }
                .padding()
            }
        }
        .background(Color("SingleItemBg"))
        .cornerRadius(10)
        //元素内边距
        .padding(20)

想知道如何在 SwiftUI 中正确地构建图像吗？这就是你要的！

第一步：将.resizable 修饰符应用于图像对象上，此修饰符将调整图像的大小和 frame 到合适的大小。

第二步：：当你改变图像的大小时，通常需要保持原来的尺寸。为此，添加.aspectRatio 修饰符。你可以选择.fill 内容模式，让整个 frame 被图像填满，而.fit 内容模式确保整个图像在 frame 内。

第三步：现在您可以声明图像的 frame 修饰符。

第四步：增加.clipped 修饰符，以确保你的图像超过 frame 的任何部分被切断。

import SwiftUI
struct ContentView : View {
    var body: some View {
        Image("dog")
        //Enable size editing for the Image
        .resizable()
        //Define which method to use to keep the original dimensions when resizing
        .aspectRatio(contentMode: .fill)
        //Declare the frame for your image
        .frame(width: 380, height: 280)
        //Cut out the exceeding parts of the image
        .clipped()
    }
}

第1步：买一个Mac电脑并下载Xcode​

首先，为自己准备一个MacOS系统(万一你还没有)。您的设备至少应该能够运行MacOS Catalina。然后下载来自AppStore的Xcode，它是免费的。Xcode是开发iOS应用程序最关键的软件！

第2步：了解Xcode的基本知识​

下载Xcode之后，是时候了解它的基本结构和概念了。检查本教程，以了解开始使用Xcode所需的所有知识。我们将建造我们的第一个迷你“你好世界”，帮助您决定使用UIKit和SwiftUI(iOS开发的两种不同方法)，并学习Xcode的基本界面。

第3步：学习SWIFT编程的基础知识​

在你了解了Xcode的基本知识之后，现在是学习Swift的时候了。Swift是最常用的编程语言，尤其对于初学者来说。我们已经为此创建了一个免费的电子书，您可以下载免费的！

第4步：通过教程构建Apps​

开始用教程构建基本的应用程序，教程非常多！我们创建了一系列的SwiftUI教程让你开始从头学起！我们建议你先从本教程开始。之后，您可以继续学习这些教程。

虽然我们免费教程几乎涵盖了所有学习iOS开发需要了解的东西，你也许还想看看我们的全面掌握SwiftUI手册。在这本书中，我们将手把手的教你关于使用SwiftUI开发应用程序所需要知道的一切。

第5步：加深对IOS SDK和框架的了解​

一旦你完成了一些教程，在你感兴趣的话题上加深你的知识，你想学更多。在IOS开发中，有太多的框架需要掌握。例如，如果你对增强现实应用感兴趣，可以学习谷歌“ARKit教程”。你有很多选择！

第6步：加深你的Swift知识​

你对iOS应用程序开发了解的越多，就需要更多的Swift技能和概念。如果你不了解一些更高级的Swift概念，可以在官方网站上查一查Swift语言文档(这是一个非常好的来源)或在某个地方搜索或者提问，例如通过StackOverflow或给我们写条消息!

第7步：开发自己的定制应用程序​

要真正成为iOS开发人员，关键是要尽快开始开发自己的定制应用程序。这会极大地提高了你的学习曲线和编程技能。

如果你仔细观察飞鱼的声纳的黑色背景的话，你会发现其实它并不是纯色的背景。而是一张有着细微质感的无缝拼接图案平铺以后的效果，这张图片是我从网上找的现成的图片，直接在CSS中使用就可以了，很简单。但是有些无缝拼接的图案却更复杂一些，图案不像这张图片那样规则，比如下面这张平铺以后的效果：

或者下面这张看上去更没有规则的：

是不是看起来很酷？尤其下面绿草地这张，你完全可以做一个俄罗斯世界杯的网页设计，把它当成是页面背景，绝对够味！

那么今天我们就以绿草地这张为例，手把手的教给你如何在Photoshop中创建类似于这样的不规则无缝拼接图片。首先要搞清楚的问题是：

为什么不能直接将图片平铺？ 你可以试一下，不使用无缝拼接技术，直接将图片或者照片平铺于页面的效果，就比如用这张Flickr上100kr相册中的草地图片。效果大概如下图：

你觉得上面的页面背景效果如何？我想，草地上多出的这几个坑足矣让你在踢球的时候崴脚脖子了！所以我们还是要稍微对它加工一下的，花费这点时间也是非常值得的。让我们开始：

第一步​

下载上面提供的草地图片，在Photoshop中打开它。

第二步​

选择裁切工具（Crop Tool），在窗口顶部的属性栏上的宽度（Width）填上200px，高度（Height）也填上200px。代表我们要在这张图片上裁切出宽和高都为200像素大小的一个正方形。拖动已经选择好的裁切区域放置于图片中草地色彩比较均匀的地方，看上去图片中间的位置比较好。要避免放置于图片上颜色较暗的四个拐角，这样做的目的是让我们的无缝拼接图案色彩更加均匀，效果更好。

第三步​

点击属性栏后面的对勾，确认裁切。接下来，选择滤镜（Filter）>其它（Other）>偏移（Offset）命令，在弹出的对话框中的水平和垂直栏中各填入100，并且勾选未定义区域中的最后一项Warp Around。你将会得到类似于下图的效果。

第四步​

这时你可以看到图片中水平和垂直的不太明显的分隔线，在这一步我们就要消除这两个分隔线。放大图片，选择修复画笔工具（Healing Brush Tool），使用合适的画笔大小，大概20个像素左右，修复图片中的分隔线，直到看上去不那么明显。

第五步​

这个无缝拼接图案就已经完成了。选择文件（File）>存储为Web和设备所用格式（Save for Web&Devices），选择JPEG格式，80%的质量保存。为了测试图片的效果，我们将图片平铺于页面测试一下，如下图：

总结​

Photoshop滤镜中的偏移（Offset）命令是制作无缝拼接图案的关键。利用这项技术不仅可以拼出足球场，还可以拼出很多其它的页面背景。而且熟悉了之后，你会发现这种技术既简单又功能强大。绝对是网页设计中最常用的技术之一。

大小石头，美丽花园​

喜欢这种风格的花园设计，拥有大片繁密的植物花园固然很美，但看多了也会审美疲劳，何况太多的植物有时却会伴随着潮湿、蚊虫和少许的压迫感，而上图这个花园的设计风格很容易让人联想到北方给人的感觉，空旷、干燥，但也不乏生机勃勃。细碎的灰色石子铺满整个庭院，散落几个类似磨盘的圆形石材，石材上架起锈迹斑斑的槽钢，中间填充大小不一的鹅卵石，为了让钢材的材质和细碎石子的材质视觉上过度的更柔和，在槽钢的下放也摆放上了一堆石头，至此，这个花园局部的结构已经完成，接下来该让植物出场了，很简单，随意的在碎石中点缀种类不同的几种植物，但是这其中最出彩的还是石碓缝隙中的几处植物，和石头搭配感觉似乎是自然生长出来的一样，很自然的感觉。

海滨城市的阳光露台​

在一个空气干净清新的海滨城市，能拥有这样一个一眼就能看到漂亮风景的露天，简直是一件难以想象的太过于美好的事情。不精心的打造这个露台花园，绝对是一件说不过去的事情。还好这张图片看上去是那样的完美，高处的藤蔓植物爬上了墙头，铺上了大面积的绿色，环绕在沙发四周最经常出现在视线里的是一大片黄色、紫色的花最为花园的中景，低处的镶嵌在石板中间的前景植物和墙角草也展现了良好的生长状态。这样漂亮的花园上再撒上明媚的春日里的阳光，不用说在这里小酌一杯，就是坐一坐就是一种无比美妙的体验！

随意自然的阳台花园​

只要花草长得好，随意一点、杂乱一点看上去还更自然，摆上一张桌子，两把椅子，再来一杯红酒，一本杂志就能带给人一段让身心放松的美好时光。

平面转化成立体​

扁平化设计风格，独特的地方在于富有空间感的火山和地心的插画的绘制让这个设计有了看点，也契合 Volcano（火山）这个主题。这样的 Banner 创意可以作为扁平化设计中的一种思路，把平面转化成立体，瞬间就能让设计高大上起来。

红色作为主色调，搭配灰色，没毛病。

让设计有文艺气息​

赏心悦目的设计，首页的版式布局很有特色，基本上是左边占据 2/3 的版面，右边 1/3，左右高低不一且三个信息区块样式各不同，给人自由、灵活的感觉。

主视觉区域 798 三个 3D 文字作为视觉的第一层次，细节丰富，大小各异、错落有致，文字上添加上欧洲的古典人物形象，艺术气息更加浓厚。再观察背景，云彩的添加给了 3D 文字空间感，感觉文字像是漂浮在了空中。最后是接近于灰色的背景色，仔细观看会发现背景色也添加了细微的渐变。整个主视觉区域的设计细节完美，3D 文字的设计应该是其中的难点。

光亮风格​

这是国内著名设计师辛旭起的设计作品。

整个设计给人可爱清新的情绪感受，这和设计的整体创意，以及设计中元素的选择、色彩的搭配、质感的表现是分不开的。

先来看设计的创意。“快速美白”无疑是整个设计的关键词，围绕这个关键词展开联想，我们可以看到设计中出现了与此相关的代表时间的钟表、代表美白变化的照片等设计元素，有些元素的选择虽然和关键词有一些的距离，例如画板、棒棒糖等设计元素，只是用来烘托气氛，但整体上的构思和关键词还是相关的。

再来看 Banner 部分的视觉设计。整个 Banner 视觉饱满，其中的元素较多，但按照信息内容来看，大体可以分为这么几个部分，一是画面中心的牙膏以及围绕在产品周围的钟表、照片、画板、椅子等元素，这是一个视觉部分，第二个部分是牙膏上面部分带有花朵、棒棒糖以及蝴蝶结陪衬的视频播放器，第三个部分是“一刷即白”的 slogan，最后左上角的兔兔爱表白的游戏快速通道是一个视觉部分，这几个部分从前至后分别有着从重要到次要的视觉关系。每一部分的设计都基本包含有三个视觉层次，拿最重要的产品部分的设计来说，牙膏作为前景元素是第一层次，周围的钟表、画板等元素作为中景可以看作是第二个层次，而背景的渐变、云彩、气泡等元素是第三个层次。视频播放器部分的设计也一样，无疑不规则形状的播放器是一个层次，棒棒糖和花是一个层次，而这些元素之后的背景又是一个层次。

配色是这个设计中的亮点，整体看上去丰富而不杂乱。从大的配色上来看，产品本身的蓝色是作为强调色的角色出现的，偏红的紫色和蓝色是邻近色，作为背景色来用，橙色和黄色又和红色临近，另外再搭配一点点的绿色，整个作为辅助色出现，整体的色彩纯度较高，因为都是邻近色，所以虽然纯度高，但看上去并不冲突，所以整个设计的配色感觉很丰富，没有单调的感觉。

从质感上来说，设计中大量使用了光亮风格的设计，这种质感的选择应当是从牙膏本身的双层的晶莹啫哩膏体中得到的灵感。网页的渐变色背景、导航栏边缘透明发光效果、视频播放器的镜面效果、牙膏的倒影、slogan 文字背景的渐变和光效，都是和这种光亮质感相契合的。

所以我们可以看到，单从视觉上来说，丰富的层次构成的饱满的画面，统一风格的设计元素，丰富的配色，统一的质感表现共同支撑起整个设计的气氛和味道，缺一不可，也体现了设计师视觉方面高超的控制能力。

木质的使用​

这是一个属于儿童设计范畴的网页设计案例—好奇纸尿裤韩版设计，通过这篇文章的分析，尝试提炼和把握此类婴幼儿用品的设计风格和表现手法。

上面的图片选取了设计中的几个页面，包括首页和内页，纵观整个页面的设计，我们能够感受到这个案例柔和、可爱的设计情绪，这样的设计风格在涉及婴幼儿产品的设计中非常常见，是需要熟练把握的设计风格，通过分析我们来看看要实现这样的设计，这个案例是如何做的。我们一个方面一个方面来分析。

一、布局

先来说页面布局。此设计案例在布局上采用垂直划分的布局方式，首页上最左侧垂直区域放置导航、搜索、视频链接等信息，中间栏放置最新产品、俱乐部、社交平台及搜索表单，右侧为主要内容区，放置 Banner 图和分栏信息。内页根据页面信息的需要从首页的三栏变为了两栏，最左侧的导航栏保持不变，紧挨导航栏的是主要内容信息区域。垂直布局区别于常见的水平分割布局方式，带给整体设计新颖的感觉。

二、色彩

在色彩搭配方面，这个设计的色彩方案并不复杂，毋庸置疑，红色是作为主角色使用的，无论在导航条背景、按钮颜色以及标题颜色上都有体现，高纯度和亮度的红色在大面积的白色背景上显得非常显眼。木质的黄色和 banner 中幼儿皮肤的黄色作为配角色在色环上和红色临近，和红色相比较面积要小得多，搭配起来自然不成问题。大面积的白色是百搭，可以观察到 banner 中的幼儿的衣服、窗帘、沙发、地板的颜色也基本都接近于白色，目的是不扰乱整体的色彩搭配，从这里足可以看出设计师在控制色彩方面的用心。

三、质感

质感的选择也是值得注意的一个方面，也是整个设计的创意的重点体现。导航条部分布纹质感和中间栏部分木质的使用给整体的设计增加温馨、自然的情绪感受。创建布纹和木质的元素难度并不大，类似于这个设计案例中的导航条的质感设计只需要在 Photoshop 中创建类似的图案，然后应用在图层样式中即可。木质材质的创建也是同样的方法，只是创建无缝拼接的图案稍微复杂一点，我在之前的写的一篇文章《在 Photoshop 中创建不规则无缝拼接图案》中介绍了创建复杂图案的方法，大家可以参考。创建好图案之后再使用调整图层调整色相、明度、纯度就可以实现期望的结果。

四、元素

其它细节方面，为了营造柔和、可爱的感受，可以观察到形状元素中大量使用了圆角和圆形，包括 banner 上字体的选择，也可以看到圆角特征的存在。虚线元素也是值得注意的一个方面，无论在导航文字还是首页分栏信息的划分中的使用。都和整体柔和、可爱的设计风格相契合。另外在图片的使用中选择了较多的卡通图案，增强了可爱的设计味道。

五、图文混排

然后是各个信息元素的样式设计。在这个案例中可以看到无论是哪种类型的信息元素，无论进行了怎样的创意，基本都采用了图片加文字的设计方式。图片的使用让设计有了视觉焦点和看点。为了让设计更加生动活泼，大多数图片都经过了处理，去除了生硬的边框，这样和背景融合的更像一个整体。例如下面这个小栏目的设计：

由于内页的栏目和信息内容较多，图文混排的设计方式更是大大提升了页面的视觉效果，让整体的设计更加生动，视觉更加美观。可以想象，如果去掉了这些图片的搭配，这个页面将会显得单调而枯燥。

六、避免重复

在这个案例内页的设计上可以明显的注意到，每一个单独的信息内容的设计样式都是不同的，根据不同的信息内容的特点设计师都进行了不同的创意，保证了整个页面在设计方面不重复，有趣味。拿上图中最后一幅图来举例，整个主要内容区域的设计由以下四个部分组成，每一个部分的设计样式都独一无二，既符合整体的设计风格，又都有各自的特点。另外可以看到这四个部分的视觉比重从上到下不断递减，这和页面信息从上到下的重要程度的差别也是相吻合的。

建议大家对这些栏目的设计临摹一下，整理保存成 PSD 文件，这样做的好处是既开阔了创意的思路，提高了设计的技术，还可以在以后做类似风格的设计时将这些成型的东西直接拿出来用，大大提升设计的效率。

OK，关于这个设计的案例的分析就到这里，分析总结虽然重要但是一定不是最重要的，最重要的大家都知道，勤快一点，多动手是永恒不变的真理，唯此才能不断的积累经验，让自己提高。

浅粉和浅蓝的对撞​

很别致的粉色系红色配蓝色的设计，从这个设计案例中同样可以的出来，北欧风格偏爱色彩纯度低的颜色，灰色的地面，大面积低纯度粉红色的墙面，搭配蓝色的沙发，清新活泼的感觉。

低纯度的粉色调​

北欧的家居设计风格透露出简约、安静之美。其中一个重要的原因是偏爱低纯度的色彩，就像这个设计，无论是地板、墙面、沙发、窗帘的色彩纯度都很低，再加上每个单品简单干净的线条，独特的味道自然流露。

补色的平衡​

简单的白墙白地，只靠软装来体现设计感，棕色为主色调，同色系的米色搭配棕色，补色浅蓝色作为平衡色平衡一下冷暖搭配。

原木的质朴​

明亮、质朴是这个设计带给人的感受，原木色的地板，微带色彩的墙壁，白色的门框，白色的踢脚线，近乎于白色的沙发整体营造出明亮的基调，原木色的茶几、藤椅、木门是设计中最深的颜色，房间中粗犷的木头柱子是最具个性的地方。

有力度的单色系​

偏灰的粗纹理木地板，略带暖色的墙面，白色踢脚线是整个空间的的设计基调。米色的沙发是整个画面的主角，也是主色调，至此，整个设计都是亮色调，浅色调的，接下来用深灰色的边桌、茶几、玻璃门柜、画框来搭配，整个客厅布置的层次感在米色和深灰色的强烈对比下立刻显现出来。整个的设计感觉很安静。

小清新的浴室​

整体上干净、自然、放松的感觉。色彩上，白色打底，地板、墙壁、柜子、毛巾都是白色，搭配主色自然感受的原木色，配合小盆栽的绿色作为强调色。质感方面，凸显原木的质感。形状线条方面：多为线条简洁的矩形，地板、墙壁、柜子、镜子等。

质朴而安静​

北欧风格空间设计能够打动人的原因，就是它常常带给人的质朴、安静、简洁的情绪感受。

如果你觉得这样的设计感觉稍稍有些闷的话，可以用纯度稍高一些的色彩和绿植来增加一些活力。就像这个设计中粉色和靠枕、蜡烛和房间里的绿植所起到的作用。

原木色的桌椅和吊灯是整个灰色空间中的主角，也是画面的主色调，用原木色做主色几乎是自然风的北欧风格永恒不变的设计原则。接近于黑色的花盆、边几、画框是画面中最深的颜色，但是面积很小，给整体设计增加质感的同时不至于让空间过于压抑，白色踢脚线和部分白色墙面可以让空间显得更加轻盈和明亮。

背景墙的浅灰色看上去非常安静，和木纹地板、浅灰色的地毯构成了整体设计的背景和基调。

炫彩和透明风格的网页设计是我个人喜欢的设计风格之一。下面的设计作品和教程是我接触和收集到的这一类的设计风格的代表。这些作品和教程可以在我们动手创建个人的网页设计时给我们以启发，并且教会我们实际实现的技巧。总结起来，这些设计有着如下共同特点：

一、非常漂亮的抽象背景图片，内容以光晕、烟雾类为主。这些图片有着非常好的渐变，可以很好的和网页背景色融合在一起，便于后期代码实现实际的效果。在站酷上搜索这一类的素材，你会发现很多非常漂亮的图片可以用到你的设计上。

二、简洁的排版和字体。你会发现这一类设计页面上文字内容普遍较少，目的是突出吸引人的背景图片。元素与元素之间会留有充分的空间，这样会让网页看上去更有品味。文字会直接放置于背景图片之上，很少有过多的装饰元素。文字字体经常使用线条较细的字体，这样会更加凸显简洁干净的风格。

三、透明的内容区域。我理解，透明的元素不但给人高端、干净的感觉，还让背景图片能够透过元素凸显出来，减少因为元素的遮挡从而让原本漂亮的背景失去吸引力。

四、1个像素的高光。这样的细节绝对不可忽略，因为它给你的设计增加了品质感。只有在细节上做很多的工作，才能做出不一般的作品。

以下是这些设计作品和教程的截图：