ios - SwiftUI 降低导航项

Question

在我的 SwiftUI 应用程序中，我想像在 Apple 自己的 UIKit 应用程序中那样将导航栏项目向下放置。

下面是“健康”应用程序的屏幕截图。请注意个人资料图片如何与“摘要”文本保持一致。这就是我想要实现的目标。

我尝试过使用 .padding(.top, 90) 但这没有用，因为它不会关闭允许单击按钮的虚拟框。使用填充意味着您必须点击图像/文本上方的按钮。

谢谢。

Answer 1

不幸的是，我没有找到任何使用 SwiftUI 在 iOS 13 中更改导航栏高度的解决方案，并且之前遇到了同样的问题。下面的解决方案将适合您，如果您的导航栏始终只有黑色并且您可以接受顶部的间隙:

struct NavBarCustomItems: View {

    init() {
        setNavigationBarToBlackOnly()
    }

    func setNavigationBarToBlackOnly() {
        let blackAppearance = UINavigationBarAppearance()
        blackAppearance.configureWithOpaqueBackground()
        blackAppearance.backgroundColor = .black
        blackAppearance.shadowColor = .clear // to avoid border line

        UINavigationBar.appearance().standardAppearance = blackAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = blackAppearance
    }

    var body: some View {

        NavigationView {

            VStack {

                NavigationBarMimicry()

                // here is your content
                HStack {
                    Text("Favorites")
                    Spacer()
                    Button(action: {}) { Text("Edit") }
                }
                .padding()


                Spacer()

                VStack {
                    Text("Main screen")
                }
                // you need spacer(s) to be sure, that NavigationBarMimicry is always on the top
                Spacer()

            }

        }

    }

}

// MARK: here is what you need in navigation bar
struct NavigationBarMimicry: View {

    var body: some View {
        HStack {

            Text("Summary")
                .bold()
                .font(.system(size: 40))
                .foregroundColor(.white)
                .padding(.horizontal)

            Spacer()

            Rectangle()
                .foregroundColor(.white)
                .frame(width: 40)
                .padding(.horizontal)

        }
        .background(Color.black)
        .frame(height: 40)
        .navigationBarTitle("", displayMode: .inline)
        // you can add it to hide navigation bar, navigation will work via NavigationLink
//        .navigationBarHidden(true) 
    }

}

struct NavBarCustomItems_Previews: PreviewProvider {
    static var previews: some View {
        NavBarCustomItems().environment(\.colorScheme, .dark)
    }
}

结果应该是这样的:

P.S.也许其他方式是:

• 按以下顺序放置 View :VStack { NavigationBarMimicry(); NavigationView {...}};
• 取消注释代码行:.navigationBarHidden(true)；