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

CodeBender

我有一种情况,根据某些条件会有一个或两个尾随按钮。我希望它能够使按钮始终与尾部对齐,以保持视觉一致性,但是到目前为止,无论我做什么,它们似乎都居中对齐。

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

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
他的脾气

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")
                    })
                }
            }
        }
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在MainActivity中重新单击按钮以启动第二个活动后,如何在第二个活动中保留价值?

选择第二个单选按钮时未选中第一个单选按钮

单击第二个“添加到购物车”按钮时,jQuery代码不起作用

如何制作第二个提交按钮?

选择JS中的第二个提交按钮

在Swift 3中按下创建提醒按钮时设置第二个提醒

第一次单击时,jQuery触发第二个按钮

当第一个按钮和第二个按钮之间存在另一个元素时,如何使用nth-child正确选择第二个按钮?

带操作按钮的过滤表和带串扰的第二个表

NSAlert:将第二个按钮设置为默认按钮和“取消”按钮

未选择选择元素中的第二个选项时禁用按钮

连接第二个列表时,从列表中查找和删除重复项

在单击按钮添加到第二个主要活动时添加文本字段

使用第二个按钮更改按钮状态

根据条件在第二个表视图中添加和删除行

如何隐藏第二个按钮并仅在按下第一个按钮时显示它?

如何在编辑视图中的Rails(简单)form_for中添加第二个按钮以删除实例?

表单外的PHP的第二个提交按钮

删除倒数第二个和第二个匹配项之间的所有内容

如何向MainActivity添加第二个按钮代码

当我在第二个活动上按“取消”按钮时,onActivityResult错误

我如何在单击按钮时打开第二个QML页面

单击时无法禁用第二个按钮或任何其他按钮

向按钮添加第二个功能并禁用某些类

点击第二个按钮,我希望第一个和第二个按钮被着色

单击第二个按钮时 JavaFX 场景冻结

导航栏中的第二个下拉按钮显示与上一个按钮相同的内容?

GridLayout 面板与第二个面板上的按钮和 JRadioButton 问题

iOS 13 中第二个视图控制器的导航栏按钮对齐错误