En este capítulo, aprenderá a usar URLSessiony ContextMenuconstruir una ColourAtlatarjeta de color App.
Antecedentes del proyecto
Durante mucho tiempo, ha habido un favor especial por los colores tradicionales chinos .
Mientras buscaba información, vi algunos contenidos de coincidencia de colores publicados por bloggers, que hablaban sobre el concepto de tarjeta de color . Después de entender y aprender, quise crear una aplicación de coincidencia de colores .
Aunque Apptodavía no se ha desarrollado por completo, compartiré aquí algunos de los métodos de construcción funcional completados, con la esperanza de ayudar a los SwiftUIdesarrolladores.
Entonces, sin más preámbulos, comencemos.
Proyecto de construcción
Primero, crea un nuevo SwiftUIproyecto llamado ColourAtla.
construcción de la página
Analicemos brevemente la composición de la página. Consiste en un Titletítulo y una Listlista de tarjetas de colores. Luego, en la lista de tarjetas de colores, mantenga presionada una tarjeta de un solo color para obtener el efecto de ventana flotante .
Después de comprender los componentes básicos, construyamos el contenido pieza por pieza.
Construcción del título
La primera es la sección de encabezado, que OpaqueTypesconstruimos usando el método de tipo opaco View. Ejemplo:
//MARK: 标题
private var CardTitleView: some View {
Text("世界最高级的颜色")
.font(.system(size: 17))
.fontWeight(.bold)
}
En el código anterior, declaramos una vista privada CardTitleView, luego construimos el título que necesitamos en ella Texty usamos algunos modificadores para que el contenido se vea armonioso.
extensión de color
Después de crear el título, construyamos la lista de tarjetas de colores. Antes de construir la tarjeta de colores, para usar el valor de color hexadecimal , ampliemos el Colormétodo de construcción de colores existente . ExtensionEjemplo:
我们创建一个新的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"
网络请求
Con la interfaz API , también se establece el marco de vista de la lista de tarjetas de colores locales , y el siguiente paso es completar la parte de solicitud de red .
// 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()
}
En el código anterior, creamos un método de solicitud de red getColors. Usamos el URLSessionmarco de solicitud de red oficial, y luego obtenemos los datos de la URLdirección , y hacemos coincidir los datos con los parámetros en la matriz JsonURLanalizando los datos. Después de hacer coincidir, almacenamos los datos en .JSONDecoderjsonCardModelcardItems
Llamamos al método ContentViewcuando se muestra la vista .getColors
.onAppear(perform: {
getColors()
})
Hacemos clic en la operación de ejecución en el simulador para obtener una vista previa del efecto.
Cargando
Dado que la solicitud de red lleva tiempo , para mejorar nuestra experienciaColourAtla con la tarjeta de color , podemos agregar una vista como visualización predeterminadaApp cuando la vista de la lista de tarjetas de color no se ha cargado . Ejemplo:Loading
if cardItems.isEmpty {
Spacer()
ProgressView()
Spacer()
} else {
CardListView
}
Finalmente tenemos una vista previa del efecto general .
Eso es todo por este capítulo.
¡Ven y pruébalo!
Si esta columna es útil para usted, haga clic en Me gusta, comente y siga ~
Estoy participando en el reclutamiento del programa de firma de creadores de la Comunidad Tecnológica de Nuggets, haga clic en el enlace para registrarse y enviar .