子视图导航栏中的多余空间很大

Question

我的子视图导航栏中有一个很大的空间。

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

这是我的主要观点：

现在这是我的子视图：

看一下顶部的巨大缺口。我希望plus按钮位于按钮的右侧back。我是否需要为此创建自定义后退按钮？

这是我的子视图代码：

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

多余空间的原因是，您将a包裹NavigationView在其中NavigationView；删除子视图中的一个，加号按钮将位于正确的高度。

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

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

笔记：

1. 尽管displayMode: .inline不是必需的，但默认的大标题样式在动画的进出方面看起来有些奇怪。
2. 您可以根据需要将其删除（但请参见下文）
3. 这个矩形是为了增加点击目标大小，因为默认按钮只会是加号图标的大小，可能太小了。
4. 矩形不能完全透明，否则将无法记录抽头。