ToolbarItem(placement: .navigationBarTrailing) 将图标定位到父视图的后缘

Question

我在导航栏中安装了一个按钮。我把它放在了后缘。我正在使用图像来填充按钮的标签。标签显示为右对齐。我怎样才能居中呢？

ToolbarItem(placement: .navigationBarTrailing) {
    Button {
        // action
    } label: {
        Image(systemName: "keyboard")
    }
    .border(.red, width: 1)
}

Answer 1

这就是默认按钮样式的工作原理。可以使用普通样式将其关闭，然后您可以根据需要进行设计（in-place 或包装成自己的样式）

测试 Xcode 13.3 / iOS 15.4

ToolbarItem(placement: .navigationBarTrailing) {
    Button {
        // action
    } label: {
        Image(systemName: "keyboard")
            .foregroundColor(.blue).padding(4)     // << here !!
    }
    .buttonStyle(PlainButtonStyle()) // turn off design, only behavior 
    .border(.red, width: 1)
}

ToolbarItem(placement: .navigationBarTrailing) 将图标定位到父视图的后缘

ToolbarItem(placement: .navigationBarTrailing) positions icon to trailing edge of parent view

uinavigationbar

swiftui