iOS 14 上将按钮放置在部分页眉/页脚上时出现奇怪的 UI 渲染问题

Strange UI rendering problem on iOS 14 when a button is placed on a section header/footer

提问人:Khashayar 提问时间:10/3/2020 更新时间:10/3/2020 访问量:895

问:

在下面的示例代码中,一个按钮放置在 (form-) 节标题上,每当按下它时,该按钮都会切换工作表。工作表包含要显示的元素列表。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            Form{
                Section(header: headerView()) {
                    Text("Some Text")
                }
            }
        }
    }
}

struct headerView: View {
    @State var showSheet = false

    var body: some View {
        Button(action: { self.showSheet.toggle()}){
            HStack{
                Spacer()
                Image(systemName: "pencil.and.ellipsis.rectangle")
                Text("View Sheet")
            }
        }.sheet(isPresented: $showSheet) {sheetView()}
    }
}

struct sheetView: View {
    @Environment(\.presentationMode) private var presentationMode

    var body: some View {
        NavigationView{
            VStack(alignment: .leading) {
                List() {
                    Text("List element 1")
                    Text("List element 2")
                    Text("List element 3")
                    Text("List element 4")
                }
            }
            .navigationBarTitle(Text("Logs"), displayMode: .inline)
            .navigationBarItems(leading: EditButton(), trailing: Button(action: {self.presentationMode.wrappedValue.dismiss()}) { Text("Done").bold()})
        }
    }
}

这在 iOS 13 上运行良好。但是,在 iOS 14 中,正如您在下面的屏幕截图中看到的那样,它呈现完全损坏:

  1. 列表元素具有奇怪的字体大小、颜色,并且是大写的(最重要的一个!
  2. 导航栏按钮为灰色且大写
  3. 导航栏标题为大写

只要您不触摸屏幕,损坏的行为就会一直存在。当您触摸屏幕并将工作表向下拖动一点时,列表外观将得到纠正。如果对导航栏执行相同的操作,它也将正确呈现。

有人也面临这个问题吗?任何已知的修复程序?

enter image description here

swift ios14 swiftui-list swiftui

评论


答:

1赞 Asperi 10/3/2020 #1

这看起来像一个错误。可能的解决方法是将工作表移出 Form。

使用 Xcode 12.0 / iOS 14 进行测试。

demo

struct ContentView: View {
    @State var showSheet = false
    var body: some View {
        VStack{
            Form{
                Section(header:
                        headerView(showSheet: $showSheet)
                        ) {
                    Text("Some Text")
                }
            }
        }.sheet(isPresented: $showSheet) {sheetView()}
    }
}

struct headerView: View {
    @Binding var showSheet: Bool

    var body: some View {

        Button(action: { self.showSheet.toggle()}){
            HStack{
                Spacer()
                Image(systemName: "pencil.and.ellipsis.rectangle")
                Text("View Sheet")
            }
        }
    }
}