設計進度條

iOS 14 開始才有 `ProgressView`，所以在這裡我們利用 SwiftUI 來打造屬於自己獨特設計的「進度條」：`NeuProgressBar2`。

我們用了兩個元件：

• NeuProgressBarTitle 📦

• MyProgressBar2 📦

來組裝完整的「進度條」(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())

相依套件

• Gradient 🌀

• Neu 🔸

• MyProgressBar2 📦

• NeuProgressBar2 📦

參考資料

文章

• Explore the New Features in SwiftUI for Building Progress Views - Medium

🍎

• SwiftUI ⟩ Views & Controls ⟩ ProgressView (iOS 14)

討論區

• default value for @ViewBuilder closure? - StackOverflow