How to place a window permanently in front of another in Jetpack Compose for desktop?

Question

I'm using jetpack compose for desktop in a kotlin project intended for mac/windows use.

My setup looks something like the code below

@Composable
private fun MainWindow(onExit: () -> Unit) {
    val mainWindowState = WindowState(size = DpSize(1000.dp, 1000.dp))
    val settingsWindowState = WindowState(size = DpSize(800.dp, 600.dp))

    key(mainWindowState) {
        Window(
            onCloseRequest = onExit,
            title = "main window title",
            state = mainWindowState
        ) {
              // other composables ...
        }
        key(settingsWindowState) {    
            Window(
                onCloseRequest = // not relevant for question,
                title = "Settings title",
                state = settingsWindowState,
                visible = isVisible,  // magic business logic variable (for illustration purpose) 
                alwaysOnTop = true
            ) {
                  // other composables ...
            }
        }
    }
}

My goal is that the smaller settings window always displays in front of the main window when it is visible and the windows overlap. This is somewhat solved now by the "alwaysOnTop" variable in the settings window, but this has the undesired side effect that this window is permanently stuck in front of all other program windows running on the users system (windows, mac, etc.). This obstructs the use of any other programs when the settings window is visible.

How can i get the desired setup?

I've tried removing the alwaysOnTop variable, but now the main window moves in front of the settings window when we click visible parts of the main window in the background and it now gains focus on the system.

I've also tried using information from LocalWindowInfo.current.isWindowFocused to alter the alwaysOnTop variable, but this seemes to only complicate things.

What isn't working about your approach of tying `isWindowFocused` to `alwaysOnTop`? — James Williams, Nov 17 '22 at 17:01

score 1 · Answer 1 · answered Mar 13 '23 at 03:50

You can replace alwaysOnTop with a windowListener. I havent tested this code but it can look like this:

fun ApplicationScope.AppWindow(){
    // add mutableState here
    val windowAdapter by lazy {
        object : WindowAdapter(){
            override fun windowActivated(e: WindowEvent?) {
                super.windowActivated(e) // add mutableState logic
            }
        }
    }

    val windowState = rememberWindowState(
        width = WindowConstants.defaultWidth.dp,
        height = WindowConstants.defaultHeight.dp,
        position = WindowPosition(Alignment.Center)
    )
    Window(
        state = windowState,
        onCloseRequest = ::exitApplication,
        title = "",
    ) {
        window.addWindowListener(windowAdapter)
        // some conditions in another nested window that depends on that mutablestate
        window.requestFocus()
...

}

How to place a window permanently in front of another in Jetpack Compose for desktop?

1 Answers1