> 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.md).

# 設計進度條

我們用了兩個元件：

* [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)

來組裝完整的「進度條」(progress bar)：[NeuProgressBar2 📦](/ios/master/todo/tutorials/neumorphism/she-ji-jin-du-tiao/untitled.md)

![](/files/-MI8war15P5d9t05pGwB)

## 程式碼

{% tabs %}
{% tab title="範例" %}

```swift
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())
```

{% endtab %}

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

* [Gradient 🌀](/ios/custom/ext/gradient.md)
* [Neu 🔸](/ios/master/todo/tutorials/neumorphism/gradients/neu.md)
* [MyProgressBar2 📦](/ios/master/todo/tutorials/neumorphism/she-ji-jin-du-tiao/myprogressbar2.md)
* [NeuProgressBar2 📦](/ios/master/todo/tutorials/neumorphism/she-ji-jin-du-tiao/untitled.md)

{% endtab %}
{% endtabs %}

## 參考資料

{% tabs %}
{% tab title="文章" %}

* [ ] [Explore the New Features in SwiftUI for Building Progress Views](https://t.co/6NWEgfFlAz?amp=1) - Medium
  {% endtab %}

{% tab title="🍎 " %}

* SwiftUI  ⟩  Views & Controls  ⟩ [ProgressView](https://developer.apple.com/documentation/swiftui/progressview) (iOS 14)
  {% endtab %}

{% tab title="討論區" %}

* [default value for @ViewBuilder closure?](https://stackoverflow.com/questions/64047904/default-value-for-viewbuilder-closure) - StackOverflow
  {% endtab %}
  {% endtabs %}