ios - subview 导航栏中不需要的大空间

Question

我的 subview 导航栏中有一个巨大的空间。

我假设通过添加 trailing按钮，它会将所有内容很好地对齐到 back 的右侧按钮。

这是我的主要观点:



现在这是我的 subview :



看看顶部的巨大缺口。我想要 plus按钮位于 back 的右侧按钮。我需要为此创建一个自定义后退按钮还是什么？

这是我的 subview 代码:

var body: some View {
    NavigationView {
        List {
            Text("hello world")
            Text("hello world")
            Text("hello world")
        }
        .navigationBarTitle(todoList.title!)
        .navigationBarItems(trailing:
            HStack {
                Button(action: {
                    self.add = true
                }, label: {
                    Image(systemName: "plus")
                })
            }
        )
    }
}

我还想从 back 中删除文本按钮，所以它只是一个图像。

总结一下:

我想要 plus back 右上方的按钮按钮

我想删除 back按钮文本，显示为 ColorTodo在此示例中

是否有 SwiftUI 原生方式来执行此操作，或者我是否需要自定义后退按钮并禁用默认按钮？

Answer 1

额外空间的原因是您正在包装 NavigationView在 NavigationView 内;删除 subview 中的那个，加号按钮将位于正确的高度。

至于删除文本，是的，您需要隐藏默认的后退按钮并将其替换为您自己的。 subview 可能看起来像

struct SubView: View {
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>

    var body: some View {
            List {
                Text("hello world")
                Text("hello world")
                Text("hello world")
            }
            .navigationBarTitle(todoList.title!, displayMode: .inline) // 1
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading: backButton, trailing: addButton)
    }

    var backButton: some View {
        Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }, label: {
            HStack {
                Image(systemName: "chevron.left")
                Text("Back") // 2
            }
        })
    }

    var addButton: some View {
        Button(action: {
            self.add = true
        }, label: {
            ZStack(alignment: .trailing) {
                Rectangle() // 3
                    .fill(Color.red.opacity(0.0001)) // 4
                    .frame(width: 40, height: 40)
                Image(systemName: "plus")
            }
        })
    }
}

笔记:

虽然 displayMode: .inline没有必要，默认的大标题样式在进出动画时看起来有点奇怪。

如果需要，您可以删除它(但见下文)

这个矩形是为了增加点击目标的大小，因为默认按钮只会是加号图标的大小，这可能太小了。

矩形不能完全透明，否则它不会注册点击。