为什么使用 SwiftUI 按钮的图像背景不显示在工具栏中？答案

【问题标题】：Why doesn't the button's image background show up in toolbar using SwiftUI?为什么使用 SwiftUI 按钮的图像背景不显示在工具栏中？
【发布时间】：2021-08-04 22:59:40
【问题描述】：

在 Apple 的日历应用程序中，它们提供了一个工具栏项，可以根据某些状态切换其样式。它本质上是一个切换。我正在尝试在 SwiftUI 中重新创建相同的东西，并使其在明暗模式下都能正常工作。我能够制作一个按预期工作的视图，直到我将它放入工具栏中并且它不再显示选定状态。这是我的尝试：

struct ToggleButtonView: View {
    @State private var isOn = false

    var body: some View {
        Button(action: {
            isOn.toggle()
        }, label: {
            if isOn {
                Image(systemName: "list.bullet.below.rectangle")
                    .accentColor(Color(.systemBackground))
                    .background(RoundedRectangle(cornerRadius: 5.0)
                                    .fill(Color.accentColor)
                                    .frame(width: 26, height: 26))
            } else {
                Image(systemName: "list.bullet.below.rectangle")
            }
        })
        .accentColor(.red)
    }
}

这是我实际将按钮放入工具栏的方式：

struct TestView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                ForEach(0..<5) { number in
                    Text("Number \(number)")
                }
            }
            .toolbar {
                ToolbarItemGroup(placement: .navigationBarTrailing) {
                    ToggleButtonView()
                
                    Button(action: {}, label: {
                        Image(systemName: "plus")
                    })
                }
            }
            .navigationTitle("Plz halp")
        }
        .accentColor(.red)
    }
}

以下是日历应用的屏幕截图。请注意搜索图标左侧的工具栏项。

【问题讨论】：

你能把代码显示在哪里以及如何将它放入工具栏吗？
是的！帖子应该更新了。
在 macos 12.beta、xcode 13.beta、target ios 15 和 macCatalyst 上对我来说在明暗模式下都很好用。可能在旧系统上有所不同。
我没想到会这样。我在 macOS 11.4，Xcode 12.5.1，目标 iOS 14 上。我什至创建了一个新项目并完全复制了我在这篇文章中放置的内容，并且当切换打开时它不显示背景。
有人可以确认它适用于 macos 12.beta、xcode 13.beta、目标 ios 15。

标签： swift swiftui

【解决方案1】：

你可以试试这个：

            .toolbar {
                // placement as you see fit
                ToolbarItem(placement: .navigationBarTrailing) {
                    ToggleButtonView()
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {}, label: {
                        Image(systemName: "plus")
                    })
                }
            }

【讨论】：

我也无法让它工作 :( 感谢您的尝试

【解决方案2】：

这看起来像是 iOS 15 之前 SwiftUI 如何处理 ToolbarItems 的问题。According to Asperi's answer 类似的问题，“...所有标准类型（按钮、图像、文本等）都被 ToolbarItem 拦截并转换为适当的内部表示。”

SwiftUI iOS 15 中的切换按钮

有趣的是，iOS 15 现在使用.button 切换样式为上述用例提供了标准解决方案，如以下代码所示：

struct ContentView: View {
    @State private var isOn = false

    var body: some View {
        Toggle(isOn: $isOn) {
            Image(systemName: "list.bullet.below.rectangle")
        }
    }
}

【讨论】：