SwiftUI - Catalyst 半透明侧边栏

Posted 2023-02-15

【中文标题】SwiftUI - Catalyst 半透明侧边栏

【英文标题】：SwiftUI - Catalyst translucent sidebar

【发布时间】：2021-04-16 18:21:50

【问题描述】：

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

下面的代码给出了一个不透明的侧边栏（图 1）。

在 Mac（不是催化剂）上，侧边栏看起来不错（图 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")
        
        
        
    

【问题讨论】：

有什么消息吗？我有同样的问题。

不，似乎只有 UIKit 可以做到，作为苹果文档...developer.apple.com/documentation/uikit/mac_catalyst/…

你找到什么了吗？

是的，只是 UIKit ????

添加背景模糊修改器怎么样？我试过但没用...

【参考方案1】：

从 AppDelegate main 开始，然后按照 Apple 的教程 re: 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 中时，我无法获得半透明效果，但确实获得了全高侧边栏。

【参考方案2】：

我发现即使没有将 ListStyle 指定为 SidebarListStyle()，在侧边栏视图上使用 .background(Color.clear) 也可以实现半透明背景。为我在 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!
      
   

【讨论】：

欢迎来到 Stack Overflow。请阅读How to Answer。在没有解释的情况下转储代码很少有帮助。