Adquira o hábito de escrever juntos! Este é o 9º dia da minha participação no "Nuggets Daily New Plan · April Update Challenge", clique para ver os detalhes do evento .
Prefácio: Inconscientemente, foi atualizado para o 9º dia. Lentamente, o sistema de aprendizado foi surgindo. Com certeza, se o material na mente não for produzido, perderá seu valor.
Declaração de trabalho de hoje: A verdadeira profissão é saber cuidar dos outros e servi-los até o fim.
Neste capítulo, você aprenderá a usar gradientes para embelezar os estilos de visualização e criar páginas com boa aparência.
No capítulo anterior, aprendemos como adicionar uma cor de fundo a um botão usando o código a seguir.
.background(Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))
复制代码Este é o fundo de uma única cor.
Se quisermos fazer um plano de fundo gradiente, precisamos usar o código gradiente embutido no framework SwiftUI.
//左右渐变
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing))
复制代码//上下渐变
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .top, endPoint: .bottom))
复制代码Simplesmente descrever o significado dos parâmetros também é conveniente para entendermos rapidamente.
| parâmetro | nome | descrever |
|---|---|---|
| Gradiente linear() | Gradiente linear | Usado para definir cores de gradiente |
| gradiente | Gradiente | Normalmente use o grupo de cores, [Color.blue,Color.green], ou seja, a cor inicial é azul e a cor final é verde |
| ponto de partida | posição inicial | Normalmente, use .à esquerda, .à direita, .topo acima, .abaixo abaixo |
| ponto final | posição final | Normalmente, use .à esquerda, .à direita, .topo acima, .abaixo abaixo |
Vamos tentar primeiro.
Primeiro, crie um novo projeto e nomeie-o como SwiftUIGradient.
Comece criando um botão simples.
Se você tiver dúvidas sobre como criar botões, você pode ler [Tutorial minimalista do SwiftUI 08: Usando botões] juejin.cn/post/708403…
struct ContentView: View {
var body: some View {
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮样式
Text("微信登录")
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(Color.green)
.cornerRadius(5)
.padding(.horizontal, 20)
}
}
}
复制代码De acordo com o uso de Gradiente gradiente, alteramos a cor de fundo para um gradiente azul-esverdeado.
Após a visualização, podemos ver o efeito do simulador.
struct ContentView: View {
var body: some View {
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮样式
Text("微信登录")
.font(.system(size: 14))
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint: .trailing))
.cornerRadius(5)
.padding(.horizontal, 20)
}
}
}
复制代码Vamos primeiro analisar o código da cor gradiente Gradient, que é conveniente para entendermos e usarmos.
O formato do código é o seguinte:
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint:.trailing))
复制代码Leia o que este código significa.
A cor de fundo é a cor do gradiente, as cores do gradiente são azul e verde, a posição inicial do gradiente é a esquerda e a posição final é a direita.
Além das cores fornecidas pelo sistema, no grupo de cores [Color.blue, Color.green], também podemos utilizar as cores importadas em Assets.
Então vamos tentar usar o gradiente abaixo.
Primeiro importamos a cor desejada em Ativos.
Importamos a primeira cor, nomeamos como "8FD3F4" e usamos a cor "8FD3F4" também.
Da mesma forma, importamos uma segunda cor, chamada "84FAB0", e a cor usada também é "84FAB0".
Temos duas cores, e os códigos são:
Color("8FD3F4")
Color("84FAB0")
复制代码Em seguida, use-o no código do arquivo ContentView.
Percebemos que é um gradiente de duas cores esquerda e direita, então a cor inicial é Color("8FD3F4"), a cor final é Color("84FAB0"), a posição inicial é a esquerda e a posição final é a direita.
Também definimos na direção do gradiente no código.
.background(LinearGradient(gradient: Gradient(colors: [Color("8FD3F4"), Color("84FAB0")]), startPoint: .leading, endPoint: .trailing))
复制代码Parabéns, terminamos de codificar o botão de gradiente!
No entanto, encontrei um problema aqui: quando embelezamos o botão, usamos muitos códigos modificadores.
Se houver muitos botões e os estilos de cores puderem ser reutilizados, duplicar muito código não está de acordo com nosso objetivo de escrever código de forma elegante.
Lembra do conteúdo do [Tutorial Minimalista SwiftUI 06: Reutilização de Código Elegante]? O princípio de escrever código no SwiftUI é que os estilos reutilizados devem ser extraídos.
Aqui popularizamos um novo conceito chamado "ButtonStyles", que é o protocolo de estilos de botões.
Sua estrutura de código é a seguinte:
struct GradientBackgroundStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
//按钮修饰符
}
}
复制代码Criamos uma nova estrutura chamada "GradientBackgroundStyle" que está em conformidade com o protocolo ButtonStyle.
Então, precisamos apenas mover o código de estilo para essa estrutura e reutilizá-lo.
//样式引用方式
.buttonStyle(GradientBackgroundStyle())
复制代码Código completo:
//按钮
struct ContentView: View {
var body: some View {
Button(action: {
// 操作
print("登录成功")
}) {
// 按钮样式
Text("微信登录")
.font(.system(size: 14))
}
.buttonStyle(GradientBackgroundStyle())
}
}
//按钮修饰
struct GradientBackgroundStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
// 按钮修饰符
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(LinearGradient(gradient: Gradient(colors: [Color("8FD3F4"), Color("84FAB0")]), startPoint: .leading, endPoint: .trailing))
.cornerRadius(5)
.padding(.horizontal, 20)
}
}
复制代码Até agora, dominamos o uso da cor gradiente Gradiente!
Se esta coluna for útil para você, por favor, curta, comente e siga~