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

Question

我在 SwiftUI 中创建了一个

ProgressView

（使用 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

修饰符。确保为 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)
        }
    }
}

结果：

这样做的一个缺点是你不能传入 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))

Answer 3

我通过创建自定义视图解决了这个问题

struct ProgressBarView: View {
    
    let value: CGFloat
    let total: CGFloat
    
    var body: some View {
        GeometryReader(content: { geometry in
            ZStack(alignment: .leading, content: {
                Rectangle()
                    .foregroundColor(Color.gray.opacity(0.2))
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .clipShape(Capsule())
                
                Rectangle()
                    .foregroundColor(.blue)
                    .frame(maxHeight: .infinity)
                    .frame(width: calculateBarWidth(contentWidth: geometry.size.width))
                    .clipShape(Capsule())
            })
            .clipped()
        })
    }
    
    private func calculateBarWidth(contentWidth: CGFloat) -> CGFloat {
        return (value / total) * contentWidth
    }
}

// You can set any width and height:
VStack(alignment: .leading, content: {
    Text("Progress:")
        .font(.system(size: 12))
    
    ProgressBarView(value: 2, total: 5)
        .frame(maxWidth: .infinity)
        .frame(height: 13)
})

看起来像这样：

进度条