如何安排 SwiftUI 工具欄項目？

Question

我有一個帶有 4 個按鈕的 SwiftUI 工具欄，但是我實現的代碼不正確，因為在模擬器中更改設備類型時按鈕最終出現在奇怪的地方。

更糟糕的是，在 iPhone 8 / 8 Plus 上查看時，其中 2 個按鈕位於 window 的遠邊緣。

如何正確地將間距/填充應用於工具欄按鈕，以便它們在不同的 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 個 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。

• 自動：根據許多因素自動放置物品，包括平台、尺寸 class 或其他物品的存在。

• bottomBar：項目放置在底部工具欄中。 適用於 iOS、iPadOS 和 Mac Catalyst。

• cancelAction：該項表示模態界面的取消動作。

• ConfirmationAction：該項表示模態界面的確認動作。

• 破壞性動作：該項目表示模態界面的破壞性動作。

• 導航：該項目表示導航操作。

• navigationBarLeading：項目放置在導航欄的前沿。 適用於 iOS、iPadOS、tvOS 和 Mac Catalyst。

• navigationBarTrailing：項目放置在導航欄的后沿。 適用於 iOS、iPadOS、tvOS 和 Mac Catalyst。

• primaryAction：該項目表示主要操作。

• 主體：該項目被放置在主體項目部分。

• ToolbarItemPlacement：該項目表示當前上下文的狀態變化。