Gradients/渐变, Icons/图标, Image/图片 的使用
Hanyang Li
已于 2023-09-25 17:51:48 修改
分类专栏:
SwiftUI Bootcamp
文章标签:
iOS
Swift
UI
于 2023-05-19 13:34:46 首次发布
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/u011193452/article/details/130764713
版权
1. Gradients 的使用
1.1 实现
RoundedRectangle(cornerRadius: 25) // 圆角矩形
.fill(
//Color.red
//#colorLiteral() 手动输入 才能弹出颜色选择框
//线性渐变
//LinearGradient(
// gradient: Gradient(colors: [Color(#colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)), Color(#colorLiteral(red: 0.1411764771, green: 0.3960784376, blue: 0.5647059083, alpha: 1))]),
// startPoint: .topLeading,
// endPoint: .bottom)
// 中心圆向外扩散渐变
//RadialGradient(
// gradient: Gradient(colors: [Color.red, Color.blue]),
// center: .center,
// startRadius: 5,
// endRadius: 200)
// 渐变中心并带有角度的补全
AngularGradient(
gradient: Gradient(colors: [Color.red, Color.blue]),
center: .topLeading,
angle: .degrees(180 + 45))
)
.frame(width: 300, height: 200)
1.2 效果图:
2. Icons 的使用
2.2 网页下载 SF Symbols 软件,里包含常见的所有图标,如图:
2.3 实现
Image(systemName: "person.fill.badge.plus") // 引用系统图标 heart.fill
.renderingMode(.original) // 渲染模式: 原来的
.font(.largeTitle) // 设置大小
//.resizable() // 自动更新,适配 frame 的大小
// fill: 填充 fit: 适应,作用保持图像的比例
//.aspectRatio(contentMode: .fit) // 搭配 clipped 使用,调整大小的纵横比
//.scaledToFit() // 调用缩放以适应 和 .fit 相同
//.scaledToFill() // 调用缩放以填充 和 .fill 相同
//.font(.caption) // 设置大小,推荐使用,因为设置系统默认的类型,会随着设备系统尺寸而动态的变化大小
//.font(.system(size: 100)) // 设置特定的大小
//.foregroundColor(Color.red) // 设置颜色
//.frame(width: 300, height: 300) // 设置大小
//.clipped(); // 设置裁剪,图像不能超过 frame 区域
2.4 效果图:
3. Image 的使用
3.1 使用的图片 google.png, therock.png
3.2 实现
//therock
Image("google")
.renderingMode(.template) // 渲染模式:模版图像,更改单一平面颜色
.resizable() // 自动更新,适配区域大小
// fill: 填充模式,会越界按比例显示完整图像,搭配 clipped 裁剪超出 frame 区域;
// fit: 可以单独使用,自适应 frame 区域,不会越界显示
//.aspectRatio(contentMode: .fit) // 纵横比,修复图像,
.scaledToFit() // 缩放填充显示,与 .fit 使用一样的效果
.frame(width: 300, height: 200) // 设置宽和高
.foregroundColor(.green) // 设置颜色
//.clipped() // 搭配 fill 使用,裁剪填充 frame 区域越界部分
//.cornerRadius(150) // 设置圆角,经常用到这个方法,设置成圆形头像,圆角等于正方形边长的 0.5 倍
//.clipShape(
//Circle() // 裁剪成圆
//RoundedRectangle(cornerRadius: 25.0) // 裁剪成圆角矩形
//Ellipse() // 裁剪成椭圆
//) // 裁剪形状
3.2 效果图
简单简单小白: 感谢博主的优质好文,文章细节很到位,兼顾实用性和可操作性,感谢博主的分享,期待博主持续带来更多好文!
Hanyang Li: 目前为止,小火箭软件都得收费,否则打开软件失败
CSDN-Ada助手: 为什么C语言在系统编程中被广泛采用?
mariocmy: 不po源码
Hanyang Li: 记录了简单步骤,专栏第三篇 FFmpeg 分离视频文件,有完整的步骤。