如何排列 SwiftUI 工具栏项目？

Question

我有一个带有 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()
                        }
                    }

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。

• 自动：自动放置项目，具体取决于许多因素，包括平台、尺寸类别或其他项目的存在。

• BottomBar：该项目放置在底部工具栏中。适用于 iOS、iPadOS 和 Mac Catalyst。

• cancelAction：该项目表示模态界面的取消操作。

• 确认动作：该项目代表模态界面的确认动作。

• structuralAction：该项目表示模式界面的破坏性操作。

• 导航：该项目代表导航操作。

• navigationBarLeading：该项目放置在导航栏的前缘。适用于 iOS、iPadOS、tvOS 和 Mac Catalyst。

• navigationBarTrailing：该项目放置在导航栏的后缘。适用于 iOS、iPadOS、tvOS 和 Mac Catalyst。

• PrimaryAction：该项目代表主要操作。

• 主体：该项目放置在主要项目部分。

• ToolbarItemPlacement：该项目表示当前上下文的状态更改。