第7章第6节：制作一份游戏类型选择页面 [SwiftUI快速入门到实战]

最新推荐文章于 2022-06-30 12:47:18 发布
原创 最新推荐文章于 2022-06-30 12:47:18 发布 · 453 阅读 · 0
标签
#swift #swiftui #swiftui教程 #ios开发
本教程详细讲解如何用SwiftUI制作游戏选择页面，包括背景设置、头部内容、标题、子视图提取和中心区域图形布局。通过VStack、HStack、ZStack视图的组合使用，以及自定义视图的创建，实现页面元素的层次和动画效果。

  1. 本节课您将为一款游戏，制作一份游戏类型选择页面。您将学习三种布局视图的综合应用，以及动画入场效果的制作。
    SwiftUI快速入门到实战

  2. 由于页面所有元素位于深灰色的背景之上，所以添加一个ZStack视图，作为子视图的容器。同时绘制一个矩形图形，作为页面的背景。
    SwiftUI快速入门到实战

  3. 根据设计师提供的效果图，修改矩形的填充颜色。
    SwiftUI快速入门到实战

  4. 通过忽略安全区域的限制，将矩形撑满整个屏幕。
    SwiftUI快速入门到实战

  5. 除了背景之外的元素都是从上到下排列的，因此添加一个VStack视图，作为子视图的容器。

订阅专栏 解锁全文 限时秒杀 ¥44.95 限时期限 超级会员免费看
SwiftUI 游戏源码大全之 轻松实现掷骰子游戏（教程含源码）
iCloudEnd的博客
04-18 4111
实战需求 轻松实现掷骰子游戏 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 基于SF特性，可以快速生成所需骰子数 struct DiceView: View { let n:Int var body: some View { Image("Dice\(n)").resizable().aspectRatio(1, contentMode: .fit).padding() } } 通过随机函数生成骰子数据 Int.random
第1章第1节： 创建第一个SwiftUI项目 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
08-31 1918
1. 欢迎使用本专栏学习SwiftUI，这是苹果最近推出的最直观、最创新的全平台界面搭建技术，并且使用容易编写和阅读的声明式的语法。 2. 要使用SwiftUI技术，首先使用Xcode创建一个SwiftUI项目。保持默认的选项，点击下一步按钮，进入下一个设置页面。 3. 在产品名称输入框里，输入项目的名称。 4. 接着点击此处的下拉箭头，打开用户界面技术列表。 5. 在默认状态下，开发者使用故事板来搭建应用程序的用户界面，这里我们选择SwiftUI选项。 6. 然后打开生命周期管理选项列表。 7. Xc.
模仿“选择游戏角色的页面”
weixin_45190226的博客
12-14 3220
业务需求描述： 1.页面显示的文字和图片全部居中显示； 2.玩家可以选择两个角色中的一个，当选择一个角色的时候在页面中显示角色的图片，且当鼠标滑过角色图片的时候显示图片相关信息； 3.在角色图片下面显示角色说明； 业务代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择自己的游戏角色</title> <scr
Python GUI案例之看图猜成语开发（第三篇）
qq_59142194的博客
06-30 1127
由于之前写的这篇博文...对ttkbootstrap做了个简单地使用方法介绍，并且也得到了许多小伙伴的收藏。所以这次就用ttkbootstrap来做一个简单的看图猜成语小游戏的开发来对它有一个综合地认识。
关于游戏选择模式页面的实现
越努力，越幸运！！！
05-11 1358
今早在做C++老师预留的funcode作业——坦克大战基本功能实现后呢，便想着添加玩家二进去，毕竟传统的坦克大战可是可以双人进行游戏的哦。再添加一个玩家坦克是一点也不难的，照着前面第一个玩家坦克做就行了。可是如何在开始前的页面上由玩家选择单人或者双人游戏呢，这里记录下我今早的做法（当然肯定不是最好的，有待完善） 首先创建四个精灵类：CSprite* m_solo; CSprite* m_doubl...
第7章第19节：开始制作一份注册和登录页面 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-11 777
本节课开始制作一份注册和登录页面，通过本页面的制作，您将掌握如何制作滑动选项卡，以及如何显示或隐藏部分表单。 首先添加一个属性，标识当前的页面显示登录表单，还是显示注册表单。 由于当前的页面是上下结构的，所以添加一个VStack视图，作为子视图的容器。 接着添加一个HStack视图，作为标题视图的容器。 添加一个图像视图，显示项目里的指定名称的图片。 添加一个VStack视图，作为图标右侧两个文本视图的容器。 然后依次添加两个文本视图，并根据页面的类型显示不同的文字内..
SwiftUI从入门到实战第2章第7节：TabView
互动教程网[www.hdjc8.com]
05-13 1720
相关课程：http://hdjc8.com/hdjc/swiftUI/ TabView相当于UIKit中的UITabBarController，用于实现标签视图集。 标签视图位于屏幕的底部，可以让用户在几个页面之间进行快速的切换，效果类似于UITabBarController。 标签视图所控件的页面位于大括号之内。TabView仅支持类型为文本、图像或LayoutView的标签项，其他类型的视图将产生一个可见的空白标签项。 示例代码： var body: some View { TabView
第7章第22节：开始制作一份网站访问量的统计页面 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-11 358
从本节课开始，您将制作一份网站访问量的统计页面。完成统计页面的制作之后，您将掌握甜甜圈图表动画的设计，以及滑动选项卡和滚动列表的制作。 由于页面所有元素位于深色的背景之上，所以添加一个ZStack视图，作为所有子视图的容器。 绘制一个矩形图形，作为页面的背景。根据设计师提供的效果图，修改矩形的填充渐变颜色，渐变的方向为从上至下。 通过忽略安全区域的限制，将矩形撑满整个屏幕。 除了背景之外的元素都是从上到下排列的，因此添加一个VStack视图，作为子视图的容器。 由于顶部标题..
第8章第7节：完成健身数据的统计页面的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-14 250
本节课延续上一节课的内容，您将完成健身数据的统计页面的制作。由于该页面的内容较多，所以我们创建一个文件来存放该页面的视图。 在打开的文件模板窗口中，选择此处的SwiftUI视图模板。 点击此处的下一步按钮，进入下一步设置页面。 然后在文件名称输入框里，输入自定义视图的文件名称。 最后点击创建按钮，创建一个新的自定义视图文件。 接着开始编写代码，实现这个统计界面。 初始化一个常量，作为图表的背景颜色。 初始化另一个常量，作为列表左栏的宽度。继续初始化一个常量，作为..
第9章第26节：完成用户档案页面功能列表的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 202
实现功能选项子视图的创建之后，现在可以制作功能列表了。由于点击每个功能都会跳转到不同的页面，所以在制作列表之后，首先创建几个目标页面。 保持默认的模板选项，点击此处的下一步按钮，进入下一步设置页面。 然后在文件名称输入框里，输入文件的名称。 选择此处的组名，作为文件保存的位置。 最后点击创建按钮，创建一个新的自定义视图文件，作为会员订阅功能页面。 暂时保持当前页面的内容为空，使用键盘上的快捷键，继续创建另一个功能页面。 保持默认的模板选项，点击此处的下一步按钮，进入下..
第7章第23节：完成滑动选项卡的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-11 276
本节课延续上一节课的内容，您将完成滑动选项卡的制作。此处的滑动选项卡，和本章第19节里的表单选项卡有些类似。 通过观察效果图可以发现，有很多的元素拥有相同的颜色、尺寸等信息，您可以将这些信息放置在一个文件里，以方便管理和维护，还可以保持代码的简洁。 点击此处的下一步按钮，进入下一步设置页面。 然后在文件名称输入框里，输入文件的名称。 最后点击创建按钮，创建一个新的文件。 现在开始编码，将某个页面共用的样式，或者整个项目都需要用到的样式，放在一个文件中。 由于使用到了S..
第6章第7节：如何实现导航页面的自定义后退 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-08 332
在前面几节课，导航页面的后退操作，都是通过自动产生的左上角的后退按钮进行的。而现实场景往往要求点击某个自定义的视图，实现导航页面的后退。 本节课就来实现通过点击自定义的视图，实现导航页面的后退操作，首先创建一个自定义的视图。在打开的文件模板窗口中，选择此处的SwiftUI视图模板。 点击此处的下一步按钮，进入下一步设置页面。 然后在文件名称输入框里，输入自定义视图的文件名称。 最后点击创建按钮，创建一个新的自定义视图文件。 现在开始编写代码，实现这个自定义视图。 首先..
第7章第21节：给页面里的内容添加动画效果 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-11 196
本节课延续上一节课的内容，您将给所有的页面内容添加动画效果。例如选项卡的滑动切换动画，表单的显示和隐藏动画。 添加一个HStack视图，作为页面底部视图的容器。 添加一个文本视图，根据属性的值是登录还是注册，从而显示不同的文字内容。提示用户进行登录，或者进行注册。 继续添加一个文本视图，根据属性的值显示登录或注册链接。 设置文本视图的字体大小为14，并且根据屏幕的宽度，调整文本视图的宽度。 增加文本视图和屏幕底部的距离，接着点击此处的按钮，缩小预览窗口的显示比例。 点..
第9章第20节：实现答题页面的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-26 682
答题页面显示一道题目，并提供四个答案选项，用户可以从中选择一个答案。当用户提交答案时，在提交答案的上方显示用户的回答是否正确。 现在开始制作答题页面，首先点击此处的显示或隐藏导航器图标，隐藏左侧的项目导航面板。 然后点击此处的Resume按钮，刷新预览窗口。 接着编写代码，开始答题页面的制作。 添加一个属性，用来从服务器获取题目信息。 接着添加一个属性，标识用户所选的答案选项。 依次添加两个属性，表示用户答题正确的次数和错误的次数。 由于整个页面的内容是由上而下..
第7章第11节：完成银行卡片视图的创建 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-10 416
很多金融产品都需要用户选择和设置自己的银行账号，本节课演示银行卡片的制作和选择，当用户选择某张银行卡片时，以动画的形式显示所选的卡片。 首先我们需要制作一张银行卡片，定义一个遵循View协议的结构体，作为银行卡片的自定义视图。同时添加一个颜色属性，作为卡片的背景颜色。 添加一个字符串属性，作为卡片所显示的卡号。继续添加两个属性，作为卡片的过期日期和持卡人的姓名。 添加一个整型属性，用来标识卡片的类型。数字1表示VISA卡，数字2表示MasterCard万事达卡。 实现协议里规定必..
SwiftUI系列教程第1章第1节：创建一个简单的SwiftUI项目
互动教程网[www.hdjc8.com]
08-15 2428
源码地址：https://github.com/fzhlee/SwiftUI-Guide 图片来源：developer.apple.comSwiftUI 更好的应用，更少的代码。 SwiftUI是一种创新、简单的iOS开发中的界面布局方案，可以通过Swift语言的强大功能，在所有的Apple平台上快速构建用户界面。 仅使用一组工具和API为任何Apple设备构建用户界面。 SwiftUI具...
第7章第25节：完成滚动列表的制作并实现动画效果 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-11 327
本节课延续上一节课的内容，您将完成滚动列表的制作，并实现页面里的所有动画效果。 首先添加一个滚动视图，用来显示国家和地区列表。 添加一个VStack视图，作为子视图的容器。 添加一个循环语句，对包含六个元素的数组进行遍历。 继续添加一个VStack视图，作为地区列表子视图的容器。 添加一个HStack视图，作为一个图像视图和两个文本视图的容器。 绘制一个圆形，作为列表右侧的图标，并根据索引设置它的填充颜色。 根据数组的索引，创建指定内容的文本视图。 接着添..
第7章第9节：完成电子商务列表页面剩余内容的制作 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-10 185
本节课继续产品列表页面的制作，首先添加一个滚动视图，设置滚动方向为垂直方向，并且不显示垂直滚动条。 添加一个循环语句，对包含六个元素的数组进行遍历。 接着添加一个HStack视图，作为并排两个产品图片的容器。 添加一个ZStack视图，作为产品图片和其背景视图的容器。 绘制一个圆角矩形，并设置圆角半径为10。接着按下键盘上的command键。 在按下command键的同时，点击此处的视图，打开快捷操作菜单。 选择此处的提取子视图命令，将HStack视图提取为一个自定义..
第7章第3节：快速实现一个侧滑菜单 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-10 537
不少应用程序都拥有一个侧滑菜单：从屏幕的左侧向右滑动手指，可以拉出一列功能表单。本节课就来实现这项非常实用的功能。 首先定义一个遵循View协议的结构体，作为导航栏右侧按钮的自定义视图。 添加一个VStack视图，作为子视图的容器。由于侧滑菜单的整体结构是由上而下的，所以使用一个VStack视图，作为侧滑菜单最外层的父视图。 添加一个HStack视图，作为子视图的容器。侧滑菜单里的每个选项，都包含一个图像视图和一个文本视图，两个子视图是水平排列的。 添加一个图像视图，以显示一枚指..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李发展

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值