我正在做一个自定义进度条。我有一个文本,我想在动画时随着进度移动。但相反,文本消失了,并在新的位置重新出现(见下面的gif)。
验证码:
private struct MyProgressBar: View {
let progress: Double
var body: some View {
RoundedRectangle(cornerRadius: 5)
.frame(height: 20)
.foregroundColor(.gray)
.overlay(alignment: .leading) {
GeometryReader { geo in
let progressWidth = geo.size.width * progress
RoundedRectangle(cornerRadius: 5)
.foregroundColor(.yellow)
.frame(width: progressWidth)
.overlay(alignment: .topTrailing) {
bubble(progress)
.fixedSize()
.alignmentGuide(HorizontalAlignment.trailing) { d in
d[HorizontalAlignment.center]
}
.alignmentGuide(VerticalAlignment.top) { d in
d[.bottom]
}
}
}
}
.padding()
}
@ViewBuilder
private func bubble(_ progress: Double) -> some View {
Text(progress.formatted(.percent))
.monospacedDigit()
.padding(5.0)
.background {
RoundedRectangle(cornerRadius: 2)
.foregroundColor(.green)
}
}
}
struct MyProgressBarExample: View {
@State private var progress: Double = 0.3
var body: some View {
VStack {
MyProgressBar(progress: progress)
VStack {
Button("change") {
withAnimation() {
progress = Double.random(in: 0.0...1.0)
}
}
Slider(
value: $progress.animation(),
in: 0.0...1.0,
step: 0.005
)
.padding()
}
}
}
}
对于动态值,文本会消失并重新出现,但如果我将文本更改为一些常量字符串,如“hello”,则它会移动得很好。
第一节第一节第一节第一节第一次
如何使绿色背景的文字移动而不是出现和消失?
1条答案
按热度按时间h6my8fg21#
将
.drawingGroup
添加到气泡中。也不要认为它必须是ViewBuilder
: