> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/master/todo/tutorials/neumorphism/she-ji-jin-du-tiao/untitled.md).

# NeuProgressBar2 📦

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

上半部文字的部分是：[NeuProgressBarTitle 📦](/ios/master/todo/tutorials/neumorphism/she-ji-jin-du-tiao/neuprogressbartitle.md)\
下半部色條的部分是：[MyProgressBar2 📦](/ios/master/todo/tutorials/neumorphism/she-ji-jin-du-tiao/myprogressbar2.md)

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MI9S6XBKS9cWu-PTn4Z%2F-MI9U52a6lSHPqmx50uC%2FNeuProgressBar2.jpeg?alt=media\&token=d02d16c2-d1a3-4542-a276-4be0b119bd87)

{% tabs %}
{% tab title="NeuProgressBar2 📦 " %}

```swift
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
    }
}
```

{% endtab %}

{% tab title="相依元件" %}

* [NeuProgressBarTitle 📦](/ios/master/todo/tutorials/neumorphism/she-ji-jin-du-tiao/neuprogressbartitle.md)
* [MyProgressBar2 📦](/ios/master/todo/tutorials/neumorphism/she-ji-jin-du-tiao/myprogressbar2.md)
  {% endtab %}
  {% endtabs %}