SwiftUI 官方教程(四)
SwiftUI 官方教程(四)
4. 自定义 Image View
搞定名称和位置 view 后,我们来给地标添加图片。
这不需要添加很多代码,只需要创建一个自定义 view,然后给图片加上遮罩、边框和阴影即可。
首先将图片添加到项目的 asset catalog
中。
SwiftUI 官方教程
4.1 在项目的 Resources
文件夹中找到 turtlerock.png
,将它拖到 asset catalog
的编辑器中。 Xcode 会给图片创建一个 image set
。
接下来,创建一个新的 SwiftUI
view 来自定义 image view。
4.2 选择 File
> New
> File
打开模板选择器。在 User Interface
中,选中 SwiftUI View
,然后单击 Next
。将文件命名为 CircleImage.swift
,然后单击 Create
。
现在准备工作已完成。
SwiftUI教程
4.3 使用 Image(_:)
初始化方法将 text view 替换为 Turtle Rock
的图片。
CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
4.4 调用 .clipShape(Circle())
,将图像裁剪成圆形。
SwiftUI教程
Circle
可以当做一个蒙版的形状,也可以通过 stroke
或 fill
形成 view。
CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
4.5 创建另一个 gray stroke
的 circle
,然后将其作为 overlay
添加到图片上,形成图片的边框。
CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.gray, lineWidth: 4))
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
4.6 接来下,添加一个半径为 10 point 的阴影。
CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.gray, lineWidth: 4))
.shadow(radius: 10)
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
4.7 将边框的颜色改为 white
,完成 image viewSwiftUI教程
CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 10)
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
SwiftUI 官方教程(四)的更多相关文章
- SwiftUI 官方教程(五)
SwiftUI官方教程(五) 5. 同时使用 UIKit 和 SwiftUI 至此,我们已准备好创建 map view 了,接下来使用 MapKit 中的 MKMapView 类来渲染地图. 在 Sw ...
- SwiftUI 官方教程(三)
3. 用 Stacks 组合 View 在上一节创建标题 view 后,我们来添加 text view,它用来显示地标的详细信息,比如公园的名称和所在的州. 在创建 SwiftUI view 时,我们 ...
- SwiftUI 官方教程(八)
8. 动态生成预览 接下来,我们会在 LandmarkList_Previews 中添加代码以在不同的设备尺寸上渲染列表.默认情况下,预览会以当前的 scheme 中设备的大小进行渲染.我们可以通过调 ...
- SwiftUI 官方教程(七)
7. 给子 View 传递数据 LandmarkDetail 现在依然使用硬编码的数据来显示地标.像 LandmarkRow 一样,LandmarkDetail 类型和它组合的其他 view 都需要一 ...
- SwiftUI 官方教程(二)
SwiftUI 官方教程(二) 2. 自定义 Text View 为了自定义 view 的显示,我们可以自己更改代码,或者使用 inspector 来帮助我们编写代码. 在构建 Landmarks 的 ...
- SwiftUI 官方教程(一)
完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials 创建和组合 View 此部分将指引你构建一个发现和分享您喜爱地方的 ...
- SwiftUI 官方教程
SwiftUI 官方教程 完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials SwiftUI 官方教程 SwiftUI ...
- SwiftUI 官方教程(六)
6. 在列表和详情之间设置导航 虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面.SwiftUI教程 把 list 嵌入一个 NavigationView 中,并把每个 row ...
- RabbitMQ官方教程四 Routing(GOLANG语言实现)
在上一教程中,我们构建了一个简单的日志记录系统. 我们能够向许多消费者广播日志消息. 在本教程中,我们将向其中添加功能-我们将使仅订阅消息的子集成为可能. 例如,我们将只能将严重错误消息定向到日志文件 ...
随机推荐
- 解决 C# webbrowser 弹出json下载问题
把以下内容保存为 .reg ,然后导入注册表,即可解决C# webbrowser 弹出json下载问题,也可通过程序修改. Windows Registry Editor Version 5.00 [ ...
- Arduino控制继电器模块
一.实物图 二.例子代码 每隔5s切换断开 接通状态
- Memcached 之增删改查命令
memcache是高性能 ,分布式的内存对象缓存系统,非关系型数据库. 一.增 语法:add key flag expire length key:值的一个名字 flag:一个标志,是一个正整 ...
- " \t\r\n\f"是什么意思
空格字符 \t 制表符 \r 回车符 \n 换行符 \f 换页符
- kmp板子
kmp 容易理解板子 详情见知乎 算法思想 对模式串求PMT,但实际上nxt数组是PMT向前移动一位 nxt数组含义:记母串为m[],模式串为p[]; m[i]与p[j]比较失配,需要比较m[i]与p ...
- [Cerc2007]robotic sort
splay区间反转练手题 #include <iostream> #include <cstdio> #include <algorithm> using name ...
- Xcache3.2.0不支持php7.0.11
编译安装xcache3.2.0时在make这一步报错: AUTOCHECK missing : "arg_flags" "cache_size" AUTOCHE ...
- 57.query phase
主要知识点: query phase步骤 query phase如何提升性能 一.query phase步骤 一次query phase一般包括以下三个步骤 The query pha ...
- JavaSE 学习笔记之Java概述(一)
一.Java的三种技术架构: JAVAEE:Java Platform Enterprise Edition,开发企业环境下的应用程序,主要针对web程序开发: JAVASE:Java Platfor ...
- HDU4572 Bottles Arrangement
/* HDU4572 Bottles Arrangement http://acm.hdu.edu.cn/showproblem.php?pid=4572 数论 找规律 题意:有m行n列和1-n的数各 ...