Отображение индикатора активности или представления прогресса очень важно, чтобы показать, что задача приближается к завершению. Это жизненно важный элемент пользовательского интерфейса, отсутствие которого создает у пользователя впечатление, что приложение зависло.
В этом блоге я покажу, как использовать как определенные, так и неопределенные типы прогресса.
Определить ProgressView:
Чтобы создать определенное представление хода выполнения, инициализируйте ProgressView с привязкой к числовому значению, которое отслеживает ход выполнения. По умолчанию прогресс равен 0,0, а итог равен 1,0.
@State private var progressPercent = 0.1
VStack {
ProgressView(value: progress)
Button(“Increase”, action: { progress += 0.1} )
}
Неопределенный ProgressView:
Чтобы создать неопределенное представление прогресса, используйте инициализатор без значения прогресса.
var body: some View{
ProgressView()
}
Стиль представления прогресса:
Чтобы настроить внешний вид и взаимодействие представлений хода выполнения, создав стили, соответствующие протоколу ProgressViewStyle.
В приведенном ниже примере показан настраиваемый стиль кругового просмотра хода выполнения.
struct CircularProgressIndicatorStyle: ProgressViewStyle {
var strokeColor = Color.blue
var strokeWidth = 14.0
@State private var isLoading = false
func makeBody(configuration: Configuration) -> some View {
return ZStack {
// Background circle
Circle()
.stroke(Color(.systemGray5), lineWidth: 14)
.frame(width: 100, height: 100)
Circle()
.trim(from: 0, to: 0.2)
.stroke(strokeColor, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
.frame(width: 100, height: 100)
.rotationEffect(Angle(degrees: isLoading ? 360 : 0))
.animation(Animation.linear(duration: 1).repeatForever(autoreverses: false), value: isLoading)
.onAppear() {
self.isLoading = true
}
}
}
}
