我是否能够使用Kotlin Compose for Desktop Applications(以及如何)切换视图

Question

(昨天一直在寻找答案后，我决定问这个问题，因为我在其他地方找不到。)

我有一个小的示例应用程序，我想使用它来测试Compose在桌面应用程序中的工作方式。

我已经能够用"fun main()=application｛"等创建一个应用程序UI。但至少目前，这似乎限制了我只能使用一个视图。

有没有一种方法可以开发多个不同的视图，然后从一个视图更改为另一个视图(对于桌面应用程序)？

我尝试了多种方法来访问我正在寻找的其他自定义视图，但它们并没有按预期工作。

我的更高意图是为这个小型Kotlin项目创建一个MVC架构(在那里我可以交换到许多不同的视图，这些视图具有不同的功能)，但我很高兴现在专注于视图的开发和从一个视图到另一个视图的更改这一较小的问题(希望我稍后可以使用一个示例并提取功能)。

示例(没有正确的代码)：

视图1-初始启动视图-显示带有文本的按钮

视图2-可以更改为的视图(预期视图可以swap)-显示带有文本的表格

每个都通用-可用于在不同视图之间交换的按钮或菜单。

我曾尝试(未成功)：

1. 使用可组合函数，但无法从onClick函数切换视图-错误：@Composable调用只能在@Composable函数的上下文中发生
2. 搜索提供这种工作方式的其他教程。我只能看到单一视图的项目/示例，没有什么可以有效地更改的。假定查找错误的搜索词

我的示例项目-如果它不起作用，请原谅，我已经修改了它以减少问题。

@OptIn(ExperimentalComposeUiApi::class)
fun main() = application {

var action by mutableStateOf("Last action: None")
Window(
onCloseRequest = ::exitApplication,
title = "TestProject",
state = WindowState(width = 1300.dp, height = 750.dp)
) {
Column() {
TextButton(onClick = {}, modifier = Modifier.padding(8.dp)) {
Text(text = "Change View")
}
}
MenuBar {
Menu("Tasks", mnemonic = 'T') {
Item(
"Create new Task",
onClick = { action = "Last action: Create new Task" },
shortcut = KeyShortcut(Key.C, ctrl = true)
)
}

}
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
Text(text = action)
}
}
}

如上所述，在"尝试1"-添加了setView()-作为一个例子，我暂时假设只有2个视图，并且还没有推广该函数，在这个例子中，合并2个以上的视图，或者实际地一次传递任何一个视图-setView(view):

TextButton(onClick = {setView()}, modifier = Modifier.padding(8.dp)) {
Text(text = "Change View")
}

我看到有一些"当"语句涉及状态，但不确定这是否适用于桌面应用程序等。

如有任何帮助，我们将不胜感激。谢谢(如果你走到这一步：))

Answer 1

看起来您需要导航。您可以查看官方教程，也可以查看TodoApp示例。还有一个类似的问题你可能有兴趣检查。

Answer 2

正如@Arkadi-Ivanov所建议的，导航是从一个视图移动到下一个视图的正确区域。

为了真正使用Navigation，我必须弄清楚如何使用已经普遍可用的功能，并调整我的应用程序以使用它们。

这就引出了Compose Navigation的官方文档https://developer.android.com/jetpack/compose/navigation

有一些示例向您展示了如何使用这些函数，但没有展示它们如何组合在一起。我使用下面的例子来帮助我：

1. 加载一个可用的应用程序
2. 能够理解应用程序以便使用它

(https://github.com/itheamc/navigation-for-compose-for-desktop-桌面的基本应用程序，用作进一步适应的基础。这个例子还提供了一个MVC体系结构，因此与我想要研究的内容一致)

我相信图书馆建议(https://github.com/arkivanov/Decompose)将是非常合适的，但对于初学者来说很难直接理解。有一个关于基本设置的初学者演练会很好，这样在使用这个库时就不会有太大的进入障碍，因为它们的名称与最初的Compose文档略有不同。-当我掌握了如何正确使用UI时，我需要深入研究这一点。

基本示例-如何完成视图：为了进行导航，您需要创建可组合视图，然后将它们添加到NavigationHost类中，如Compose Navigation Documentation 中所述

1.创建视图：

@Composable
fun Profile(navController: NavController) {
/*...*/
Button(onClick = { navController.navigate("friendslist") }) {
Text(text = "Navigate next")
}
/*...*/
}

2.创建导航主机：-添加新创建的视图并链接回NavController

NavHost(navController = navController, startDestination = "profile") {
composable("profile") { Profile(navController) }
composable("friendslist") { FriendsList(/*...*/) }
/*...*/
}

或在桌面示例中：

@Composable
fun CustomNavigationHost(navController: NavController, project: Project) {
NavigationHost(navController) {
composable(Screen.HomeScreen.name) { HomeScreen(navController) }
composable(Screen.NotificationsScreen.name) { NotificationScreen(navController) }
.build()
}

3.从视图导航：

@Composable
fun HomeScreen(
navController: NavController
) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(navController.currentScreen.value)
Button(
onClick = {
navController.navigate(Screen.ProfileScreens.name)
}) {
Text("Navigate to Profile")
}
}
}

焦点在按钮和导航功能上：

Button(
onClick = {
navController.navigate(Screen.ProfileScreens.name)
})

还有一点要做，因为你需要能够在应用程序中遵循这条路径才能正确运行它，但View到NavHost的初始流是我所寻找的导航的主要部分，因为它可以用于多个不同的视图/可组合文件。

如何做到这一点是给出的例子的一部分，也是为了让我自己适应自己的目的。