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

Question

我有一个简单的列表和一个导航视图，其中导航视图在滚动时会重叠在列表上方。

这是我想要的外观。 这是我得到的重叠效果。 这是代码。

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

}

当我添加padding(.top)时，重叠停止了，但导航栏背景变成了不同的颜色。

- isaacthedev

Answer 1

请尝试以下内容：

快速编程语言

struct MedicalDashboard: View {
    init() {
        if #available(iOS 15, *) {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            UINavigationBar.appearance().standardAppearance = appearance
            UINavigationBar.appearance().scrollEdgeAppearance = appearance
        }
    }

    ...
}

- Jarvan

Answer 2

在Xcode 13.4上，除了缺少一个}，没有.padding(.top)并且使用自定义的List，对我来说一切都很顺利。问题可能来自MenuItemList()。

我已经通过替换.navigationBarItems并为您添加sheet来更新您的代码：

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

}

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

- Alexnnd

---

在我的情况下，使用工具栏无效。 - Yasir Arefin Tusher