NeuProgressBar2 📦

可自訂標題、百分比、進度條樣式，由 NeuProgressBarTitle 與 MyProgressBar2 兩個元件所組合而成。

上半部文字的部分是：NeuProgressBarTitle 📦 下半部色條的部分是：MyProgressBar2 📦

NeuProgressBar2 📦

import SwiftUI

// ⭐️ 可自訂標題、百分比、進度條樣式
public struct NeuProgressBar2<Bar: View>: View {
    
    var title: String              // 進度條「標題」
    let bar  : Bar                 // 進度條「樣式」
    @Binding var percent: CGFloat  // 進度條「樣百分比」
    
    // NeuProgressBar2(title:percent:bar:)
    public init(
        title  : String, 
        percent: Binding<CGFloat>,
        @ViewBuilder bar: () -> Bar  // ⭐️ ViewBuilder closure
    ) {
        self._percent = percent      // ⭐️ 傳進 @Binding 變數的方式
        self.title    = title
        self.bar      = bar()
    }
    
    public var body: some View {
        VStack {
            // title & percentage
            NeuProgressBarTitle(title: self.title, percent: self.$percent)
            // progress bar
            MyProgressBar2(self.$percent) { self.bar }
        }
    }
}

// ⭐️ 給進度條「預設樣式」
extension NeuProgressBar2 where Bar == LinearGradient {
    // NeuProgressBar2(title:percent:)
    public init(
        title  : String, 
        percent: Binding<CGFloat>
    ) {
        self._percent = percent  // ⭐️ 傳進 @Binding 變數
        self.title    = title
        // ⭐️ 給進度條「預設樣式」
        self.bar      = Gradient.right(Color.yellow.opacity(0.8), .red) as! Bar
    }
}

相依元件

• NeuProgressBarTitle 📦

• MyProgressBar2 📦