Блог

Цель состоит в том, чтобы сделать полупрозрачную боковую панель на 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")
        }
        
        
    }
}
 

Начните с AppDelegate main и следуйте руководству Apple re: UISplitViewController «Примените полупрозрачный фон к вашему основному контроллеру представления».

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

Обернув UISplitViewController в UIViewControllerRepresentable, я не смог получить прозрачность, но получил боковую панель в полный рост.

Вы должны выбрать «Оптимизировать интерфейс для Mac» на вкладке общих настроек вашей цели. Тогда боковая панель будет полупрозрачной.

Я выяснил, что использование .background(Color.clear) в представлении боковой панели делает возможным полупрозрачный фон, даже если ListStyle не указан как 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!
      }
   }
}