Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I want to create a side window for the main window in VisionOS

This is what I want to achieve

I want to create a window that's main and on the right side, I want to have another window but this should not have the controls to close as the main window has in the bottom. Is this possible? If the user drags the main window, the side window should follow it maintaining it's position as to the right of the main window.

I tried to create separate views for main and side windows. Tried doing this but the side window didn't appear.

import SwiftUI

@main
struct App: App {
    var appState = AppState()
    
    var body: some Scene {
        WindowGroup {
            let feedViewModel = FeedViewModel(appState: appState)
        
            ContentView(feedViewModel: feedViewModel)
                .environmentObject(appState)
        } // Main Window
    
        WindowGroup {
            VideoListView()
        } // Side Window
    }
}
like image 582
Lahfir Avatar asked Aug 31 '25 17:08

Lahfir


1 Answers

From your description, the easiest way to achieve what you want is to apply a glass background to two separate views and disable the default glass background of the window. This can be done by first setting the windowStyle to .plain. Then for the separate panes adding the .glassBackgroundEffect() view modifier. For example:

import SwiftUI

@main
struct WindowTestApp: App {
    var body: some Scene {
        WindowGroup {
            HStack(spacing: 25) {
                VStack {
                    Spacer()
                    HStack {
                        Spacer()
                        ContentView()
                        Spacer()
                    }
                    Spacer()
                }
                .glassBackgroundEffect()
                VStack {
                    Spacer()
                    Text("HELLO WORLD!!")
                        .monospaced()
                    Spacer()
                }
                .frame(width: 500)
                .glassBackgroundEffect()
            }
        }
        .windowStyle(.plain)
    }
}

Will modify the default VisionOS template to have one window but with two separate glass views. Like so:

Screenshot of VisionOS app with one window but two separate glass views.

Another option might be to use a .ornament view modifier to add a view outside of the window but it will be more difficult to position that view in-line with the window

like image 84
beyowulf Avatar answered Sep 12 '25 10:09

beyowulf