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

【问题标题】：Change size (height) of ProgressView in SwiftUI在 SwiftUI 中更改 ProgressView 的大小（高度）
【发布时间】：2020-11-20 20:26:28
【问题描述】：

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

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))
    }
}

【问题讨论】：

尝试.scaleEffect 修饰符，回答here
我试过了，但这改变了整个 ProgressView，而不仅仅是我想要的线性线。
啊，我没有通读整张图片。
必看serialcoder.dev/text-tutorials/swiftui/progressview-in-swiftui

标签： ios swift xcode swiftui uiprogressview

【解决方案1】：

据我所知，没有直接的方法可以更改高度，但您可以使用 .scaleEffect 修饰符。确保为 x 比例指定1，以便仅增加高度。

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)
        }
    }
}

结果：

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

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

要解决此问题，只需在 ProgressView 上方创建自己的 Text。

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)
        }
    }
}

【讨论】：

它可以工作，但是你能在那个 ProgressView 中创建圆角吗？怎么样？
@CGR 很难自定义来自系统的 ProgressView 等内容。 make your own progress bar 可能更容易。

【解决方案2】：

我需要半径更圆的东西，并且没有将 ProgressView 隐藏在另一个 View 中，所以这是我的看法（通过使用缩放效果扩展 @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))

【讨论】：