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

问题描述

在下面的示例代码中，（表单-）部分标题上放置了一个按钮，只要按下该按钮，它将在工作表之间切换。该工作表具有要显示的元素列表。

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. NavigationBar按钮为灰色且大写
3. NavigationBar标题为大写

只要您不触摸屏幕，损坏的行为就会持续存在。当您触摸屏幕并将工作表向下拉一点时，列表外观将得到纠正。如果对NavigationBar进行相同的操作，那么它也将正确呈现。

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

解决方法

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

通过Xcode 12.0 / iOS 14测试。

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")
            }
        }
    }
}