在 SwiftUI 中更改 ProgressView 的大小（高度）

Question

我ProgressView在 SwiftUI 中创建了一个（使用 Xcode）并进行了一些编辑，但还没有弄清楚如何改变它的高度。

struct ProgressBar: View {
    var body: some View {
        VStack {
            ProgressView("Progres:", value: 50, total: 100)
        }.foregroundColor(Color(UIColor.systemBlue))
        .scaleEffect(1, anchor: .center)
        .accentColor(Color(UIColor.systemGreen))
    }
}

Answer 1

我知道没有直接的方法来改变高度，但你可以使用.scaleEffect修饰符。确保指定1x 比例以仅增加高度。

struct ContentView: View {
    var body: some View {
        ProgressBar()
        .padding([.leading, .trailing], 10)
    }
}

struct ProgressBar: View {
    var body: some View {
        VStack {
            ProgressView(value: 50, total: 100)
            .accentColor(Color.green)
            .scaleEffect(x: 1, y: 4, anchor: .center)
        }
    }
}

结果：

这样做的一个缺点是您不能传入 Label，因为它也会被拉伸。

ProgressView("Progress:", value: 50, total: 100)

要解决此问题，只需Text在ProgressView.

struct ProgressBar: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Progress:")
            .foregroundColor(Color.blue)
            
            ProgressView(value: 50, total: 100)
            .accentColor(Color.green)
            .scaleEffect(x: 1, y: 4, anchor: .center)
        }
    }
}

Answer 2

我需要一些半径更圆的东西，并且不将 ProgressView 隐藏在另一个视图中，所以这是我的看法（通过使用缩放效果扩展 @aheze 的答案）

struct MyProgressViewStyle: ProgressViewStyle {
  var myColor: Color

  func makeBody(configuration: Configuration) -> some View {
      ProgressView(configuration)
          .accentColor(myColor)
          .frame(height: 8.0) // Manipulate height, y scale effect and corner radius to achieve your needed results
          .scaleEffect(x: 1, y: 2, anchor: .center)
          .clipShape(RoundedRectangle(cornerRadius: 6))
          .padding(.horizontal)
  }
}
// Here's how to use it inside a View
ProgressView(value: currentProgress, total: totalProgress)
            .progressViewStyle(MyProgressViewStyle(myColor: Color.green))