Dans ce chapitre, vous apprendrez à utiliser URLSessionet à ContextMenucréer une ColourAtlacarte de couleurs App.
Contexte du projet
Pendant longtemps, il y a eu une faveur particulière pour les couleurs traditionnelles chinoises .
En parcourant certaines informations, j'ai vu du contenu de correspondance des couleurs publié par des blogueurs, qui parlait du concept de carte de couleur.Après quelques compréhensions et apprentissages, j'ai voulu créer une application de correspondance des couleurs .
Bien qu'il Appn'ait pas encore été entièrement développé, je partagerai ici certaines des méthodes de construction fonctionnelles terminées, dans l'espoir d'aider SwiftUIles développeurs.
Alors, sans plus tarder, commençons.
Construction du projet
Tout d'abord, créez un nouveau SwiftUIprojet nommé ColourAtla.
construction de pages
Analysons brièvement la composition de la page. Elle se compose d'un Titletitre et d'une Listliste de cartes de couleurs. Ensuite, dans la liste de cartes de couleurs, appuyez longuement sur une seule carte de couleurs pour obtenir l' effet de fenêtre flottante .
Après avoir compris les composants de base, construisons le contenu pièce par pièce.
Structure du titre
La première est la section d'en-tête, que nous OpaqueTypesconstruisons à l'aide de la méthode de type opaque View. Exemple:
//MARK: 标题
private var CardTitleView: some View {
Text("世界最高级的颜色")
.font(.system(size: 17))
.fontWeight(.bold)
}
Dans le code ci-dessus, nous déclarons une vue privée CardTitleView, puis construisons le titre dont nous avons besoin Textet utilisons quelques modificateurs pour rendre le contenu harmonieux.
extension de couleur
Une fois le titre créé, construisons la liste des cartes de couleurs. Avant de construire la carte de couleurs, afin d'utiliser la valeur de couleur hexadécimale , étendons la Colorméthode de construction de couleur existante . ExtensionExemple:
我们创建一个新的Swift文件，命名为ColorHexString。
import SwiftUI
extension Color {
static func rgb(_ red: CGFloat, green: CGFloat, blue: CGFloat) -> Color {
return Color(red: red / 255, green: green / 255, blue: blue / 255)
}
static func Hex(_ hex: UInt) -> Color {
let r: CGFloat = CGFloat((hex & 0xFF0000) >> 16)
let g: CGFloat = CGFloat((hex & 0x00FF00) >> 8)
let b: CGFloat = CGFloat(hex & 0x0000FF)
return rgb(r, green: g, blue: b)
}
}
上述代码中，我们给Color进行了Extension扩展。
我们通过接收一个UInt十六进制颜色值，然后把它转换成RGB颜色值，这样我们只需要输入十六进制颜色值，Color就可以转换为可以使用的RGB颜色值了。
单张色卡
接下来，我们回到ContentView文件，先来构建单张色卡。示例：
// MARK: 卡片视图
struct CardViewExamples: View {
var body: some View {
ZStack(alignment: Alignment(horizontal: .center, vertical: .center), content: {
// 背景卡片
Rectangle()
.fill(Color.Hex(0xFF0000))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 110)
.cornerRadius(8)
HStack {
VStack(alignment: .leading, spacing: 10) {
//颜色名称
Text("中国红")
.fontWeight(.bold)
.foregroundColor(Color.white)
.font(.system(size: 17))
// 颜色值
Text("#FF0000")
.fontWeight(.bold)
.foregroundColor(Color.white)
.font(.system(size: 14))
}
Spacer()
}.padding()
})
}
}
上述代码中，我们使用Struct构造体创建视图的方式构建了单张色卡的内容。
在单张色卡，我们构建了一个Rectangle矩形作为背景，然后填充了一个“中国红”，顺便调整了它的大小和圆角。
依此再构建了两个Text，作为颜色名称和颜色值，最后使用ZStack将三个元素组成一个整体。
为什么需要使用Struct构造体的方式，而不使用OpaqueTypes不透明类型的方法，这是因为我们构建的色卡之后需要提取参数出来，然后在ContentView视图中遍历多张色卡，因此使用Struct构造体的方式创建视图。
参数抽离
接下拉，为了更加方便地遍历出多张色卡，我们将相同的参数进行抽离替换。
在色卡列表中，我们抽离色卡背景色、色卡颜色名称、色卡颜色值3个参数，示例：
var cardBGColor: Color
var cardColorName: String
var cardColorRBG: String
抽离出参数后，由于我们没有给CardViewExamples构造体中的参数赋值，因此我们在ContentView视图调用时需要补充参数对应的参数值。
CardViewExamples(cardBGColor: Color.Hex(0xFF0000), cardColorName: "中国红", cardColorRBG: "#FF0000")
悬浮窗口
单张色卡完成后，我们来尝试完成长按色卡唤起悬浮窗口并实现复制颜色值。
在之前的章节中，我们学习过ContextMenu上下文菜单的使用，在这里我们依旧使用的是ContextMenu上下文菜单构建悬浮窗口。示例：
// 长按复制颜色值
.contextMenu {
Button(action: {
UIPasteboard.general.string = cardColorName
}, label: {
Text("复制颜色值")
})
}
.padding(.horizontal)
上述代码中，我们使用ContextMenu上下文菜单创建了悬浮窗口。
当我们长按单张色卡时，我们就把cardColorName卡片颜色值的内容复制到剪切板中，这样我们就实现了通过长按复制色卡颜色值的交互。
数据模型
模型创建
完成单张色卡创建后，我们需要根据单张色卡的内容遍历多张色卡，通用的方式是创建模型数组，再根据模型数组结合网络请求，获得放在服务端的Json数据，然后再在本地渲染。
我们创建一个Swift文件，命名为Model.swift。
import SwiftUI
struct CardModel:Decodable {
var cardBGColor: UIn
var cardColorName: String
var cardColorRBG: String
}
上述代码中，我们创建了一个结构体CardModel，遵循Decodable协议。
Decodable协议，用于将JSON对象解析为结构体或类，这样我们就可以通过网络请求获得JSON对象，然后通过Decodable协议解析在本地。
由于我们的色卡背景颜色是十六进制的颜色值，因此cardBGColor参数需要声明为UInt类型，其他cardColorName、cardColorRBG都是String字符串类型。
我们回到ContentView文件中，首先我们先获得定义好的CardModel结构体。
@State var cardItems: [CardModel] = []
然后，我们使用OpaqueTypes不透明类型的方法创建一个卡片视图，我们将CardListView视图展示在ContentView中展示。
// MARK: 色卡列表视图
private var CardListView: some View {
ScrollView(.vertical, showsIndicators: false, content: {
ForEach(cardItems, id: \.cardColorRBG) { item in
VStack(spacing: 20) {
CardViewExamples(cardBGColor: Color.Hex(item.cardBGColor), cardColorName: item.cardColorName, cardColorRBG: item.cardColorRBG)
}
}
})
}
这样，色卡列表视图的框架就创建好了。
但是我们在预览时没有看到色卡，这是因为我们的色卡列表视图只是搭建了框架，但是没有数据，下面我们来完成数据部分。
Json数据
色卡框架搭建好后，我们在云端创建好Json数据。
[
{"cardBGColor":16711680,"cardColorRBG":"#FF0000","cardColorName":"中国红"},
{"cardBGColor":15226919,"cardColorRBG":"#E85827","cardColorName":"爱马仕橙"},
{"cardBGColor":16439902,"cardColorRBG":"#FADA5E","cardColorName":"拿破里黄"},
{"cardBGColor":35980,"cardColorRBG":"#008C8C","cardColorName":"马尔斯绿"},
{"cardBGColor":3175035,"cardColorRBG":"#30727B","cardColorName":"不来梅蓝"},
{"cardBGColor":6901074,"cardColorRBG":"#694D52","cardColorName":"莫兰迪色"},
{"cardBGColor":5338771,"cardColorRBG":"#517693","cardColorName":"马耳他蓝"},
{"cardBGColor":12199,"cardColorRBG":"#002FA7","cardColorName":"克菜因蓝"}
]
上述代码中，我们在某平台创建了Json数据，并且获得了可以访问Json数据的API接口。
我们将API接口地址复制，并在ContentView中声明一个常量存储它。
let JsonURL = "https://api.npoint.io/dc5a1718e0e958613ade"
网络请求
Avec l' interface API , le cadre d'affichage de la liste des cartes de couleurs locales est également établi, et l'étape suivante consiste à terminer la partie de la demande réseau .
// MARK: 网络请求
func getColors() {
let session = URLSession(configuration: .default)
session.dataTask(with: URL(string: JsonURL)!) { data, _, _ in
guard let jsonData = data else { return }
do {
let colors = try JSONDecoder().decode([CardModel].self, from: jsonData)
self.cardItems = colors
} catch {
print(error)
}
}
.resume()
}
Dans le code ci-dessus, nous créons une méthode de demande de réseau getColors. Nous utilisons le URLSessioncadre de demande de réseau officiel, puis obtenons les données de l' URLadresse et faisons correspondre les données avec les paramètres du tableau JsonURLen JSONDecoderanalysant les données. Après la correspondance, stockez les données dans .jsonCardModelcardItems
Nous appelons la méthode ContentViewlorsque la vue est affichée .getColors
.onAppear(perform: {
getColors()
})
Nous cliquons sur l'opération d'exécution sur le simulateur pour prévisualiser l'effet.
Chargement
Étant donné que la demande réseau prend du temps , afin d'améliorer l' expérienceColourAtla de notre carte de couleurs , nous pouvons ajouter une vue comme affichage par défautApp lorsque la vue de la liste des cartes de couleurs n'a pas été chargée . Exemple:Loading
if cardItems.isEmpty {
Spacer()
ProgressView()
Spacer()
} else {
CardListView
}
Nous avons enfin un aperçu de l' effet global .
C'est tout pour ce chapitre.
Venez l'essayer !
Si cette colonne vous est utile, veuillez aimer, commenter et suivre ~
Je participe au recrutement du programme de signature de créateurs de la communauté technologique Nuggets, cliquez sur le lien pour vous inscrire et soumettre .