How can I make two windows on jetpack compose desktop and going from window to another?

Question

How can I make two windows on jetpack compose desktop and going from window to another when I click button for example?

fun main() = application {
    Window(
        onCloseRequest = ::exitApplication,
        title = "Products Manager",
        state = rememberWindowState(width = 700.dp, height = 600.dp)
    ) {
        val count = remember { mutableStateOf(0) }
        MaterialTheme {
            Column(Modifier.fillMaxSize(), Arrangement.spacedBy(5.dp)) {
                Button(modifier = Modifier.align(Alignment.CenterHorizontally),
                    onClick = {
                        count.value++
                    }) {
                    Text(if (count.value == 0) "Hello World" else "Clicked ${count.value}!")
                }
                Button(modifier = Modifier.align(Alignment.CenterHorizontally),
                    onClick = {
                        count.value = 0
                    }) {
                    Text("Reset")
                }
            }
        }
    }
}

Markhor

Answer 1

To create multiple windows, you simply need to have multiple Window composables. Check out Open and close multiple windows documentation section for example.

To switch between windows programmatically, you can use window.toFront() on the window that should become topmost: window is property available in FrameWindowScope inside Window.content.

Here's an example how it can be done with two window "types". You can replace type with any other identifier.

enum class WindowTypes {
    First,
    Second,
}

fun main() = application {
    val windowFocusRequestSharedFlow = remember { MutableSharedFlow<WindowTypes>() }

    WindowTypes.values().forEach { windowType ->
        key(windowType) {
            Window(
                title = windowType.toString(),
                onCloseRequest = ::exitApplication,
            ) {
                LaunchedEffect(Unit) {
                    windowFocusRequestSharedFlow
                        .filter { it == windowType }
                        .collect {
                            window.toFront()
                        }
                }
                val scope = rememberCoroutineScope()
                Button({
                    scope.launch {
                        val windowTypeToFocus = WindowTypes.values().run {
                            get((indexOf(windowType) + 1) % count())
                        }
                        windowFocusRequestSharedFlow.emit(windowTypeToFocus)
                    }
                }) {
                    Text("next window")
                }
            }
        }
    }
}

Vallonia

This approach works as long as there is at least one window initially visible. If you start out with no windows visible, seemingly adding one window state to the list doesn't trigger recomposition. Standalone example: gist.github.com/hakanai/a9ec53c015c54b7de10729e75fa05069 – Berryman

@Berryman this may be a bug, you can report it – Vallonia