在 Jetpack Compose 中查看寻呼机

Jetpack Compose 是 Google 推出的一款全新的 UI 工具包，旨在更加简化 Android 应用程序的 UI 开发。在 Jetpack Compose 中，可以使用基于函数的界面开发方式来构建应用程序界面，具有更高的灵活性和可重用性。

在 Jetpack Compose 中，可以通过使用 LazyColumn 组件来创建一个滚动列表。下面是一个示例，该示例使用 LazyColumn 组件来显示寻呼机的消息列表：

@Composable
fun PagerListDemo(windows: List<Window>) {
    LazyColumn(Modifier.fillMaxSize()) {
        items(windows) { window ->
            Column(Modifier.fillParentMaxSize().border(width = 1.dp, color = Color.Gray)) {
                Text(text = window.title, style = MaterialTheme.typography.h6)

                if (window.messages.isNotEmpty()) {
                    LazyColumn(Modifier.fillParentMaxHeight().padding(16.dp)) {
                        items(window.messages) { message ->
                            Column {
                                Text(text = "${message.time}: ${message.content}")
                                if (message.isImportant) {
                                    Text(text = "Important Message", color = Color.Red)
                                }
                            }
                        }
                    }
                } else {
                    Text(text = "No messages", modifier = Modifier.padding(16.dp))
                }
            }
        }
    }
}

在上述示例中，我们使用 LazyColumn 组件来构建一个消息列表，该组件可以循序渐进地加载和显示消息，并自动回收不可见的消息。在消息列表中，我们为每个窗口创建一个标题，并在消息不为空时创建一个嵌套的 LazyColumn 组件，用于在窗口中显示消息。

要在 Jetpack Compose 中创建一个寻呼机窗口，可以使用 AlertDialog 组件来构建一个带有输入框的对话框，然后在用户单击“发送”按钮时创建一个新的消息，并将其添加到消息列表中。以下是一个示例，该示例使用 AlertDialog 组件来显示一个输入框，并在用户提交新消息时向消息列表中添加新项：

@Composable
fun CreateNewMessageDialog(onCreateMessage: (String) -> Unit) {
    var messageText by remember { mutableStateOf("") }

    AlertDialog(
        onDismissRequest = { },
        title = { Text(text = "Create new message") },
        text = {
            OutlinedTextField(
                value = messageText,
                onValueChange = { messageText = it },
                label = { Text(text = "Message content") },
                modifier = Modifier.fillMaxWidth()
            )
        },
        confirmButton = {
            Button(
                onClick = {
                    onCreateMessage(messageText)
                }) {
                Text(text = "Send")
            }
        },
        dismissButton = {
            Button(onClick = { }) {
                Text(text = "Cancel")
            }
        }
    )
}

在上述示例中，我们使用 AlertDialog 组件来构建一个带有输入框的对话框，该组件可以显示用于输入新消息的文本字段。当用户单击“发送”按钮时，我们将调用 onCreateMessage 回调函数，并传递当前输入的消息文本。然后，在 PagerListDemo 函数中，我们可以使用以下代码将新消息添加到消息列表中：

onCreateMessage = { content ->
    val message = Message(content, Date())
    val windowIndex = windows.indexOfFirst { it.isSelected }
    windows[windowIndex].messages = windows[windowIndex].messages + message
}

在上述代码中，我们在当前选定的窗口中创建了一个新的 Message 对象，并将其添加到该窗口的消息列表中。我们还可以使用 isSelected 属性来查找当前选定的窗口。在 Jetpack Compose 中，可以使用类似于此类的函数来实现复杂的 UI 交互。