Machen Sie es sich zur Gewohnheit, gemeinsam zu schreiben! Dies ist der 9. Tag meiner Teilnahme an der „Nuggets Daily New Plan · April Update Challenge“, klicken Sie hier, um die Details der Veranstaltung anzuzeigen .
Vorwort: Unbewusst wurde es auf den 9. Tag aktualisiert Langsam kam das Lernsystem heraus Sicher genug, wenn das Zeug im Kopf nicht ausgegeben wird, wird es seinen Wert verlieren.
Das heutige Berufsbild: Der eigentliche Beruf besteht darin, zu wissen, wie man sich um andere kümmert und ihnen bis zum Ende dient.
In diesem Kapitel lernen Sie, wie Sie Farbverläufe verwenden, um die Ansichtsstile zu verschönern und gut aussehende Seiten zu erstellen.
Im vorherigen Kapitel haben wir gelernt, wie man einer Schaltfläche mit dem folgenden Code eine Hintergrundfarbe hinzufügt.
.background(Color(red: 88 / 255, green: 224 / 255, blue: 133 / 255))
复制代码Dies ist der Hintergrund einer einzelnen Farbe.
Wenn wir einen Verlaufshintergrund erstellen möchten, müssen wir den in das SwiftUI-Framework integrierten Verlaufscode verwenden.
//左右渐变
.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))
复制代码Die einfache Beschreibung der Bedeutung der Parameter ist für uns auch bequem, um sie schnell zu verstehen.
| Parameter | Name | beschreiben |
|---|---|---|
| LinearGradient() | Linearer Verlauf | Wird verwendet, um Verlaufsfarben zu definieren |
| Gradient | Gradient | Verwenden Sie normalerweise die Farbgruppe [Color.blue,Color.green], d. h. die Startfarbe ist Blau und die Endfarbe Grün |
| Startpunkt | Startposition | Verwenden Sie normalerweise .führend links, .hinten rechts, .oben oben, .unten unten |
| Endpunkt | Endstellung | Verwenden Sie normalerweise .führend links, .hinten rechts, .oben oben, .unten unten |
Versuchen wir es zuerst.
Erstellen Sie zunächst ein neues Projekt und nennen Sie es SwiftUIGradient.
Beginnen Sie mit der Erstellung einer einfachen Schaltfläche.
Wenn Sie Fragen zum Erstellen von Schaltflächen haben, lesen Sie [SwiftUI Minimalist Tutorial 08: Using Buttons] 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)
}
}
}
复制代码Je nach Verwendung des Farbverlaufs ändern wir die Hintergrundfarbe in einen blau-grünen Farbverlauf.
Nach der Vorschau können wir die Wirkung des Simulators sehen.
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)
}
}
}
复制代码Analysieren wir zunächst den Code der Verlaufsfarbe, der für uns bequem zu verstehen und zu verwenden ist.
Das Codeformat ist wie folgt:
.background(LinearGradient(gradient: Gradient(colors: [Color.blue, Color.green]), startPoint: .leading, endPoint:.trailing))
复制代码Lesen Sie, was dieser Code bedeutet.
Die Hintergrundfarbe ist die Verlaufsfarbe, die Verlaufsfarben sind Blau und Grün, die Anfangsposition des Verlaufs ist links und die Endposition rechts.
Zusätzlich zu den vom System bereitgestellten Farben können wir in der Farbgruppe [Color.blue, Color.green] auch die in Assets importierten Farben verwenden.
Dann versuchen wir es mit dem Farbverlauf unten.
Wir importieren zunächst die gewünschte Farbe in Assets.
Wir importieren die erste Farbe, nennen sie "8FD3F4" und verwenden auch die Farbe "8FD3F4".
Auf ähnliche Weise importieren wir eine zweite Farbe namens „84FAB0“, und die verwendete Farbe ist ebenfalls „84FAB0“.
Wir bekommen zwei Farben und die Codes sind:
Color("8FD3F4")
Color("84FAB0")
复制代码Verwenden Sie es als Nächstes im ContentView-Dateicode.
Wir haben festgestellt, dass es sich um einen Verlauf aus zwei Farben links und rechts handelt, dann ist die Startfarbe Color("8FD3F4"), die Endfarbe ist Color("84FAB0"), die Startposition ist links und die Endposition ist die Rechts.
Wir setzen es auch in Richtung des Farbverlaufs im Code.
.background(LinearGradient(gradient: Gradient(colors: [Color("8FD3F4"), Color("84FAB0")]), startPoint: .leading, endPoint: .trailing))
复制代码Herzlichen Glückwunsch, wir haben die Farbverlaufsschaltfläche fertig programmiert!
Allerdings habe ich hier ein Problem gefunden: Beim Verschönern der Schaltfläche haben wir viele Modifikatorcodes verwendet.
Wenn es viele Schaltflächen gibt und die Farbstile wiederverwendet werden können, entspricht das Duplizieren von viel Code nicht unserem Ziel, Code elegant zu schreiben.
Erinnern Sie sich an den Inhalt von [SwiftUI Minimalist Tutorial 06: Elegant Code Reuse]? Das Prinzip beim Schreiben von Code in SwiftUI besteht darin, dass die wiederverwendeten Stile extrahiert werden sollten.
Hier machen wir ein neues Konzept namens "ButtonStyles" bekannt, das das Protokoll von Schaltflächenstilen ist.
Seine Codestruktur ist wie folgt:
struct GradientBackgroundStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
configuration.label
//按钮修饰符
}
}
复制代码Wir haben eine neue Struktur namens "GradientBackgroundStyle" erstellt, die dem ButtonStyle-Protokoll entspricht.
Dann müssen wir nur noch den Stilcode in diese Struktur verschieben und wiederverwenden.
//样式引用方式
.buttonStyle(GradientBackgroundStyle())
复制代码Vollständiger Code:
//按钮
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)
}
}
复制代码Bisher haben wir die Verwendung von Verlaufsfarben gemeistert!
Wenn diese Spalte für Sie hilfreich ist, liken, kommentieren und folgen Sie ~