在添加和删除第二个按钮时保持 SwiftUI 中的导航项按钮对齐

Question

我有一个场景，其中将有一个或两个基于某些标准的尾随按钮。我希望按钮始终与尾部对齐以保持视觉一致性，但到目前为止，无论我做什么，它们似乎都居中对齐。

下面是一个最简单的例子：

import SwiftUI

struct ContentView: View {
    @State private var isButtonShown = true

    var body: some View {
        NavigationView {
            Button(action: {
                self.isButtonShown.toggle()
            }, label: {
                Text(self.isButtonShown ? "Hide Button" : "Show Button")
                     })
                .navigationBarItems(trailing:
                    HStack {
                        if self.isButtonShown {
                            Button(action: {
                                print("A tapped")
                            }, label: {
                                Text("A")
                            })
                            Spacer(minLength: 30)
                        }

                        Button(action: {
                            print("B tapped")
                        }, label: {
                            Text("B")
                        })
                    }
                    .frame(alignment: .trailing)
                )
        }
    }
}

还有一个视频，展示了当我 select 按钮时发生的情况。

我的目标是让 B 保持在相同的位置，无论是否显示 A。

最后，我尝试了一些其他项目：

• 已将 .frame(alignment: .trailing) 移至 NavigationView 级别
• 在添加了 Spacer()
的 self.isButtonShown 之后添加了一个 else
• 应用 .frame(alignment: .trailing) 到 B Button

Answer 1

这是 SwiftUI 1.0 中的已知问题

SwiftUI 2.0

基于新.toolbar的解决方案没有。测试 Xcode 12 / iOS 14

struct ContentView: View {
    @State private var isButtonShown = true

    var body: some View {
        NavigationView {
            Button(action: {
                self.isButtonShown.toggle()
            }, label: {
                Text(self.isButtonShown ? "Hide Button" : "Show Button")
                     })
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    if self.isButtonShown {
                        Button(action: {
                            print("A tapped")
                        }, label: {
                            Text("A")
                        })
                    }
                }

                ToolbarItem(placement: .primaryAction) {
                    Button(action: {
                        print("B tapped")
                    }, label: {
                        Text("B")
                    })
                }
            }
        }
    }
}