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

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

我假设通过添加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的本机方式?还是我需要自定义后退按钮并禁用默认按钮?

pantial 回答:子视图导航栏中的多余空间很大

多余空间的原因是您将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. 矩形不能完全透明,否则将无法记录分接头。
本文链接:https://www.f2er.com/3155651.html

大家都在问