JetBrains 又出了一款新神器,一套代码适应多端!

字节逸梦
• 阅读 843

看到一款基于多端的 UI 调试工具,一套代码适应多端,真的是太棒了,下面分享给大家。

1、前言

该工具是大名鼎鼎的 JetBrains 公司新推出的,名曰:“Jetpack Compose for Web”,官方介绍称此项目基于 Google 现代 UI 工具包 Jetpack Compose,支持使用 Kotlin 编写响应式 Web UI。

Jetpack Compose 是用于构建原生界面的新款 Android 工具包。它可简化并加快 Android 上的界面开发。使用更少的代码、强大的工具和直观的 Kotlin API,快速让应用生动而精彩。

UI 代码和预览如下图所示:
JetBrains 又出了一款新神器,一套代码适应多端!
据介绍,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
JetBrains 又出了一款新神器,一套代码适应多端!
2、使用 Compose for Web 构建用户界面

借助 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!")
          }
      }
    }

    JetBrains 又出了一款新神器,一套代码适应多端!
    具有 Web 支持的多平台小部件

  • 通过利用 Kotlin 的 Expect-actual 机制来提供特定于平台的实现,从而使用和构建可在 Android、桌面和 Web 上运行的 Compose 小部件
  • 处于实验性阶段的一组布局原语 (layout primitives) 和API,这些原语和 API 与 Compose for Desktop/Android 的功能相似

3、示例代码

使用 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))
    }
}

@Composable
fun 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 */
    }
}

@Composable
fun MyComponent() {
    Div(attrs = {
        classes(MyStyleSheet.container)
    }) {
        Span(attrs = {
            classes(MyStyleSheet.content)
        }) {
            Text("Hello world!")
        }
    }
}

来源 | 程序员编程

点赞
收藏
评论区
推荐文章
雷厉风行 雷厉风行
2年前
macOS稳定连接数据库,DataGrip 2023 for Mac 让你放心使用!
DataGrip2023Mac是一款由JetBrains公司推出的面向数据库开发的一体化工具,它能够支持多种数据库平台,包括MySQL,PostgreSQL,Oracle等。与其他数据库工具不同,DataGrip的最大特点是带有智能化的代码编辑器、重构工具
陆石六 陆石六
2年前
downie 4怎么下载
PyCharmPro是由JetBrains公司推出的一款针对Python开发的跨平台集成开发环境(IDE)。它为Python开发者提供了一整套强大的工具来编写、测试和调试Python代码,从而帮助开发者大幅提高开发效率。
Wesley13 Wesley13
3年前
AT
!(https://oscimg.oschina.net/oscnet/9bcf9c4a197687d0f09aa8b0d010e9470c7.jpg)ATUI是一款基于Vue2.x的前端UI组件库,主要用于快速开发PC网站产品。没错,这是又一款基于Vue的前端UI组件库,又双叒叕款UI库~又双叒叕款轮子
Stella981 Stella981
3年前
Flutter 1.0 正式版: Google 的便携 UI 工具包
Flutter1.0正式版:Google的便携UI工具包文/TimSneath,GoogleDart&Flutter产品组产品经理Flutter是Google打造的UI工具包,通过一套代码同时在iOS和Android上构建媲美原生体验的精美应用!如今,移动开发者们在同时兼容iOS和Android
铁扇公主 铁扇公主
1年前
WebStorm最新中文介绍+完整安装教程 v2023.2.3
WebStorm是一款由JetBrains开发的基于JavaScript的开发工具软件,被广大中国JS开发者誉为“Web前端开发神器”、“强大的HTML5编辑器”和“智能的JavaScriptIDE”等。WebStorm具有的功能包括:智能的代码补全、代码
字节逸梦
字节逸梦
Lv1
渐老念乡国,先归独羡君。
文章
4
粉丝
0
获赞
0