Изменение размера (высоты) progressView в SwiftUI

#ios #swift #xcode #swiftui #uiprogressview

#iOS #swift #xcode #swiftui #uiprogressview

Вопрос:

Я создал 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))
    }
}

1. Попробуйте .scaleEffect использовать модификатор, как указано здесь

2. Я попробовал это, но это изменило весь progressView, а не только линейную линию, как я хочу.

3. Ах, я не прочитал все изображение целиком.

4. Должен видеть этот serialcoder.dev/text-tutorials/swiftui/progressview-in-swiftui

Ответ №1:

Я не знаю прямого способа изменить высоту, но вы можете использовать .scaleEffect модификатор. Обязательно укажите 1 масштаб x, чтобы только увеличить высоту.

 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)

Чтобы обойти это, просто создайте свой собственный 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)
        }
    }
}

1. Это работает, но можете ли вы создать закругленные углы в этом progressView? Как?

2. @CGR сложно настраивать такие вещи, как progressView, которые находятся в системе. Возможно, было бы проще просто создать свой собственный индикатор выполнения.

Ответ №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))