In the following sample, tapping the 'Expand' button causes the text '39' to clip as it resizes in transition to '40'. The real context of this use is a text label that reflects the value of a picker in an animated diagram. I'd like for the text to only take up the space that it requires, but without clipping as it animates between values.
Disabling animations for the label isn't an option, as the label's position in my diagram also animates.
Reproduction:
import SwiftUI
struct TextClipping: View {
enum ExpansionState {
case expanded
case contracted
mutating func toggle() {
switch self {
case .expanded:
self = .contracted
case .contracted:
self = .expanded
}
}
}
@State var expansion: ExpansionState = .contracted
var text: String {
switch expansion {
case .expanded:
return "40"
case .contracted:
return "39"
}
}
var body: some View {
VStack(spacing: 16) {
Text(text)
.font(.system(.title, design: .rounded))
.fontWeight(.bold)
.foregroundColor(.black)
Button(self.expansion == .contracted ? "Expand" : "Contract") {
withAnimation {
self.expansion.toggle()
}
}
}
}
}
struct TextClipping_Previews: PreviewProvider {
static var previews: some View {
TextClipping()
}
}
Any ideas for how I might allow the text of the label to change fluidly, without clipping?