Question

我在SwiftUI的导航栏中添加了一些按钮，并且由于我需要向其中添加一些填充，因此它们显示的位置比我预期的要多（如下所示）。

如果我从每个按钮上删除了单独的填充，我可以解决此问题，但是在这种情况下，从UX的角度来看，点击区域非常有限且不寻常。

是否可以删除默认的额外填充？

.navigationBarItems(
        trailing:
            HStack(alignment: .center, spacing: 0) {
                Button(action: {

                }) {
                    Image(systemName: "trash")
                    .imageScale(.large)
                    .accessibility(label: Text("Delete"))
                    .padding()
                }

                Button(action: {

                }) {
                    Image(systemName: "square.and.arrow.up")
                    .imageScale(.large)
                    .accessibility(label: Text("Share"))
                    .padding()
                }

                CustomEditButton() {
                    if self.mode?.wrappedValue == .active {
                        return self.triggerSave()
                    } else {
                        return true
                    }
                }
            }
    )

Answer 1

尝试一下（复制-粘贴-运行）

import SwiftUI

struct DestinationView: View {
    let txt: String
    var body: some View {
        Text(txt)
            .navigationBarTitle(txt)
        .navigationBarItems(trailing:
            HStack {
                Button(action: {
                    print("tap trasgh")
                }) {
                    Image(systemName: "trash")
                }
                Button(action: {
                    print("tap in")
                }) {
                    Image(systemName: "square.and.arrow.down")
                }
                Button(action: {
                    print("tap out")
                }) {
                    Image(systemName: "square.and.arrow.up")
                }
            }.imageScale(.large).padding(.vertical, 8).padding(.horizontal, 3)//.border(Color.blue)
        )
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: DestinationView(txt: "Destination 1")) {
                    Text("Destination 1")
                }
                NavigationLink(destination: DestinationView(txt: "Destination 2")) {
                    Text("Destination 2")
                }
            }
        }.navigationBarTitle("title")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 2

我将.padding(.trailing)用于“删除”和“共享”按钮，而根本不对CustomEditButton使用任何填充。

这是结果

demo

Answer 3

我找到了适合我需要的以下解决方法。它不是完美的，但至少可轻按的区域足够，而且看起来还不错。

HStack(alignment: .center, spacing: 0) {
     Button(action: {
          ////
     }) {
          Image(systemName: "trash")
              .imageScale(.large)
              .accessibility(label: Text("Delete"))
              .padding(.vertical)
              .padding(.horizontal, 8)
     }

     Button(action: {
          ////
     }) {
          Image(systemName: "trash")
              .imageScale(.large)
              .accessibility(label: Text("Delete"))
              .padding(.vertical)
              .padding(.horizontal, 8)
     }

     Button(action: {
          ////
     }) {
          Image(systemName: "trash")
              .imageScale(.large)
              .accessibility(label: Text("Delete"))
              .padding(.vertical)
              .padding(.leading, 8)
              .padding(.trailing, 4)
     }
}

如何从导航栏删除默认填充（尾随）

3 个答案: