SwiftUI使用动画切换Form视图时出现布局异常的问题咨询
我查阅过该问题的相关类似描述,但均与本次遇到的场景不符,对应的解决方案也不适用于我的情况。我想了解是否有其他开发者遇到过该问题,是否存在可在动画场景下正常展示Form的方案,以及该问题是否值得向苹果反馈为Bug。
我的ContentView中包含两个用于切换布尔值的按钮:一个按钮直接切换布尔值,另一个按钮在withAnimation动画块中执行布尔值切换操作。该布尔值控制ReviewSheet、BugSheet两个Form视图的显示逻辑:无动画切换时两个Form均可正常渲染,但在动画块中切换时Form会出现布局错误。
如下为「正常」的ReviewSheet视图:
点击「Edit」按钮切换到BugSheet视图时,布局显示正常:
点击「Bug It」按钮通过动画切换时,BugSheet的渲染效果如下:
此时BugSheet中的Form存在两处异常:
- 第一个Section的header与放大后的内容区域重叠
- 第二个Section中的Text无法自动换行,添加lineLimit修饰符也没有效果
以下是三个视图的完整代码:
struct ContentView: View { @State private var isEditing = false var body: some View { VStack(alignment: .leading, spacing: 0) { HStack { Text("Form Bug") .font(.title) Spacer() // 该Edit按钮直接切换isEditing,此时BugSheet与ReviewSheet的切换效果符合预期 Button(isEditing ? "Save 1" : "Edit") { isEditing.toggle() } // 该按钮在动画块中切换isEditing,此时BugSheet与ReviewSheet切换后Form会出现渲染异常 Button(isEditing ? "Save 2" : "Bug It") { withAnimation { isEditing.toggle() } } } .padding() .background(Color.orange) .foregroundColor(.white) if isEditing { BugSheet() } else { ReviewSheet() } } } } struct ReviewSheet: View { @State private var titleText: String = "Example Title" @State private var shortDescription: String = "This should work" @State private var keywords: String = "swiftui, apple, form, bug" let longDescription = "The rain in Spain stays mainly on the Plains even while the quick brown fox jumps over the lazy dog." var body: some View { Form { Section(header: Text("Title")) { Text(titleText) } Section(header: Text("Details")) { Text(shortDescription) Text(longDescription) Text(keywords) } } } } struct BugSheet: View { enum Field: Hashable { case title case shorty case keywords } @FocusState private var focusedField: Field? @State private var titleText: String = "" @State private var shortDescription: String = "" @State private var keywords: String = "" @State private var notes: String = "This is a starter note." let longDescription = "The rain in Spain stays mainly on the Plains even while the quick brown fox jumps over the lazy dog." private func gotoField(_ field: Field) { focusedField = field } var body: some View { Form { Section(header: Text("Title")) { TextField("title here", text: $titleText, onCommit: {gotoField(.shorty)}) .autocapitalization(.words) .disableAutocorrection(false) .keyboardType(.default) .focused($focusedField, equals: .title) } Section(header: Text("Details")) { TextField("short description", text: $shortDescription, onCommit: {gotoField(.keywords)}) .autocapitalization(.sentences) .disableAutocorrection(false) .keyboardType(.default) .focused($focusedField, equals: .shorty) Text(longDescription) TextField("keywords", text: $keywords, onCommit: {gotoField(.title)}) .autocapitalization(.none) .disableAutocorrection(true) .keyboardType(.default) .focused($focusedField, equals: .keywords) } } } }
内容的提问来源于stack exchange,提问作者P. Ent
相关产品推荐
相关产品推荐

