xcode怎么看Ui布局

大家好，这边是小青翼，然后没有关注过公众号的可以关注一下小青翼的公众号，搜索小青翼就可以了。 然后今天我们还我们讲 ot 点 gs， 然后我们现在打开 oto 点 gs 啊，我们这节课讲的是 我们这节课讲欧都 gs 的那个布局，还有他那个简单的 ua。 然后首先我们创建一个文件， gs 文件我现在用的是 pro 版本，然后我们创造一个写个名字简单 u a 女布局 啊，这里我们就创建成功了。然后 ui 的开头 一定要也是 ua， 一定要打上双引号啊，写上 ua， 因为为什么要打双引号呢？而且这个双引号是美式的双引号，不可以是我们中文的那种双引号，他是会爆错的。然后 ua， 嗯， 他刷完以后你为什么要写 ua？ 我也不知道，因为他是要求就必须这样写，第一步就是 ua， 然后我们就是，呃，现在点一下运行给你看看，运行， 那他会出来一个纯白色的界面，这个就是证明我们 ui 创建成功了，就是一个纯白界面，就在这个界面内我们书写东西，知道吧？书写东西，然后 我们这里啊返回一下书写东西，哦，直接书写的话，他是会包错的，我们要，呃，首先要有一个布局撩他啊，然后直接写是不可以的， 六台，这个就是这个是布局的意思，然后我们直接点运行的话，他是过错的，他是过错的，就是不可以这样写，因为他是六台就是，呃， 嗯，布布局的开始，也就是说是整个 ui 的开始，然后我们就要点上 ua， 点撩他啊，这样我们现在点 他还是报错，呃，不是报错了，他现在点就是空白了，就可以开始写了，他是一个开始，然后我们写的话需要在六奥特后面打上括号，因为在括号内部写啊，是首次的。 咱们在括号内部写什么呢？我们写一个文本啊，然后要打上 果然 t e xt 是文本，是要呃 tax 的文本的意思。 然后首先就是这个前面这一节就是定义这个属性，这个这一步是文本，然后后面再写定义文本的属性，这个词等于来引号， 双引号等于什么？什么？什么等于？我们写个你好有文本的内容，小心翼翼 啊，这个文本就是这么创立的。那打双引号是什么意思呢？在整个整个代码环节当中啊，首次出现的内容定义的属性一定要打双引号，首次二次可以不用，好吧？然后我们结束，他结束，他斜杠就是结束，然后封上 啊，前面两个这个这种小的括号就是风起步和风尚的意思啊。然后我们现在是不是在 ui 里面开头写了一个文本，但这样运行他还是会爆错，那他还是会爆错。然后我们要怎么解决？因为我们没有给他布局， 布局分为，呃，垂直布局，呃，还有卡片布局，还有呃水平布局，我们给他写一个 垂垂直布局吧，我们首先不管写什么布局，他一定要有布局，没有布局是不可以的。然后布局我们写个发齿口，然后就是垂直布局，就是他是垂直向下的布局 啊，他就是垂直向下布局，这样是不可以的，这样我们用心，他还是还是错误？为什么错误呢？因为就是说了，呃，书写代码当中有头就要有尾， 他这个只是一个开头，比如说我们要封装上尾巴那样一样打上斜杠，这个就是结束的意思，然后然后把呃发齿口再输入一遍啊，然后这样我们再看一下效果啊，这样就出来了。这个文本， 小青叶的文本啊，你好，小青叶，我们刚才定义的文本，然后我们我再给你们看一下什么叫垂直不绝，我在里面再再次在这个布局里面不好说，没有电脑好说，点点没反应，然后我们再打一个文本， 再弹一个 啊，这次我们定一点 x 的，等于 好封上结尾结束，让我们看一下效果啊， 这样的，这个叫垂直布局，就是在这个垂直布局里写的任何东西都是从上往下一直垂直，垂直往下的，这个叫垂直布局。然后我们还有一个什么布局呢？呃，我给你们演示一下， 把这个给他去掉，哎哎，写一个何瑞三个出。啊，是水平布局啊，这个是水平布局的意思。 这个手机点老点没反应，然后有头就要有尾，有头就要有结尾， 刚才有事，然后我们继续啊，然后是抢到海瑞什么处，这个一，这个是啊水平布局的意思，给你们看一下效果啊， 这个就是水平布局的意思，他就是，呃，就是横向布局，不管你在水平布局当中写多少类人，他都是横向一直一直横向布局，刚才是垂直布局 好了，然后这个我们继续讲啊，这个是，呃水平布局啊，一般进到水平布局啊。 嗯，呃，垂直布局和水平布局比较多，然后还有一个框架叫 frem， 然后还有卡片布局， car 的叫卡片布局，然后我们现在，呃，布局，我们就讲这么多， ui 和 布局，简单的 uf 布局我们就讲这么多，然后因为每个视频我只能讲十分钟，一晚上上传就超超过了，要分两段讲就比较麻烦。然后啊，看一下现在多少人八分钟，然后还有一点时间，我们再讲一点，再讲一个词吧，啊？还是发出口， 我还是用垂直布局来讲，因为好看一些。啊， 我还是用垂直布局来讲，因为相对于水平布局，垂直布局用到的皮卡稍微广泛一点，其实都广泛了。 好，我们再说一个流，说说一个，接着下面说说一个按键按钮，吧台。啊，这是一个按钮的意思啊，吧台 好，八成，然后我们看八成等于 等于什么呢？马腾等于按钮，这个就是就是给他取个名字按键吧， 然后其实一般都要 有一个 id 的，就像点击是什么，呃，就以这个 id 为主， ad 的一一二三。然后呢？斜杠结束哈，再看一下效果， 哦，不是这个，这个我搞错了，不是八点的，这个是 tx， 是文本，他要是这个文本名称，他才会显示名字按键， 这个就是一个按键，看到没有？我没有设置那个，这个点击没有效果。好，我们这一个就讲到这，好，就这样就。

金刚区图标，先来了解一下什么是金刚区，在国外是没有这样一个叫法，是我们国内呢，这就是为了好记忆，好区分，然后把这块呢称为金刚区啊。金刚区呢，它是属于整个页面中整个项目当中的一个核心功能的一个区域， 他的排版布局的话呢，一般都是以这个宫格式进行一个布局。哎，一行五个，或者是一行四个，排两行或者排三行， 那他所处的位置呢？一般哪的下方，一般在首页出现的比较常见，有的情况呢，他是没有摆哪，我们就可以直接进来，以后呢可以看到他的状态呢？导航呢，在下面呢会看到他的金刚区， 它所占的这个比例的话呢，在整个 a p p 当中呢，它只占到了百分之二十到百分之三十这样一个区。好，为什么叫金刚区呢？这一块呢，它会随着业务目标的变化 而发生一些这个调整，这个就是我们金刚区的一个内容。再往下走再来看一下啊，这是我们把它呢从早中晚，下午茶到夜宵这五个时间段给他做一些截图，他们所处的位置布局都是一样的，只是在不同的时间段换了不同的业务 啊，那我们刚刚说了，功能呢，会随着时间随着他的业务的变化而变化，在早餐的时候，第二行的第一个图标，他是不是标注的就是早餐的这样的一个功能， 然后再往后走，到了中午的时候，快十二点了，哎，他这呢就变成了品质午餐，到了下午这呢，他就出现了下午餐，然后再到晚餐，他又出现了啥呢？品质晚餐，到了夜宵他就变成了啥呢？ 验销的这样一个图标了，就是这个呢，会随着时间啊，用户的场景，然后去产生一个变化。除了 金刚区以外，我其实这个界面要看的话，你要整体去看啊，他的底部呢，还会有一些是推荐，这个推荐呢，他也会随着时间的变化而发生一些调整啊，比如说这里边早餐时候，他下面推的就是跟早餐相关的商家， 到了午餐呢，他也会推荐一些午餐的，你们看一下这个界面里边他的金刚区在哪块呢？ 那我们这个时候再来看一下，从上面段时间这块，那这块叫啥呢？状态栏它的高度呢？有些规范，它的这个状态栏的高度呢，就只有二十 p t， 齐刘海的四十四 p t 啊，所以说这个高度这些都要记住啊，不要忘了，再下来的这块呢，就是关于这个定位 和这个消息的图标这块这个区域呢，我们把它叫做为啥呀？对，导航栏再往下走，这边有一个搜索框，那这一块呢，我们把 称作为搜索栏再往下走，这出现了关键词啊，什么沙拉呀，奶茶呀这些东西再往下走，是不是就我们班哪区啊？班哪区的下方，这个就是我们的金刚区。看金刚区呢，他分成了两种不同的形式， 第一种看一下第一行这个金刚区的图标所占的面积是不是比较大，另外的话呢，在整个视觉当中也是最突出的这几个功能是整个项目当中整个 app 当中最主要的啊。像下面的这块呢， 相对来说他也是比较重要，但是相对他来讲是不是就比较次要了？所以说呢，他进行了个落花，这三行啊，全部是他的金刚区内容，那这几个功能根本就放不下我所要展现的所有功能啊。那这个时候怎么办呀？来在最后一个图标的位置给他做一个全部分类啊，放到里边呢， 我就可以在里边做更多的功能了。这个区啊就是我们的金刚区，再下来最底部的这块就属于我们的标签栏，标签栏最多三行一行几个，是不是三个到五个图标呀？我可以选择它切换页面对应的图标，切换对应的页面，这个就是我们接下来要做的整套 app 项目。 明白了没有？一定要把这个去理清楚，曾经我跟你们讲过的关于图标大小文字的规范啊，包括这里边的编剧上下分割的一些间距啊，这个我们都要去记住，包括这些规范的东西都记住，你记住了以后你接下来再做界面的时候，你会把 这个整个项目呢做的会更加规范，而不会乱七八糟的啊。这个首先了解了我们金刚区的区域了吗？嗯，知道了吧？嗯。

好，欢迎来到做个应用 sui 视频教程。当我们新建一个项目之后，我们会看到这样一个叉扣的页面，有以下几个主要区域，我们会一一进行介绍。最左侧是目录区，存放了我们项目里的所有文件。 首先是我们 app 的入口文件，在 swift ui 里， at men 代表了程序的入口。 struct 是我们在 swift ui 里最常见到的结构体，而里面的 body 是我们的应用或者页面或者元素主要显示内容的区域。 window group， 从名字中可以看到， group 是多个默认，我们是支持多窗口的。而 continentville 也就是我们的主页面，即打开应用时看到的第一个页面。在 continentville 里，顶部的灰色信息是一些注视信息，当我们新建一个文件的时候会自动生成。下面我们可以看到一个最简单的 struck 结构体，在包队里，通过 v stack 显示了两个元素，一个是 image 图片，一个是文字 text。 在最下面的 preview 则是上面的 content view 的实时预览。有了这段代码，我们就可以看到右侧的实时预览窗口，具体的介绍会在后续章节。 在 s s 文件里，我们存放一些项目中经常使用的素材，比如颜色，比如图片，比如页面里显示的 icon 或者应用 icon 和系统颜色等等。而 entitlements 设置是一些系统设置的内容，暂时不需要关注。最后是 preview content， 当我们在预览用到的一些内容，不需要在打包 app 的时候用到，比如说一些站位的图片则可以放在这里使用。 顶部的操作按钮有两个现在需要了解一下，一个是搜索，可以搜索我们在项目里的任何内容， 点击之后可以跳转到具体的项目。另外当我们搜索到内容之后，我们可以选择 replace， 可以把搜索到的内容替换为我们需要的内容， 可以看到已经替换为 learning safety u i。 另外一个就是错误和提示 错误，比如说我们随便输入一个内容，这个时候我们点击 command 加 b 来 build 项目来查看是否有错误，会发现这里有错误提示，同时这里也有对应的提示。 当我们系统有很多处错误的时候，可以在这里看到错误的总数，点击之后也会跳转到这里。 另外一种是提示是黄色的提示内容，比如某个 a p i 已经不再使用，但我们使用了之后，系统会提示我们这个 a p i 已经过时，建议我们使用最新的 黄色的提示内容我们可以忽略，可以忽略，不影响程序的运行，只是官方建议进行修改。右侧是我们的预览区域， switch u y 可以做到实时的预览，我们在代码编辑区里面输入内和任何内容的时候，都可以在右侧进行看到。 在预览的右上角操作里，我们可以关闭预览。预览的显示主要包含两个部分，一个是要有预览的代码，一个是要在设置中开启 converse。 点击顶部的按钮，我们可以看到一些属性的设置，比如我们选择某个页面， 比如我们选择某一段代码，都可以看到对应的设置内容。 另外是顶部的操作，在这里是我们的 skims， 也就是说我们运行的项目我们可以自己去定义，在后续我们会有详细的介绍。 右侧是我们的运行区域，我们的项目包含 ios 和 mac， 所以我们会看到包含麦克和 ios 的模拟器，也包含我们的真机设备。 我们可以选择一个我们需要的模拟器，点击左侧的运行按钮来运行我们的程序。 在前面中我们我们说到可以使用 command b 来 build 我们的项目来查看是否有问题。那么同样我们也可以使用 command 加 r 来运行我们的项目。在项目成功运行之后，会看到底部会有一个区域打开，在这里主要显示一些我们运行中的信息和我们一些打印的信息。在后续章节里我们会有详细的介绍， 我们可以暂时关闭。 另外在右侧我们会看到一个加号， 在这里我们可以添加一些我们常用的的元素，比如在这里是我们的组件元素，比如 button， packer， form 等等。 第二个是我们常用到的 modifier， modifier 是我们在 swift ui 里修改元素样式的主要使用的内容， 比如在这里我们看到的 foreground style 和 front 都是 modifier。 另外是代码块，代码块一些常用的内容我们可以自行添加到这里来，就不需要去进行繁琐的输入，只需要输入一些简单的提示就可以有输入我们想要的内容。 后面的三个是我们在 assets 里面添加的一些图片或者一些颜色。 最后是 s f symbo， s f symbo 是苹果推出的一套 icon 系统，我们可以直接在项目里使用，设计的都很精美，不需要我们再花费时间进行设计。对于这里的内容，我们都可以直接拖拽添加， 比如我们添加一个 image， 可以看到实时显示了我们添加的 image。 拖拽添加在前期不太熟悉各个组件的时候可能会非常有用，但是在熟悉之后我们会发现直接编写加系编辑器的代码提示会更有效，可以根据自己的情况来进行使用。 另外一个重要的设置是我们的项目设置，点击我们顶部进入项目设置页面。 顶部的 project 是我们的整个项目，里面包含一些基础的设基，基础的信息和基础的设置，以及我们的 package， 我们可以使用 swift package manager 来添加一些第三方库。 具体的使用我们会在后续有详细的视频进行介绍。在下面的 targets 里面，我们看可以看到所有的 target 和之前讲的一样，因为现在默认合并了 ios 和 mac， 所以这里我们只看到一个。在后续我们会介绍如何添加多个 target， 选择我们某一个 target。 在 general 的设置里，我们会看到这些内容支持的平台，因为这里包含了 ios 和 mac， 所以我们在左侧里只看到一个 target。 在之前的版本里， ios 和 mac 是分开的，合并之后可能会有一些不方便后续介绍。新建 target 的时候，我们会将两个 target 拆分开。 下面的区域是一些基础内容的区域，比如我们的应用版本， 应用分类显示名称， build 号版本。苹果的版本需要是一个上升的，比如说我们默认是一点零， 那么我们下个版本的时候就需要是一个增加的，比如说一点一，那同时在相应的版本号下，我们可以提供不同的 bear 的号，比如说一，我们下次提交的时候，我们可以是一点零，然后被动号是。二， 下面的一些设置我们会在后面的时候进行详细的介绍。另外是 signing 和 capabilities， 在这里我们可以添加我们的开 发者账号，进行甄姬测试或提交应用商店。另外还包含一些基础的设置，我们可以在加号这里添加更多的设置，比如说我们可以设置 app groups， 比如说我们可以设置一些其他的内容，可以双击添加，在后续需要的时候我们会进行详细的介绍。 另外是 info， 相当于是说我们项目的一些系统设置，在新版本里已经单独成为一个 tab。 如果你下载之前的一些老的项目，可能在左侧的文件里会看到一个 info dot info 点 police 的文件，其实它们是同样一个内容。在这里我们可以添加一些需要的设置， 比如使用摄像头的声明，比如版权声明等等。鼠标移动上去之后会出现一个加号，我们可以点击添加输入或选择。如果我们需要添加一个子项目，我们可以将它进行展开，然后进行添加。 所有的内容在具体使用的过程中，我们都会详细的讲解。 另外一个内容是菜单顶部的菜单，有两个内容需要着重去了了解。 第一个是 product 菜单，在这里我们可以看到运行 build 分析打包，有两个操作需要着动知道一下。第一个是 clean build filter， 我们在运行的时候会产生缓存的运行文件，有时插 的可能，其实可能清理不及时，在这里我们可以手动进行清理。另外一个就是 clean all issues， 当有一些问题我们已经修复的时候，但是叉扣的并没有给我们去去除掉，我们可以直接点击 clean all issues 来在这里清除掉。 另外一个就是叉扣的更多设置，这里我们可以找到叉扣的更多设置内容，比如说我们可以设置叉扣的的一些主题，还有一些其他更多的设置，我们会在使用的时候进行介绍。 以上就是叉 code 的具体的基础使用步骤，在后面的章节里我们会详细介绍各个模块的使用，敬请期待。

今天我来为大家录制一门 swift ui 简明教程，开发一个天气 a p p， 然后在这个教程里面我们快速的了解一下 swift ui 的基本概念。 好了，让我们开始吧，看一下我们最终开发的 a p p 的效果啊，是有一个 啊，天气的城市，有一个图标，有一个天气的，呃，就是气温，然后有一个未来五天的预测，还有一个按钮，记一下这个气温会升高， 然后这个气温你点击的时候它会降低啊，这就是嗯，我们最终要开发的这一这么一个天气的软件。好了，让我们打开 x code， 让我们新建一个项目， 然后选择 ios app， 天，这个 产品名字我叫 i weather， 然后语言选择 swift， 呃， eat face 就 是你的这个界面，选择 swift u i storage， 选择空。下一步创建 好的一个基本的 hello world 项目我们就创建好了。然后呢， 在这个 swift ui 布局里面有三个 stick 啊，一个叫 v stick， v stick 就是我我所有的这个元素页面上的这个 ui 元素，它是垂直排列的啊，比如说我再加一个 这样的话，这三个，这三个元素它是垂直排列的，除了除了这个垂直排列，还有水平排列，叫 h stack， h stack 就是横向排列啊， 比如说图片，嗯，字，这个 hello word， 你好，世界，这三个是横向排列的，还有一个叫 z stack， z stack 就是 在这个 z 轴啊，比如说 v stack 是像这个坐标吗？是这个 y 轴啊， h stack 是 x 轴，那么 z stack 呢？就是 z 轴啊，然后呢，他们是这三个元素是排列在一起的，后面我们会介绍一下这个 z stack 怎么用。好的，首先我们先用这个 we stack westec， 然后我们这一个效果呢，总体上就是一个大的 westec， 对吧？因为他们都是竖向排列的。好的， 那我们就这样开发，我们就开始进入开发啊，北京，北京。那我把它的字体设置一下， 比如说四十五啊，这么大，差不多。然后呢，下面是一个天气，这个天气我们用什么图标呢？就是要介绍一下苹果自己， 嗯，设计的叫 s f 符号，你去下载 s f 符号这个软件，这个 a p p， 它里面会包含免费的，可以在你的项目中使用的使量图标非常多一点。天气啊，天气，这里面有很多啊，这个是晴天啊， 然后啊，比如说下雪了，下雨了，这些天气，还有晚上了啊，然后，嗯，这个是小星星啊，小星星， 哎，比如说我们就选一个，选一个这个吧啊，我们就选一个一样的吧。啊，搜一下 cloud， 应该是这个，这个东西呢，我们把它复制一下名称，用这个 image system name， system 要用用这个 system name， 这个应该是这么一个 system name。 然后呢我们可以设置一下它的这个大小啊，先把它改成 resize 吧，可以重， 可以，呃，大小重定义的。然后呢设置一下它的 freem 啊， freem 宽度设置成一百二十，然后高度设置成一百二十 啊，然后你会发现他这个，呃，他这个成正方形了，其实他不是一个正方形啊，也就说我们这边还要再加一个叫 skill to fit 啊，让他，让他在这个一百二十乘一百二十像素的区域里面啊，保持他原来的这个比例，他原来的比例。 然后还有一个东西啊，让它变，把这个阳光，把这阳光显示出来啊，叫 rendering， rendering mode original 变成白色，然后这个阳光变成 黄色了啊，所以我们先先，我们因为现在背景是白色啊，这个，呃，样子，这个我们这个目标软件他的背景是个渐变色，所以我们要不就先把这个背景色加上啊，这个背景色要加的话就用上了 zsdak 啊， 然后我们这个，比如说我们用这个一个唇色，我们用一个唇色，先用唇色，这样的话，这个，嗯， 这个图标就显示出来了，然后这个北京呢，我们也把它改成白色，用这个 fog 的 style white 改成白色，嗯，然后这个这个不录呢，嗯， 这个 blue 呢，其实就是可以，我们可以加一个，呃，直接把界面写上啊，就是 渐变，就是这个，呃， linear gratit， 然后这个 colors 啊， colors， 它是有一个开始颜色和结束颜色，我用 color 点 blue， 然后 color 点 white， 就是从蓝色渐变到白色 standing point， 就是这个是，嗯， top leading， 然后是点 bottom training 这个这个位置。 然后呢，我们要让他全把它变成全局的背景啊，全局的背景啊，首先这个拍领给去掉， 拍点去掉，然后全区的背景的话就是用加一个点 egno safe er， 好的，也就是这样，他他这个渐变色就写好了，然后我们继续写我们的这个 vsdec， 然后是天天气的温度啊，对吧？温度也是一个，嗯，比如七十三度啊，这个度， 这个度怎么怎么拼呢？就是在这个 idit 里面有一个 emoji 和这个符号啊，然后你搜这个 degree 啊，就能搜到度，就把它打进去，七十三度， 七十三度啊，这个，这个也是设置一下这个大小，大小是就设七十三吧，啊，大一点，然后选白色，这个你已经也会了，怎么把把这个文本设置成白 色啊？下面，下面这个五个元素呢？你会发现他们是横向排列的，对吧？横向排列的，所以用 h stack， 对吧？ 但是在这个五个元素横向排列的每个元素里面，他们又是纵向排列的，所以说这个地方就用到了一个嵌套的概念。就是啊，首先我这个整体的布局，我这个整个大的布局是一个 vis deck， 然后在我 vsdec 里面有一个横向的天气布局，是用 hsdec， 然后 hsdec 里面每一个小的元素又是一个 vsdec 啊，比如说我先写一个 vsdec， 然后是 text， 是，呃， tuesday 啊，比如说我这写中写写，写中文吧，啊，周二周二，然后又是一个 s f 符号啊，然后我就还是用这个，用这个 点 random mode， original 啊，然后 recitable， 嗯，然后 skilled to fit， 然后 frame， 嗯，是，这个就是 四十乘四十吧，试一下啊，好像有点小，嗯，四十八吧，四十八乘四十八 啊，可以。还有一个是 text 多少度？嗯，我就直接复制这个，复制这个，嗯，改成七十度， 然后这个也是，呃，改一下这个字体的大小，这个挺大，这个是五十吧 啊，可能没有五十，可能跟这个字体是一样的，四十八可以小一点吧，四十二吧，三十五啊，三十五，三十， 三十吧，三十。然后它的字体颜色也是白色啊， 还有这个也是一样的，都是颜色是白色，因为，因为是有一个蓝色背景嘛，对吧？那么好了，那么如果说要写未来五天的这个呃 h stack 的话， 我是可以复制粘贴的，拷贝五次，拷贝四次，复制复制一次，拷贝四次，这样的话，我是不是就有了这个 h stack 了啊？对不对？ 所以我这样，这里这里给大家演示一下，也就是说我们这个用户界面的话，是可以通过嵌套 h， 嵌套 we stack、 h stack 和 we stack 啊，来达到我们想要的这个效果。然后呢？我们在 是先这样啊，但是先这样可能代码有点乱，但是我们先这样，然后我们调一下它的这个间距啊，这个 h stack 有一个 space in 的一个，呃，参数啊，比如十 啊，三十，嗯，是吧？二二十五吧，这样的话他就有一个间距了。 然后呃，还有一个东西是在 wes， 在这个 h s x 下面还有一个 button 啊，就是这个按钮，这个一键清除雾霾的按钮 啊，可以写一下啊，这个嗯是一个文 文本，一键清除雾霾。然后呢，他这个八特呢？是，嗯，有一个宽高的，他这个宽高应该是，嗯，宽度是二百八十，高度是五十， 然后背景颜色是白色， 还有一个是它的一个圆角啊， corner red radius， 这个圆角是十， 这个大概就是这个，这个字体啊，字体要让他加粗啊，然后这个大概是这么一个效果啊，可能字体大小再改一下 啊，这个地方我用这个 title 啊，挺大，太大了， title 二啊， title 二吧， 就用这个吧。好了，现在呢，我们这个效果啊， 效果大体上是这个写完了，但是你会发现这些位置不太对啊，比如说这北京，然后这个图标，这个，呃，字体他们应该是在上面，然后中间是有一个横向的啊，天气的预测最下面是一个按钮，所以我们在这个， 在这个里面呢，我们要用的一个叫 spacer 的东西，嗯， spacer 好了，如果我上，我要在这个中间加上 spacer 的话，这个 spacer 是什么作用？ 他就会把你上面的这些元素往这个空，往这个页面布局的上方去推，然后呢把下面的这些元素往他下面去推 好了，然后我在这个 h stack 之间再加一个 space 的话，啊，哎，他就会产生这么一个效果了，也就是说这一块有点像居中啊，但是不是居中，因为上面这个，呃，有一个大的一个区域， 然后这个地方啊在最下面，然后我们可以在这个北京这些东西加一些，嗯，这个 padding 啊，加些 padding， 比如说我把这三个再嵌套到一个 vis deck 里面，因为你是可以嵌套的嘛，对吧？嵌套的一个 作为 steak 里面，然后从界面的效果来说是没什么，呃，没什么这个影响，那我再加一个拍点啊，就可以啊，这样，这样的话就有编剧了啊，这个编剧。 然后我这个 spacing 其实还可以设置它的高度， 比如说我这个高度让他因为现在这个，现在这个间距和这个实际的效果来比有点大啊，所以我这个间距让他一百，比如说一百啊，可能这么高，那我改成嗯，七十二 啊，是不就小点了啊，对不对？好了，我这个也改一下，嗯，七十二啊， 好，这样的话我们大体就是把这个 u i 的效果算出来了，当然这个地方没有改啊，我们我们现在呢就改一下，把这个 h step 改一下啊，就是这个周二。是 是是，这个不用改，周三周三的话，我们这个是一个呃完整的一个晴天的一个效果啊，打开我们这个 s f 符号啊，我们搜这个就是这个晴天嘛，晴天应该就是上，嗯， 我们就选这个吧，上点 max 啊，拷贝名称啊， 这算是上点 max， 然后点 feel 啊，然后是八十度，八十度， 所以你基基本上只要改这几个字就行了。周四啊，后面我会给大家告诉大家怎么去重购代码，让这个代码更加精简啊。周四他是一个刮风的一个效果， 就像我们这输入 when 的啊，就是这个啊， when 点 snow 就是又刮风又下雪，拷贝然后是六十五度， 是吧，所以你有点重复了啊，你会发现有点重复，然后周五周五周五是一个什么呢？就是也是一个阳光的 的效果啊，但是这个我忘记他叫什么名字了，搜一下，上上应该是哪一个呢？ 好像啊，这个 sunset 啊，这是日落 sunset 是吧？应该是这一个 sunset 点 fail 靠背注，这个是 sunset 点 fail， 这个是二十八度，最后一个是周六 周六这个是啊，这个又和这个周一是一样的了，就是不用变，然后温度是三十三度。好的，这样，我们其实这个我们预在这个，用这个 iphone 十三 pro 预览一下啊， 你会看到啊，我们基本上已经把这个天气 天气的这个呃效果啊给他做出来了，然后还剩下这个按钮和和点击，还剩下这个按钮和点击事件没有，没有处理， 那按钮和点击事件是在这个 swift ur 里面是一个啊，非常常见的一种操作啊，所以说我们要引入一个叫 state 状态的一个东西，也就说我们要把这个温度的状态保啊，保存下来， 比如说我这个状态默认刚开始是七十三度，然后我这个地方呢，我就要用刚开始要用默认的状态啊，然后看一下这个效果是没变的啊。然后呢，我们这个，当这个按钮点击的时候，我们 先通过修改状态来改变这个 u i， 比如说，嗯，点这个吧， 是吧？比如说我，当我点击按钮的时候，我执行一个代码，把这个底格锐减一，然后当我这个底格锐减一的时候，因为我这个 swift ui 是是相当于是数据驱动和事件驱动的， 当我，当我发现我这个 text 依赖于这个 degree 的时候，当我 degree 变化的时候，我这个 text 会重新渲染，所以说就会看到我们这个变了啊，然后呢，还有一个就是说什么呢？当我们点击这个 text 的时候，我们希望他让他就像这个 啊，那我们搞反了哈，搞反了也应该是让这个按钮加 e 啊，这个， 其实这个是其实这个意思啊，就是这个意思啊，加 e。 然后呢，当我们点击的时候，点击事件就是 on tap 啊， on tap gesture， 那我们这很简单，就是 degree 剪一页啊，你会发现我我就实现了这个效果啊，是吧？ 当我点击这个，当我点击这个温度的时候，他是减一，当我点击按钮的时候他是加一啊，就跟这个是一样的了， 所以我们就很简单的通过一个 state 变量啊，来这个，呃，来来进行一些状态的变更啊，比如说我再加一个，再加一个什么呢？比如说我要我要 做一个，就是呃 duck 模式啊， duck 模式。比如说我们这里看一下啊，我要搞一个 duck 模式， 现在是现在你在这个 duck 模式下，就是这个黑暗模式下，它是没有生效的，对吧？所以我们再加一个就是 state 哇，嗯？ is duck 啊，等于 force 默认不是 duck 模式。然后呢？ 比如说我们，我们就在这个北京上面加一个吧，北京上面加一个啊，当我点击这个北京的时候，我这个也是 duck， 是 top， 就是切换 呃黑暗模式。然后呢？我们这个点要定义一个，我可以为了简单，我可以先把代码写在这里哈，就是说当是当是黑色的渐变色的时候呢，我是用这个 color and black 和 color and grape。 当不是黑暗模式呢，我就用蓝色和白色，要是黑暗模式呢，我就用这个黑色和灰色啊，让我们看一下这个效果， 哎，是不是因为我点击本镜的时候他就变成了这个，这个 as duck 就变成处，是吧？当我点击本镜的时候，他先如果说刚开始是 forth 的话，他这个掏狗就会变成处，当他变成处的时候，再掏狗就会变成 forth， 就是切换处和 for boss 啊，然后你会看到我们这个啊，界面啊，就变成黑色模式了，啊啊？这也是一个呃，通过 state 来声明一个状态的变更啊，看来就是一个代码的优化啊。因为我们这个地方都是 这个，这个地方都是重复了，这个地方是重复的，如果是重复的，我们就把它抽抽离出来，比如说我们把这个第一个抽离出来，把它剪切，然后呢？剪切，我们在这个地方 写一个新的类，比如说这个叫，嗯， future weather item view， future we， 呃， future better view， 然后它是它对实现的是这个 view 的这个，呃协议，然后我们写一个，哦，对，然后把它烤，烤过来，烤过去，烤过去以后我们这个 view 就可以这样用， 就可以这样处着画一个 real 对象，是不是？然后我们这边 就都删掉了，这些就都删掉了，哎，等一下啊，我们就一步到位吧啊，因为 因为我们这个微友他是可以指定他的标题，他的这个，嗯，就是图标还有他的温度的，所以说我们干脆这个地方直接就把它写上啊，这是 that 是个死坠，然后一米之内 是个 string， 然后这个 degree 是个 int 啊，那我这边就不用这个写死了，对吧？ 然后我这个地方他会报错，因为我要传参数，没有传参数，把它传成参数。你说这个 title 是周二 啊？一枚之内这个是 cloud， cloud 的颜色 in fail digree 就七十啊， 好，这样以后呢，我们就把它把这个静态的数据替换成动态的参数， 对吧？这样的话我们就可以通过参数来自定义这一个 vivo 的这些效果，可以看一下 是不是好了。我们有一个相当于说这个东西像模板一样啊，像模板一样，这个 vivo 可以自定义完以后，就像模板一样，你就往里面填就行了啊。周三以后我就把它搞过去， 周三然后上脸 max 的费用把这个也考过去，然后那是八十度，是不是把这个就可以干掉了，用这个 vivo 来显示啊，然，然后再拷贝一下，周四， 这次是 one 的点 snow， 然后温度是六十五度，是不是这个就可以干掉了？ 好，继续，还有两个周五和周六。好的，周五考过去，然后是桑 set 电费啊，考过去，然后是二十八度，这个就可以干掉了，对不对？周六考过去， 老师搞错了，然后是同样的脸上面，然后是三十三度，然后这个重复的这些东西去掉了啊，这样用这个 vivo 来解决重复有个有个什么好处呢？就是说假如说我要统一修改它的样式的话啊，比如说我这个地方得统一加一个，呃，加速 统一加一个加粗，这样的话我这些全部都是加粗了，对吧？甚至说我要给他改一个，嗯，字体的颜色，嗯，字体改成大的啊，就是改成三十啊，但是你会开头改成三十的话，这个界面有点有点撑不开了，有点撑开了啊，加个拍点试试啊。所以说这个太大了啊，太大了， 加个十五吧。啊，二十好，二十还差不多啊，就这个意思。因为你这个微友是啊，一个一个单独的单独设计的一个微友的话，你看你去可以统一的修改他的这个样式，也就说我们这个天气 app 的话啊，就开发到这里啊，我们在越南一下 用我们这个十三 pro 运来一下 好了啊，大概就是这么一个效果啊，然后点击一键清除雾霾，它的温度。是 啊，点击这个一键清除雾霾，他是把温度升高，点击这个温度，把温度降低，我们这个效果也都实现了啊。 好，今天呢，我们这个 swift ui 简明教程就到这里啊，我们下一下一节课，再见。

大家好，今天跟大家分享的是爱丢失的界面布局，我们看一下爱丢失的预览窗口素材，特效窗口、信息窗口、时间窗口、爱丢失的每个窗口，只要我们右 击他的右下角，我们耳后用鼠标的左拽，左键托拽都可以放大缩小都可以放大缩小 啊，我们的预览窗口直接就可以放大了，而后我们啊拖拽他的右下角，用鼠标的左键就可以缩小。实践窗口，我们看一下，可以放大， 可以缩小，都可以放大缩小。另外他每个窗口包括竖开窗口，特效窗口，信息窗口啊，吉他的数字都可以 拉出来，随便放在什么位置都可以。嗯，特效窗口，嗯，我们拉出来搁信息窗口 合并都可以。如果我们把窗口弄乱，怎么恢复回来呢？有的时候我们看到关闭以后，窗口不见了，那我们怎么找到窗口呢？啊？我们唯一不能关闭的就是这个预览窗口，因为关闭预览窗口就关闭了 id， 我们如何恢复到最原始的状态呢？只要记试图窗口布局常规，也可以按快捷方式康字，呃， f 加 out 加 l 啊，直接恢复成默认状态。有的时候我们预览窗口有时间还有电瓶， 我们感觉有一些遮挡啊，怎么去除呢？很简单，我们均试图屏幕显示把状态栏勾掉，我们一看时间和电瓶都没有了。哈，这也有个快捷方式，可以按 ctrl 加 g 啊，这又回来了。另外还有一种方法可以去除时间和电瓶的，就是我们进入设置用户设置，然后我们进 屏幕设置，这里都有时间啊，删除电瓶，删除，这样就没有了，也可以，这个地方可以。好，今天就跟大家分享到这里，谢谢大家。

大家好，欢迎来到做个应用 sweet ui 视频教程。在本次视频里，我们会学习如何新建文件、删除文件和添加文件。我们可以选择菜单栏里的 file new 来新建不同类型的文件。 在这里我们主要介绍两个类型，一个是 file， 一个是 target。 在之前我们已经说过，整个 excel 的文件是一个项目。在项目里有很多的 target， 比如 ios、 macos 和 watchos 等。 我们目前的项目已经是一个 ios 和 macos 的项目。在这里我们添加一个 watchwise 的项目。选择 targets。 在这里我们选择 watchos。 在 application 里面选择 app， 双击或点击下一步新建一个 watchos 的项目。在这里，产品的名称我们可以命名为 watchos。 下面的选项和之前新建项目是一样的。在这里我们需要选择 watchos 的类型，新建一个单独的 watchos app。 新建一个 watchos app， 并且新建对应的 ios app。 为已经存在的 ios app 新建一个 watchos app。 在这里我们可以选择我们的 ios 项目， 大家可以根据自己的实际需求进行选择。在这里我们暂时选择第三类点击 机完成。 在这里我们需要点击 active 激活这个项目。 点击完成之后，我们会在目录里多了一个新的 watchwise 项目。 同样在项目里我们也可以看到多了一个 target。 watchwise app 的 target。 那么我们就可以进行 watch y s 的开发啦。 另外一种是新建文件，我们可以在菜单栏里选择新建文件。我们也可以任意选任意右击任意文件。 选择 new file。 在这里我们可以看到不同平台下的文件类型会有所不通，其他的类型我们会在需要的时候进行单独的讲解。这里有两个一样的，我们着重指出一个是 swift file， 一个是 swift ufo。 这两个文件其实是一个类型，只不过在 swift ui view 里已经帮我们预设好了，需要显示 view 的 struct 结构体。而 sweet file 则只是一个空的文件， 我们可以根据是否需要显示 view 来选择内容。在这里我们暂时选择 sweet ui view。 在文件命名的时候，建议使用英文且手 字母大写，同时遵守驼峰命名规则，就是一个单词的首字母大写。比如我们希望命名为 homevill， 则 home 和 will 首字母都要进行大写。 为了方便根据文名称、文件名称进行快速判断文件里的内容，我们一般在文件命名里去做区分。比如 will 类型的文件，我们就命名为某某 will， 比如 home will content will。 在后面我们学习设计模式的时候，会学习到 will model， 就可以命名为某某某 will model。 这样简单地通过文件名就可以快速做出判断。 在这里可以选择 我们保存的项目 group， 就是我我们在项目里存放的文件夹的位置。 而 target 也就是我们需要这个文件存放的 target。 可以使用的 target， 我们选择 learn swift ui， 点击新建， 就可以看到我们新建了一个 home view 的这样一个新建新的文文件。 在新建完成之后，我们也可以选择文件。在右侧的设置里，我们可以看到这个文件所属的 target。 一个文件必须要属于一个 target 才能使用，否则会报错。比如我们的 homeville 暂时没有在 在 watchwrys 项目里，那么在这里我们如果使用 homewhere 就会报错， 就会提示找不到这个文件，那么我们可以在 homeball 里添加到这个 target 即可。 拖动。我们可以拖动文件进行调整排序，或者移动到文件夹。和前面我们说的给不同类型的文件命名不同的规则一样，在目录里我们也可以通过设置文件夹来整理文件。比如我们可以使用 shift 点击来选择连续的文件。 我们也可以选选使用 command 加点击选择单个的文件，然后右键 选择 new group from selection， 我们命名为 view， 这样我们知道在这个文件夹里就是我们常用到的 view 文件。 另外，我们也可以右击选择 new group reserved folder， 我们可以命名为 app。 这两个的区别在于一个是否有真实的文件夹。我们可以选择右键选择 show in founder， 我们可以看到我们新建的 view 是存在真实的文件夹的。而 learn self ui app 是没有真实的文件夹，只是在目录里供我们管理进行使用，大家可以根据自己的需求进行选择。 另外一种是添加文件，我们可以添加一些其他地方我们存在的文件到我们的项目里。比如在这里我们有一个 swift 文件，我们可以直接拖拽添加到文件里面来。 在这里我们可以选择 copy items。 if needed 则是将文件拷贝到我们的项目里，否则只是关联这个文件。未来这个文件在其他项目被删除的时候，我们当前的项目也没有办法使用。 and it folder， 我们直接选择 create groups 即可。同样， and to targets 也是选择我们这个文件需要添加到的项目。呃 targets 里我们可以选择两者， 那么我们就可以使用这个文件里的内容。当一个文件我们不需要的时候，我们可以进行删除。我们可以右击选择 delete， 或者选择文件之后点击删除按钮。 remove reference 只是在我们的目录里进行隐藏，在我们真实项目的文件夹里依然是存在的，而删除则是从整个项目里删除。 以上是对文件的基础操作，欢迎大家关注我们的频道，未来会有更多 safe ui 的内容，谢谢大家！

如果想要让设计好的 ui 界面在不同的尺寸设备上都能有良好的展示，那么界面开始设计时就需要采用山格来规范我们的布局。如何在设计时正确的使用山格系统，其实很简单。 首先我们要了解构成三格的元素列，水槽和页边句。列就是内容区，而水槽其实就是内容之间的间距， 内容区之外的这部分空间就是页面编辑。接着我们需要定一列的数量， pc 端通常会使用十二列三格，因为它能够包含四种不同的尺寸模块， 如果业务比较复杂，则可以使用二十四删格。当然你也可以根据自己的实际项目需求调整删格的数量，数量越多，页面元素的布局也就越灵活，但版面也会被分割的比较细碎，需要认真把控。接着我们再来定义好水槽的宽度，你可以使用四或者是八的倍数，但我推荐使用 六像素，这样既能够保留模块之间的呼吸感，同时视觉上也不会有太强的割裂。最后再定义好触发页面布局的关键值，一个想意识的布局就完成了。

各位同学大家好，欢迎大家参加十天技能课堂系列，我是主讲老师李延辉。今天我们来看 aimatui 第二节勒奥的布局，这节课呢，我们来看一下。嗯，前端的 uigo 的布局方式。好，首先呢，先了解一下基本的概念啊。好， 呃，他分为行和列一行呢啊，我们分割为二十四个啊，山格栏位，那么也就是力啊，进行布局，如果需要占满一行的话，我们要写，哎，以这种方式来写， 那首先呢，我们先理解一下，第一个一 a l 表示一行一 l 靠，表示什么？一列，哎，我们先来试一下。首先呢，我在这边呢已经启动了，我们首先打开啊，好，上节课呢，我为你做了个按钮，来调试一下我们这个。嗯，前端库呢，有没有窄路进来。那么今天呢，我们来做 第一个布局，首先在这里呢，我们先，哎做一个什么呢？这边每节课可能都会写啊，那课下不不写的原因呢，是因为你在课下写了多余的代码啊，课上的话可能会乱，不知道为什么会有这边有这么一个代码。 这每节课开始呢，我先写个链接啊，那么写上链接，那这边就有链接了，然后相关的我在这里呢，哎，每次我都刻上，我新建一下啊，累 out， 累 out。 好，这里就已经有了，有之后呢啊，先给他做一个起始的 dib 吧。嗯，给他起个名字叫累 out， 然后全部在里面做就 ok 了，然后在这里，啊，不对，在这里呢，我们把它做成这个 这个模式，这边呢我稍微的改动一下啊，好，这样我复制的话就方便一点。好，这边复制一份粘贴， 加个逗号。这里呢叫雷奥特，那这个呢叫做雷奥特。好，那这边呢也改成雷奥特。 好，这样就可以了。有了之后呢，我写一个，先写个一二三啊，看看有没有成功。好点一下一二三有了。好，在这里呢，我们先写第一个， 先写一个。你如果提示的话一也要这样子啊，如果不用提示就一也要肉啊。表示一行。然后呢我再写一个一 l 啊，靠表示一列。我先写个二十四，这样写的话你其实看不出来什么，然后我把它做成这种， 可以就是变大变小。那我现在要给他加 css 来测试他。那 css 怎么加呢？因为他不是标签，对吧？他不是固定的这个标签。那我可以直接点上一页肉，就是可拉 拉丝的方式。那克拉斯方式有用吗？我们来看一下啊。 birgron 给他加一个背景颜色。嗯，加一个就是这个颜色啊。 这个是什么绿啊？墨绿是吧？好，然后我们看一下第一个。哎，墨绿加上去了，然后给这个一列呢？我也加上去。其实他默认就是沾满的，对吧？好，来。 good。 好，深深一点的颜色，这样就沾满了，然后他的字体颜色呢？ 好，白色。那这样再来看一下就有了。那本身这个太矮了，我让他高一点，这样我测试起来的话就会方便十 px 零。 好，这样子的话就高一点，然后的话如果有多行的话，那问题的话就是他们会连在一起也不好测试。这样子的话我让他分开来，这边的话做一个外边 连句零，这样子我们看一下是不是就搞定了。好，那么说这里是二十四，就是冒号 spa， 二十四表示一整行，那我这边呢，就是冒号四变写二十四，那这样子的话是没有任何区别的，所以我们要写个 不占满二十四的，比如说这里我只占满十八个列，十八个三个蓝位冒号变，然后改成十八，保存一下，在这里呢就变成十八，哎，这边空出来的，其实就是这个行没有被填满的部分，看到没有， 哎，有了，好了，那这个呢，第一个和第二个我们就解决了，大概意思我们也理解了，那我们来看第三个，如果想四列啊，比如说我要我有四个列，占满二十四个，三个蓝位，那每列呢？就 六个，对吧？这个很容易理解，所以把它复制一份啊，在这里粘贴一下，那每列占六位，那复制。 哎，复制两个，我们看一下，是这样子的吧。啊？再复制一个，就这样子，对吧？再复制一个就占满了，但这样也是不清晰。中间这个分割呢，我再做一下 css， 这样更清晰一点啊， 白色，然后呢，他这个线的像素呢？不计算进去啊？啊？不计算进去，这样子的话，你看是吧？哎，就分割了，撕裂吧，没问题，很好理解啊。那么下面我们再继续往下看 好手册里的这个液啊，这个矿呢？紫元素还有一层，那为什么要这么做呢？我们来看一下手册，那没手册的代码， 为什么里面还要再做一层 drv 呢？哎，这个地方的话，我们就来看一下是什么原因，我把它复制一下，你直接这么做的话啊，不方便我们布局吗？这里呢，有一个叫做啊，每一列，每一个山歌栏位的间隙啊 get， 比如说间隙是十， 你看不出来对吧？你看不出来他的区别，但是这边有溢出，比这个正常的有溢出这么多，那是怎么回事呢？哎，我先去掉啊，先不写啊，不写他就错了，他这边。好，我先去掉，在这个地方呢，我做个 div， 然后六，然后给他来一个 背景颜色啊，比如说我选第三个颜色吧。好，这个时候呢，大家再来看，是填满的吧，然后呢我给这里给他加一个这个嘎特是十他的这个间隙， 你看里面的 drb 和外部的这个力单元格啊，这个三个蓝位是不是有这么多间隙啊？ 哎，就是这么一个做的，所以为什么这个手册上都都要里面还要再加一层呢啊？就是方便各种布局，哎，我们上面呢就是为了简单，所以说没有做第三层啊，其实要做的啊。好，下面我们再来看下面一个， 下面一个呢，可以使用这个太表啊 flax 来设置三个蓝位的对齐方式。好，那这里的话我们就复制上面这个， 那现在的话我做做四，做四啊，然后只做三层啊，只做这个三列，只做三列的话我们保存一下。哎，是不是这样的，那我想让他有对齐方式，让三 都居中，那怎么办呢？首先第一步太快啊，来布局，然后呢？哎，然后呢对齐方式加 spa， 然后这边写上生产啊居中。 好，我们来看一下三个呢都已经居中了，那我这里呢没有栽露他其他的对齐方向的每一个单词，我们还是看一下手册，往下拉啊，往下拉，这个混合布局就自己看吧，这个很简单，没有什么新东西啊，这个对齐方式在这里呢，会有这么几个， 哎，我们选择其中一个，比如说我要他这个分散布局啊，退 好，分开布局，哎，就变成这样子，对吧？啊？一般来说居中的比较多啊，居中， ok， 居中了，好，那么最 后一个呢，就是偏移啊，我们每个呢，比如说我向右边移动一点点，哎，那在这里呢，我们再设一个奥斯，比如说移位，大家看， 呃，这个你可能看不出来，必须复制一份粘贴好，这边再来对比一下啊。哇塞，一，哎，是不是偏移了？那每一个我都让他偏一个蓝位啊，他就是偏一个蓝位， 哎，这边就便宜了。好吧，好，那这样子的话，我们整个布局呢，哎，就这么多东西。下面其实还有啊，我们看一下他这里呢，嗯，提供了响应式布局，还引入了额外的泪眠。这个呢，我们放到最后去 再去了解探讨。我们第一节课呢，就先讲一下类奥的这个布局，因为下节课还有个布局。那这个方， 那后面我们再来说啊，一共就是这么多，因为他是响应式的， ok， 那么这节课呢，我们就先讲到这么多，最后呢，感谢收看本次课程，谢谢大家，再见。

大家好，欢迎来到做个应用 safety 视频教程。在 excode 里，我们可以添加一些常用到的内容，比如颜色，自定义的 icon 等。现在我们就来学习一下如何使用 ass 在里面进行添加内容。 首先是新建我们常用到的颜色，我们可以右键选择 new color set， 双击重命名， 可以看到一个 any appearance 和一个 duck 的颜色，代表这个颜色。支持 light mode 和 dark mode， 我们可以点击选择任意的颜色。在右侧设置里， 可以在 appearance 里看到有三个选项， nine 表示只有一个颜色，那么在任意颜色模式下都只会显显 显示这一个颜色。而另外两种则是在 light mote 和 dark mote 下显示的颜色。这里 ailing appearance 是为了支持一些老的设备， 在设置颜色的时候，如果包含对应的颜色则会显示。比如我们选择了 any 和 duck， 那么 duck 模式下就会显显示 duck 的颜色， light 模式下就会显示 any 的颜色。 在下面的 content 里，我们可以选择系统预设的一些颜色， 我们也可以自定义颜色， 这样在编辑器里我们就可以使用我们设置的颜色了。 关于颜色的具体使用，我们会在后面的章节进行介绍。 另外一种是新建 image 或 icon， 我们系统里用到的一些 icon 和图片，也可以直接以图片的形式存在 assets 里，我们可以右键选择新建 image set， 命名为我们需要的名字。 可以看到我们可以添加三种样式的图，一倍图，二倍图和三倍图。主要为了不同分辨率的设备进行使用。在设计工具里，我们可以直接导出对应的几倍图。 比如在 sketch 里，我们可以选择图片选择导出，这里是一倍图，我们可以直接点击加号就会导出相应的几倍图。 我们可以直接拖拽我们刚刚添加的导出的图片到相应的几倍图里。 或者我们直接选择三张，可以直接拖入到这里面来，系统会根据后面的 at 及备图来进行自动放置。 另外，现在 x q 的已经支持 s v g 和 p d f 的内容，我们可以直接导出伊贝图的 svg 和 pdf 图片。 在这里选择 pdf， 我们可以直接把新导出的图片拖入到我们的 x code 里，这样我们就可以在编辑器里直接使用我们的图片啦。 关于图片的使用，我们会在后面的章节里进行介绍。 另外一种是 a p p 的 icon， 我们可以在 insights 里设置应用的 icon， 只需要按照里面的要求导出一倍的 图片，拖拽添加到相应的位置即可。当我们选择 ios icon 的时候，可以看到只有一个幺零二四大小的。在最新的 x code 里， ios 的图标支持只添加一张图片，不需要像下面的 mac 一样添加不同的尺寸， 我们可以在设置里进行修改。 ios single size 和 all sizes 选择 outsize 的好处是，我们的图标在大图下可能会细节比较多，但是在一些设置或者搜索里图标比较小的时候，不需要那么多的细节。 我们可以在小图的模式下删除一些不必要的细节，达到更好的展示效果。在这里我们暂时选 选择 single size 拖拽我们的应用图标添加进来。 command 加 b， 我们也可以看到很多应用允许用户自定义选择图标，只需要我们在右键新建一个我们的图标即可。 new ios icon 至于如何选择设置图标，我们会在后面的章节进行介绍。最后是系统的颜色， essant color 在我们的电脑设置里，我们可以选择系统的默认显示颜色。 在 x hold 里，我们可以进行自定义这个颜色。我们可以选择颜色，选择我们希望显示的颜色， 那么在代码里我们就可以使用这个颜色。 i think color 的使用为 color dot i think color 可以看到这里已经显示我们设置的 essant color。 excess 的操作我们已经学习完毕。快试试导入你项目中用到的文件和颜色以及你的应用图标吧，谢谢大家。