在 iOS 14 的 SwiftUI 中右对齐 .bottomBar ToolbarItem

Question

我想补充一个“撰写”按钮到.bottomBar的.toolbar我NavigationView。

添加一个Spacer()简单的几乎居中对齐项目：

struct HomeView: View {
    var body: some View {
        NavigationView {
            Text("Hello, World!")
                .navigationTitle("Hello, World!")
                .toolbar {
                    ToolbarItem(placement: .bottomBar) {
                        HStack {
                            Spacer()
                            Button(action: { print("Pressed") }) {
                                Image(systemName: "plus.circle.fill")
                                    .imageScale(.large)
                                    .font(.title)
                            }
                        }
                    }
                }
        }
    }
}

这会产生以下结果：

不是我所期望的。更奇怪的是，这并不是完全居中对齐，而是偏离了几个像素。

那么我该怎么做：

1. 右对齐？

2. 居中对齐？

谢谢

Answer 1

我遇到了同样的问题，这是我发现的（Xcode 12.0 Beta 6）

右对齐

一种方法是使用两个.bottomBar项目。

.toolbar(content: {
    ToolbarItem(placement: .bottomBar) {
        Spacer()
    }
    ToolbarItem(placement: .bottomBar) {
        Button(action: {}) {
            Text("Add List")
        }
    }
})

更简洁的是将 aToolbarItemGroup与 a一起使用Spacer()。

.toolbar(content: {
    ToolbarItemGroup(placement: .bottomBar) {
        Spacer()
        Button(action: {}) {
            Text("Add List")
        }
    }
})

居中

要将项目居中，您可以将其.status用作展示位置。

.toolbar(content: {
    ToolbarItem(placement: .status) {
        Button(action: {}) {
            Text("Add List")
        }
    }
})

Answer 2

每个 ToolbarItem 必须包含单个视图，因此只需将 Spacer 移动到单独的工具栏项目中

使用 Xcode 12b3 进行测试

    .toolbar {
        ToolbarItem(placement: .bottomBar) {
            Spacer()
        }
        ToolbarItem(placement: .bottomBar) {
            Button(action: { print("Pressed") }) {
                Image(systemName: "plus.circle.fill")
                    .imageScale(.large)
                    .font(.title)
            }
        }
    }

注意：要使其居中，请删除带有间隔的工具栏项目