如何排列 SwiftUI 工具栏项？答案

【问题标题】：How do I arrange SwiftUI Toolbar items?如何排列 SwiftUI 工具栏项？
【发布时间】：2021-05-10 06:20:50
【问题描述】：

我有一个带有 4 个按钮的 SwiftUI 工具栏，但是我实现的代码不正确，因为在模拟器中更改设备类型时，按钮最终会出现在奇怪的地方。

更糟糕的是，在 iPhone 8 / 8 Plus 上查看时，有 2 个按钮位于窗口的远端。

如何正确地为工具栏按钮应用间距/填充，以便它们在不同的 iOS 设备上保持一致？

谢谢！

 // This code spaces the buttons but they change positions depending on the iOS device


                 ToolbarItem {
                        HStack {
                            HStack {
                                ProfileUploadMediaButton()
                            }.padding([.trailing], 85)
                            HStack {
                                ProfileUsernameButton()
                            }.padding([.trailing], 84)
                            HStack {
                                ProfileLiveButton()
                            }.padding([.trailing], 6)
                            HStack {
                                AccountButton()
                            }.padding([.trailing], 12)
                        }
                    }
                })

// I was thinking code like this but all buttons are bunched together on the right-side of  // the screen...

                    ToolbarItem {
                        HStack {
                            ProfileUploadMediaButton()
                            ProfileUsernameButton()
                            ProfileLiveButton()
                            AccountButton()
                        }
                    }

【问题讨论】：

我不确定这一点，但我认为您可以在每个元素之间添加某种间距元素。（我认为它被称为灵活空间）让我知道它是否有效！

标签： ios user-interface swiftui ios-simulator toolbar

【解决方案1】：

当您添加 ToolbarItems 时，有一个初始化程序，您可以在其中显式设置每个项目的位置。对于您的情况，您将为左侧、中心和右侧添加 3 个 ToolbarItem。我要提一下，工具栏是动态的，因此它在不同设备上的外观可能会有所不同。

struct ToolbarView: View {
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Hello, world!")
            }
            .navigationTitle("Test")
            .toolbar(content: {
                ToolbarItem(placement: .navigationBarLeading) {
                    Image(systemName: "camera.fill")
                }
                ToolbarItem(placement: .principal) {
                    Text("Username")
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    HStack {
                        Image(systemName: "dot.radiowaves.left.and.right")
                        Image(systemName: "heart.fill")
                    }
                }
            })
        }
    }

}

根据文档，这里是放置选项。我猜当您没有明确添加展示位置时，它们默认为 .automatic。

自动：物品会自动放置，具体取决于许多因素，包括平台、尺寸等级或其他物品的存在。
底部栏：该项目放置在底部工具栏中。适用于 iOS、iPadOS 和 Mac Catalyst。
取消操作：该项目表示模态界面的取消操作。
确认操作：该项目表示模式界面的确认操作。
破坏性动作：该项目表示模态界面的破坏性操作。
导航：该项目代表一个导航操作。
导航栏前导：该项目位于导航栏的前缘。适用于 iOS、iPadOS、tvOS 和 Mac Catalyst。
导航栏尾随：该项目放置在导航栏的后沿。适用于 iOS、iPadOS、tvOS 和 Mac Catalyst。
主要动作：该项目表示主要操作。
校长：该项目被放置在主要项目部分。
ToolbarItemPlacement：该项目表示当前上下文的状态变化。

【讨论】：