如何排列 SwiftUI 工具栏项目？

Question

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

更糟糕的是，在 iPhone 8 / 8 Plus 上查看时，其中 2 个按钮位于 window 的最边缘。

如何正确地将 spacing/padding 应用于工具栏按钮，以便它们在不同的 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()
                        }
                    }

Answer 1

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

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。

自动：该项目是自动放置的，具体取决于许多因素，包括平台、大小 class 或是否存在其他项目。
底部栏：该项目位于底部工具栏中。适用于 iOS、iPadOS 和 Mac Catalyst。
取消操作：该项目表示模态界面的取消操作。
确认操作：该项目表示模态界面的确认操作。
破坏性动作：该项目表示对模态界面的破坏性操作。
导航：该项目表示导航操作。
navigationBarLeading: 该项目位于导航栏的前缘。适用于 iOS、iPadOS、tvOS 和 Mac Catalyst。
navigationBarTrailing: 该项目放置在导航栏的后缘。适用于 iOS、iPadOS、tvOS 和 Mac Catalyst。
主要动作：该项目代表主要操作。
校长：该项目放置在主要项目部分。
ToolbarItemPlacement: 该项目表示当前上下文的状态更改。

如何排列 SwiftUI 工具栏项目？

How do I arrange SwiftUI Toolbar items?

user-interface

toolbar

ios

ios-simulator

swiftui