JetBrains 宣布了一款名为“Jetpack Compose for Web”的新工具,官方介绍称此项目基于 Google 现代 UI 工具包 Jetpack Compose,支持使用 Kotlin 编写响应式 Web UI。
Jetpack Compose 是用于构建原生界面的新款 Android 工具包。它可简化并加快 Android 上的界面开发。使用更少的代码、强大的工具和直观的 Kotlin API,快速让应用生动而精彩。UI 代码和预览如下图所示:
据介绍,Jetpack Compose for Web 可简化并加速 Web 应用的 UI 开发,目标是在 Web、桌面和 Android APP 之间实现 UI 代码共享,一套代码适应多端。目前处于技术预览阶段。
fun greet() = listOf("Hello", "Hallo", "Hola", "Servus").random() renderComposable("greetingContainer") { var greeting by remember { mutableStateOf(greet()) } Button(attrs = { onClick { greeting = greet() } }) { Text(greeting) } } Result: Servus
借助 Compose for Web,开发者通过使用 Kotlin 并应用 Jetpack Compose 的概念和 API 为 Web 构建响应式用户界面,以表达应用程序的状态、行为和逻辑。
可组合的 DOM API
通过 DOM 元素和 HTML 标签表达设计和布局
使用类型安全的 HTML DSL 构建 UI 表示形式
通过使用类型安全的 CSS DSL 创建样式表来完全控制应用程序的外观
通过 DOM 子树与其他 JavaScript 库集成
fun main() { renderComposable("root") { var platform by remember { mutableStateOf("a platform") } P { Text("Welcome to Compose for $platform! ") Button(attrs = { onClick { platform = "Web" } }) { Text("...for what?") } } A("https://www.jetbrains.com/lp/compose-web") { Text("Learn more!") } } }
具有 Web 支持的多平台小部件
通过利用 Kotlin 的 Expect-actual 机制来提供特定于平台的实现,从而使用和构建可在 Android、桌面和 Web 上运行的 Compose 小部件
处于实验性阶段的一组布局原语 (layout primitives) 和API,这些原语和 API 与 Compose for Desktop/Android 的功能相似
使用 Composable DOM 编写简单的计数器
fun main() { val count = mutableStateOf(0) renderComposable(rootElementId = "root") { Button(attrs = { onClick { count.value = count.value - 1 } }) { Text("-") } Span(style = { padding(15.px) }) { /* we use inline style here */ Text("${count.value}") } Button(attrs = { onClick { count.value = count.value + 1 } }) { Text("+") } } }
声明和使用样式表
object MyStyleSheet : StyleSheet() { val container by style { /* define a class `container` */ border(1.px, LineStyle.Solid, Color.RGB(255, 0, 0)) } }@Composablefun MyComponent() { Div(attrs = { classes(MyStyleSheet.container) /* use `container` class */ }) { Text("Hello world!") } }fun main() { renderComposable(rootElementId = "root") { Style(MyStyleSheet) /* mount the stylesheet */ MyComponent() } }
声明和使用 CSS 变量
object MyVariables : CSSVariables { val contentBackgroundColor by variable<Color>() /* declare a variable */}object MyStyleSheet: StyleSheet() { val container by style { MyVariables.contentBackgroundColor(Color("blue")) /* set its value */ } val content by style { backgroundColor(MyVariables.contentBackgroundColor.value()) /* use it */ } }@Composablefun MyComponent() { Div(attrs = { classes(MyStyleSheet.container) }) { Span(attrs = { classes(MyStyleSheet.content) }) { Text("Hello world!") } } }
下面提供了一些示例应用程序,分别使用 DOM 和 Widget API 进行了演示。
Jetpack Compose for Web 的登录页面本身就是一个 Compose 项目,使用 DOM API 和 CSS DSL 定义其内容、结构和布局,点此查看源码
Falling Balls 游戏通过重用 Compose for Desktop Demo 的实现来演示多平台小部件,点此查看源码
JetBrains 发布的 Jetpack Compose for Desktop 是基于 Google 用于 Android UI 开发的 Jetpack Compose 工具包
be66d9e8 Update the `web-landing` example with a link to `Compose ...
Oleksandr Karpovich 2021-05-04 17:43
c1aa3a33 gradle-plugins/compose: Don't eagerly evaluate web platform
Harsh Shandilya 2021-05-04 18:42
8658e381 Change IDE plugin name
Alexey Tsvetkov 2021-05-04 11:54
master 分支: 2021-05-04
本站新闻禁止未经授权转载,违者依法追究相关法律责任。授权请联系:oscbianji#oschina.cn
本文标题:JetBrains 宣布 Jetpack Compose for Web,使用 Kotlin 开发适配多端的 Web UI
本文地址:https://www.oschina.net/news/140523/jetbrains-jetpack-compose-for-web
联系人:孙先生
手机:15938761271
电话:15938761271
邮箱:320095019@qq.com
地址: 河南省郑州市高新区枫扬街