設計進度條
iOS 14 開始才有 `ProgressView`,所以在這裡我們利用 SwiftUI 來打造屬於自己獨特設計的「進度條」:`NeuProgressBar2`。
我們用了兩個元件:
來組裝完整的「進度條」(progress bar):NeuProgressBar2 📦

程式碼
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
var body: some View {
VStack {
// MyProgressBar2
// normal
MyProgressBar2(.constant(0.3)).border()
// change height
MyProgressBar2(.constant(0.5), height: 40).border()
// change padding
MyProgressBar2(.constant(0.7), padding: 10).border()
// change margin
MyProgressBar2(.constant(0.9), margin: 20).border()
// change bar
MyProgressBar2(.constant(0.7)) {
Gradient.right(.red, .orange, .yellow, .green, .blue, .purple)
}.border()
// NeuProgressBar2
NeuProgressBar2(title: "Sunshine", percent: .constant(0.2)).border()
NeuProgressBar2(title: "Happiness", percent: .constant(1)) {
Gradient.right(.pink, .purple, .red)
}
} // container (VStack)
.padding().background(Neu.color.cardBackground)
}
}
PlaygroundPage.current.setLiveView(ContentView())
參考資料
Last updated
Was this helpful?