查看原文
其他

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

点击关注👉 民工哥技术之路 2021-12-16

点击下方公众号「关注」和「星标」

回复“1024”获取独家整理的学习资料!

最近正在考虑开发一款APP,今天就看到一款基于多端的 UI 调试工具,一套代码适应多端,真的是太棒了,下面分享给大家。

前言

该工具是大名鼎鼎的 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 构建用户界面

借助 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(25500))
    }
}

@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!")
        }
    }
}
来源 | 程序员编程

最近也收集整理了一波技术资源:覆盖了Java核心技术、Java高阶开发分布式、java互联网架构师(netty、mina、nio)、SSM、微服务、Spring Cloud 、Spring全家桶、架构师修练9个阶段、go 入门、git工具的使用等等。获取方式:点在看 ,关注本公众号后台回复 Java开发技术资源

推荐阅读 点击标题可跳转
干掉 Swagger (丝袜哥),试试这个新工具!
再见!Eclipse
程序员缺乏经验的 7 种表现!
北京最最最牛逼的 IT 公司全在这了!
分布式事务的 6 种解决方案,写得非常好!
几款超牛逼的 SSH 客户端工具!好用到爆
号称下一代监控系统!来看看它有多牛逼
觉得文章不错,请大家随手点在看、转发支持!
: . Video Mini Program Like ,轻点两下取消赞 Wow ,轻点两下取消在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存