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

Posted 2023-02-24

【中文标题】为啥使用 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。

【参考方案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")