SwiftUI - 导航视图标题重叠列表

isa*_*dev 6 xcode ios swift swiftui

我有一个带有导航视图的简单列表,其中导航视图在滚动时与列表重叠。

这是我想要的外观。 在此输入图像描述

这是我从重叠中得到的结果 在此输入图像描述

这是代码

struct MedicalDashboard: View {
let menuItemData = MenuItemList()

var body: some View {
    NavigationView {
        List(menuItemData.items, id: \.id) { item in
            MenuItemRow(menuItem: item)
        }
        
        .listStyle(.insetGrouped)
        .navigationTitle("Dashboard")
        .navigationBarItems(trailing:
                                Button(action: {
            // TODO: - Pop up a sheet for the settings page.
            print("User icon pressed...")
        }) {
            Image(systemName: "person.crop.circle").imageScale(.large)
        }
                            
        )
        .padding(.top)
    }

}
Run Code Online (Sandbox Code Playgroud)

}

当我添加填充(.top)时,重叠停止,但我在导航上得到不同的颜色背景 在此输入图像描述

Ale*_*nnd 1

在 Xcode 13.4 上,除了缺少}、没有.padding(.top)和自定义 之外,List一切对我来说都很有魅力。

问题可能来自MenuItemList().

我仍然通过替换.navigationBarItems和添加工作表来更新您的代码:

struct MedicalDashboard: View {

    @State private var showSheet = false

    var body: some View {

        NavigationView {

            List { // Custom list
                Text("Hello")
                Text("Salut")
            }
            .listStyle(.insetGrouped)
            .navigationTitle("Dashboard")
            .toolbar() { // .navigationBarItems will be deprecated
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        showSheet.toggle()
                        print("User icon pressed.")
                    }, label: {
                        Image(systemName: "person.crop.circle")
                    })
                    .sheet(isPresented: $showSheet) { /* SettingsView() */ }
                }
            }

        }

    } // New

}
Run Code Online (Sandbox Code Playgroud)

编辑您的帖子并向我们展示MenuItemList()。