@Composable
fun CommonDialog() {
   var isDialogOpen by remember { mutableStateOf(false) }
   Button(onClick = { isDialogOpen = true }) {
       Text("Open")
   }
   if (isDialogOpen) {
       AlertDialog(
           onDismissRequest = { },
           confirmButton = {
               Button(onClick = { isDialogOpen = false }) {
                   Text("OK")
               }
           },
           title = { Text("Alert Dialog") },
           text = { Text("Lore ipsum") },
       )
   }
}

@Composable
fun NaturalScrolling() {
   val items = (1..30).map { "Item $it" }
   LazyColumn {
       items(items) {
           Text(
               text = it,
               fontSize = 30.sp,
               modifier = Modifier.padding(start = 20.dp)
           )
       }
   }
}

@Composable
fun DynamicType() {
   Text("This is some sample text", fontSize = 30.sp)
}

kotlin {
    cocoapods {
        extraSpecAttributes["resources"] = "..."
    }
}

改进了 TextField

早期版本中，在两种情况下输入文本可能导致意外行为。从这个版本开始，增强的 TextField 已经克服了这些问题。

大小写问题

首先，TextField 现在可以识别首字母自动大写是否已禁用。这在输入密码时尤其重要。您可以通过 keyboardOptions 实参控制此行为。

为了说明这一点，请查看下面的可组合项：

fun TextFieldCapitalization() {
   var text by remember { mutableStateOf("") }
   TextField(
       value = text,
       onValueChange = { text = it },
       keyboardOptions = KeyboardOptions(
           capitalization = KeyboardCapitalization.Sentences,
           autoCorrect = false,
           keyboardType = KeyboardType.Ascii,
       ),
   )
}

左图是大写属性设为 KeyboardCapitalization.None 时的情形，右图则显示了值为 KeyboardCapitalization.Sentences 时的情形。

硬件键盘

第二种情况与硬件键盘有关。在以前的版本中，使用硬件键盘时，按 Enter 会导致多个换行符，按 Backspace 会触发多个删除。从这个版本开始，这些事件可以正确处理。 

桌面端改进

稳定了测试框架

此版本稳定了对 Compose for Desktop 测试的支持。Jetpack Compose 提供了一组测试 API 来验证 Compose 代码的行为。这些 API 先前已移植到桌面端并在之前的版本中可用，但存在限制。这些限制现已移除，让您可以为应用程序编写全面的 UI 测试。

为了快速展示测试功能，我们来创建并测试一个简单的 UI。下方是我们的示例可组合项：

@Composable
fun App() {
   var searchText by remember { mutableStateOf("cats") }
   val searchHistory = remember { mutableStateListOf() }


   Column(modifier = Modifier.padding(30.dp)) {
       TextField(
           modifier = Modifier.testTag("searchText"),
           value = searchText,
           onValueChange = {
               searchText = it
           }
       )
       Button(
           modifier = Modifier.testTag("search"),
           onClick = {
               searchHistory.add("You searched for: $searchText")
           }
       ) {
           Text("Search")
       }
       LazyColumn {
           items(searchHistory) {
               Text(
                   text = it,
                   fontSize = 20.sp,
                   modifier = Modifier.padding(start = 10.dp).testTag("attempt")
               )
           }
       }
   }
}

这将创建一个记录搜索尝试的简单 UI：

请注意，Modifier.testTag 已用于为 TextField、Button 和 LazyColumn 中的条目指定名称。

然后，我们可以在 JUnit 测试中操作 UI：

class SearchAppTest {
   @get:Rule
   val compose = createComposeRule()


   @Test
   fun `Should display search attempts`() {
       compose.setContent {
           App()
       }


       val testSearches = listOf("cats", "dogs", "fish", "birds")


       for (text in testSearches) {
           compose.onNodeWithTag("searchText").performTextReplacement(text)
           compose.onNodeWithTag("search").performClick()
       }


       val lastAttempt = compose
           .onAllNodesWithTag("attempt")
           .assertCountEquals(testSearches.size)
           .onLast()


       val expectedText = "You searched for: ${testSearches.last()}"
       lastAttempt.assert(hasText(expectedText))
   }
}

使用特定于 Compose 的 JUnit 规则：

1. 将 UI 的内容设置为应用可组合项。

2. 通过 onNodeWithTag 查找文本字段和按钮。

3. 在文本字段中重复输入示例值，然后点击按钮。

4. 通过 onAllNodesWithTag 查找生成的所有文本节点。

5. 断言当前已创建的文本节点数，并获取最后一个。

6. 断言最后一次尝试包含预期消息。

增强了 Swing 互操作性

此版本对 Swing 组件内 Compose 面板的改进呈现引入了实验性支持。这可以防止在显示、隐藏或调整面板大小时出现过渡呈现问题。它还支持在组合 Swing 组件和 Compose 面板时进行适当分层。Swing 组件现在可以在 ComposePanel 上方或下方显示。

为了说明这一点，请查看下面的示例：

fun main() {
   System.setProperty("compose.swing.render.on.graphics", "true")
   SwingUtilities.invokeLater {
       val composePanel = ComposePanel().apply {
           setContent {
               Box(modifier = Modifier.background(Color.Black).fillMaxSize())
           }
       }


       val popup = object : JComponent() { ... }


       val rightPanel = JLayeredPane().apply {
           add(composePanel)
           add(popup)
           ...
       }


       val leftPanel = JPanel().apply { background = CYAN }


       val splitter = JSplitPane(..., leftPanel,rightPanel)


       JFrame().apply {
           add(splitter)
           setSize(600, 600)
           isVisible = true
       }
   }
}

在这段代码中，我们创建并显示一个 Swing JFrame，内容如下：

1. JFrame 包含带有垂直分隔线的 JSplitPane。

2. 拆分窗格的左侧是青色的标准 JPanel。

3. 右侧是 JLayeredPane，由两层组成：

• 包含 Box 可组合项的 ComposePanel，颜色为黑色

• 自定义 Swing 组件，其中文本“Popup”出现在白色矩形内。这通过重写 paintComponent 方法实现。

属性 compose.swing.render.on.graphics 设为 true 时：

• 自定义 Swing 组件显示在 Box 可组合项顶部。

• 移动滑块时不会出现过渡图形伪影。

如果此标志未设置，则自定义组件将不可见，并且滑块移动时可能出现过渡伪影：

请分享您对 Compose Multiplatform 的反馈。我们邀请您加入 Kotlin Slack #compose 频道，讨论与 Compose Multiplatform 和 Jetpack Compose 相关的一般主题。在 #compose-ios 中，您可以找到有关 Compose Multiplatform for iOS 的讨论。

试用 Compose Multiplatform 1.5.0：

https://github.com/JetBrains/compose-multiplatform/releases/tag/v1.5.0

更多文章和视频

• Compose Multiplatform for iOS 现已进入 Alpha 阶段

• Compose Multiplatform 概览

• 使用 Compose Multiplatform 构建 iOS 和 Android 应用

  https://www.youtube.com/watch?v=5_W5YKPShZ4

本博文英文原作者：

Kotlin 技术布道师 

Garth Gilmour

这就是 Kotlin 编程语言

简洁、跨平台、且有趣！