ios - 在添加和删除第二个按钮时保持 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)
                )
        }
    }
}

还有一段视频显示了当我选择按钮时会发生什么。

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

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

• 移动.frame(alignment: .trailing)到NavigationView水平
• 添加了一个else之后self.isButtonShown添加了一个Spacer()
• 适用.frame(alignment: .trailing)于 BButton

Answer 1

这是 SwiftUI 1.0 中的已知问题

SwiftUI 2.0

基于new的解决方案.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")
                    })
                }
            }
        }
    }
}