SwiftUI - Catalyst半透明侧边栏

Question

目标是在Mac Catalyst上制作一个半透明的侧边栏。

下面的代码提供了一个非半透明的侧边栏（图1）。

在Mac上（不是catalyst），侧边栏看起来很好（图2）。

在Mac Catalyst上是否可能拥有一个半透明的侧边栏？

import SwiftUI

struct ContentView: View {
    var body: some View {
        
        NavigationView {
            
            //sidebar
            List {
                Label("Books", systemImage: "book.closed")
                Label("Tutorials", systemImage: "list.bullet.rectangle")
         
            }
            .background(Color.clear)

            .listStyle(SidebarListStyle())
            
            //content
            Text("Sidebar")
            .navigationTitle("Sidebar")
        }
        
        
    }
}

- Mane Manero

---

有关那个的任何消息吗？我遇到了同样的问题。 - Spriter

不行，似乎只有UIKit可以做到这一点，正如苹果文档所述... https://developer.apple.com/documentation/uikit/mac_catalyst/optimizing_your_ipad_app_for_mac - Mane Manero

你找到了什么吗？ - Mane Manero

没错，只是UIKit。 - a1cd

加入背景模糊修饰符怎么样？我尝试过了，但没有成功... - Mane Manero

你需要将你的视图包装在一个UISplitViewController中。 请参阅https://dev59.com/vr_pa4cB1Zd3GeqP_hDW#68162268。 - Que20

Answer 1

你应该在目标的“常规设置”选项卡中选择“优化Mac界面”。然后，侧边栏将是半透明的。

- BlueSky335

---

这对我解决了问题，谢谢！ - Vatsal Manot

Answer 2

从AppDelegate主函数开始，按照苹果的教程操作，参考UISplitViewController "Apply a Translucent Background to Your Primary View Controller"。

https://developer.apple.com/documentation/uikit/mac_catalyst/optimizing_your_ipad_app_for_mac

在将UISplitViewController包装在UIViewControllerRepresentable中时，我无法获得半透明效果，但是可以获得全高度的侧边栏。

- Ryan

Answer 3

我发现在侧边栏视图上使用 .background(Color.clear) 可以使背景透明，即使没有指定为 SidebarListStyle()。对我来说，在 Xcode 13.1 中有效。

struct ContentView: View {
    var body: some View {
        NavigationView { // without wrapping to NavigationView it won't work
            List { // can be VStack or HStack
                Text("Hello, world!")
                  .padding()
            }
            .listStyle(SidebarListStyle()) // works with other styles
        Text("")
    }
  }
}

struct YourApp: App {
   var body: some Scene {
      WindowGroup {
        ContentView()
            .toolbar {
                Button {
                    
                } label: {
                    Image(systemName: "gear")
                }

            }
            .background(Color.clear) // 3 <-- MUST HAVE!
      }
   }
}

- Danny Aaron