SwiftUI overlay 绘制体育赛程实现虚线和等高矩形 (教程含源码)

实战需求

SwiftUI overlay 绘制体育赛程实现虚线和等高矩形

本文价值与收获

看完本文后，您将能够作出下面的界面

截屏2020-09-02 上午10.39.20.png

看完本文您将掌握的技能

• 通过overlay 实现特定位置图像叠加

.overlay(Rectangle().frame(width: 30), alignment: .leading)

• 通过stroke设置虚线

 .stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))

---

stroke(style: StrokeStyle)

返回一个新的形状，该形状是self的描边副本，使用style的内容定义描边特征。

func stroke(style: StrokeStyle) -> some Shape

参考代码

 .stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))
 .foregroundColor(Color(UIColor.blue))

---

基础知识

overlay(_:alignment:)

在该视图前面分层放置一个辅助视图。

func overlay(_ overlay: Overlay, alignment: Alignment = .center) -> some View where Overlay : View

返回值

图层叠加在视图前面的视图。

参量

• overlay覆盖
  要在此视图前面分层的视图。
• alignment 对准
  与该视图有关的叠加层的对齐方式。

讨论区

当您将覆盖图应用于视图时，原始视图将继续为结果视图提供布局特征。在以下示例中，心脏图像显示为重叠在文件夹图像的前面，并与文件夹图像的底部对齐。

Image(systemName: "folder")
    .font(.system(size: 55, weight: .thin))
    .overlay(Text("❤️"), alignment: .bottom)

---

实战代码