Compose Multiplatform 1.5.0
Compose Multiplatform 1.5.0 现已正式推出。它采用适用于 Kotlin 的 Jetpack Compose 声明式 UI 框架,并将其从 Android 扩展到桌面端、iOS 和 Web。桌面版本已经稳定,iOS 处于 Alpha 阶段,Web 支持仍为实验性。有关完整说明,请参阅 Compose Multiplatform 网站。
此版本的一些亮点包括:
-
Dialog、Popup 和 WindowInsets API 现在采用通用代码。
-
对于 iOS 滚动,资源管理和文本字段已得到改进。
-
UI 测试框架在桌面端已经稳定。
此版本基于 Jetpack Compose 1.5,重点关注性能改进。同时,它以 1.1 版 Material Design 3 为基础构建, 包括日期选择器和时间选择器等新组件。
试用 Compose Multiplatform 1.5.0:
https://github.com/JetBrains/compose-multiplatform/releases/tag/v1.5.0
Compose Multiplatform
支持 Dialog、Popup 和 WindowInsets
从 1.5 版开始,Compose Multiplatform 中提供对话框和弹出窗口。对话框用于模态事件,用户在其中做出选择或输入数据。同时,弹出窗口用于非模态行为,例如提供可选功能。
在此版本中,基类型 Dialog 和 Popup,以及 DropdownMenu 和 AlertDialog 都可以从通用代码中访问。这避免了提供平台特定功能的需要。
例如,下面的可组合项完全以通用代码编写:
@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") },
)
}
}
在桌面端、Android 和 iOS 上的显示方式:
此版本提供的第三项功能是 WindowInsets API,描述为了防止内容与系统 UI 重叠而需要进行多少调整。从版本 1.5 开始,此功能包含在 Compose Multiplatform 中,因此可在 Android 和 iOS 上使用。
使用 WindowInsets API,可以通过 Compose Multiplatform 在凹口后绘制背景内容。无需在应用程序顶部添加白线。差异如以下屏幕截图所示:
iOS 上的改进
iOS 平台是此次发布的重点,包含大量改进。滚动模仿了平台的外观和风格,资源管理得到简化,文本处理有所增强。
自然滚动
在此版本中,iOS 滚动已调整为模仿原生滚动。假设代码中要显示的条目的数量和/或大小超出可用空间:
@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)
)
}
}
}
滚动时,条目会从屏幕边缘弹开,与原生 iPhone 应用程序相同:
对动态字体的支持
iOS 上的动态字体功能允许用户设置偏好字体大小 – 大字体便于查看,小字体可容纳更多内容。应用中使用的文本大小应与此系统设置相关。
Compose Multiplatform 现在支持此功能。缩放文本时使用的增量与原生应用程序中使用的增量相同,因此行为将相同。
以如下可组合项为例:
@Composable
fun DynamicType() {
Text("This is some sample text", fontSize = 30.sp)
}
首选阅读大小设为最小时的显示画面:
这是首选阅读大小为最大时的结果:
对高刷新率显示屏的支持
在之前的版本中,最大帧率为 60 FPS。这可能导致 UI 在 120Hz 屏幕的设备上缓慢且滞后。从这个版本开始,支持的帧率最高为 120 FPS。
简化了资源管理
从 1.5.0 开始,iOS 源集的资源文件夹中的任何资源都会默认复制到应用程序捆绑包中。例如,如果将图像文件放入 src/commonMain/resources/
,它将被复制到捆绑包中并可从代码使用。
使用 CocoaPods 时,不再需要在 Gradle 构建文件中配置此行为。您也不需要重新调用 podInstall 来确保资源在修改后被复制。
从这个版本开始,如果您试图在构建脚本中显式配置行为(如下所示),您将收到错误:
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 规则:
-
将 UI 的内容设置为应用可组合项。
-
通过
onNodeWithTag
查找文本字段和按钮。 -
在文本字段中重复输入示例值,然后点击按钮。
-
通过
onAllNodesWithTag
查找生成的所有文本节点。 -
断言当前已创建的文本节点数,并获取最后一个。
-
断言最后一次尝试包含预期消息。
增强了 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
,内容如下:
-
JFrame 包含带有垂直分隔线的
JSplitPane
。 -
拆分窗格的左侧是青色的标准
JPanel
。 -
右侧是
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 构建 iOS 和 Android 应用
https://www.youtube.com/watch?v=5_W5YKPShZ4
本博文英文原作者:
Kotlin 技术布道师
Garth Gilmour
这就是 Kotlin 编程语言
简洁、跨平台、且有趣!
本文分享自微信公众号 - JetBrains(JetBrainsChina)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
男子受 AI 女友怂恿刺杀英国女王,被判入狱九年
2021 年圣诞节当天,一名 21 岁的男子 Jaswant Singh Chail 因持弩闯入温莎城堡,意图刺杀伊丽莎白女王二世而被捕。近日,英国法庭正式宣布以叛国罪判处Chail 九年监禁,这也是自 1981 年以来英国第一个被判叛国罪的人。 Chail将先被关押在一家精神病医院,在接受了所需的治疗后再转入监狱关押。 Chail 刺杀英国女王是为了报复1919 年贾利安瓦拉巴格大屠杀。当时英国军队向和平抗议《罗拉特法案》的人群开火,造成多达 1500 多名抗议者被杀害。Chail表示,他的行为是“为了那些因种族而被杀害、羞辱和歧视的人”。《罗拉特法案》是一项由英国殖民当局于 1919 年颁行的,镇压印度民族解放运动的法令。 根据法庭上透露的信息,Chail 刺杀英国女王与受到了人工智能聊天机器人的鼓励有关,《星球大战》中的故事情节也给了他很大的启发。Chail 痴迷于奇幻电影系列中的科幻角色及其在塑造世界中的作用,自称为“Sith Lord”,想要摧毁旧帝国并建立新帝国。 调查人员发现,几乎在 2021 年 12 月 8 日到 22 日的每晚,Chail 都在与初创公司 Repli...
- 下一篇
Python Web 框架三巨头:Flask、Django 和 FastAPI
JetBrains 公布 2022 Python 开发者调查结果。 完整报告地址:https://lp.jetbrains.com/zh-cn/python-developers-survey-2022/ 这是由 Python 软件基金会 (PSF) 和 JetBrains 共同开展的第六次官方年度 Python 开发者调查,回复于 2022 年 10 月至 12 月收集,来自近 200 个国家和地区的超过 23,000 名 Python 开发者和爱好者参与了调查,揭示了该语言及其生态系统的现状。 下面介绍部分值得关注的数据。 Python 3 与 Python 2 调查结果显示,7% 的 Python 开发者仍在使用 Python 2,93% 的开发者使用 Python 3。相比下在 2021 年度的调查中,95% 的开发者使用 Python 3,5% 的开发者使用 Python 2。 Python 2 已经在 2020 年结束了支持。仍然使用 Python 2 的开发者中有 29% 将其用于数据分析,24% 用于计算机图形,23% 用于 DevOps。 对于 Python 3 版本...
相关文章
文章评论
共有0条评论来说两句吧...