我正在寻找一种方法来覆盖后退箭头必须更好地与屏幕上的内容对齐的间距。例如,我的大多数屏幕都使用
.padding()
或 .padding(.horizontal)
将其移离边缘。
理想情况下,在导航栏中,我想使用
.padding(.horizontal)
来确保前导和尾随操作按钮与屏幕内容对齐。这是更多背景图片。
这张图片的
VStack
中包含一些文本,该文本正在使用 .padding()
毕竟不是那个习俗。您仍然会使用本机修饰符,没什么花哨的,就像这样:
NavigationStack {
VStack {
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.overlay(alignment: .topLeading) {
Button("", systemImage: "chevron.left") {
}
.foregroundStyle(.black)
.padding(.horizontal) // <-- Padding as you like here
}
}
对我来说,这似乎并不是那么“定制”,它只是像其他人所说的那样的叠加。您可以将整个应用栏放在覆盖层中,也许创建一个您编写一次的修改器,然后忘记它在那里:
struct AppBarModifier: ViewModifier {
var title: String
func body(content: Content) -> some View {
content
.overlay(alignment: .topLeading) {
ZStack(alignment: .center) {
Text(title)
}
.frame(maxWidth: .infinity)
.overlay(alignment: .leading) {
Button("", systemImage: "chevron.left") {
}
.foregroundStyle(.black)
.padding(.horizontal) // <-- Padding as you like here
}
}
}
}
像这样使用它:
struct ContentView: View {
var body: some View {
NavigationStack {
VStack {
}
.modifier(AppBarModifier(title: "Title"))
}
}
}
让我知道你对此的想法!