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

Posted 2023-02-23

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

【英文标题】：Maintain navigation item button alignment in SwiftUI as second button is added & removed

【发布时间】：2020-07-02 15:11:36

【问题描述】：

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

以下是显示此内容的最小示例：

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 级别 在self.isButtonShown 之后添加了else，添加了Spacer() 将.frame(alignment: .trailing) 应用于B Button

【参考方案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")
                    )