Question

在我的SwiftUI应用程序中，我想像苹果自己的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)
    }
}

结果应该是这样的：

PS 。也许其他方法是：

按以下顺序放置视图：VStack { NavigationBarMimicry(); NavigationView {...}};
取消注释的代码行：.navigationBarHidden(true)；

SwiftUI带来导航项

1 个答案: