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

多余空间的原因是您将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")
            }
        })
    }
}

注意：

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

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

1 个答案: