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

╰+哭是因爲堅強的太久メ 2022-10-13 12:41 164阅读 0赞

![c3d02884e68928aeac6a8a52c9970456.png][]

来源 | 程序员编程

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

### 1、前言 ###

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

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

UI 代码和预览如下图所示：

![720708c46ec3544bcfc9c87c8c066405.png][][Java 线程池配置的常见误区][Java]

据介绍，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

![0e82c883687632ad6e6446cd069a5fe5.png][][来活儿了！赶紧检查下代码里有没有脏话...][...]

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

![2763ba41a754034a4aeb100584565045.gif][][抖音服务器带宽有多大，为什么能够供那么多人同时刷？][Link 1]

**具有 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!")
            }
        }
    }

- END -
    
    
    关注公众号回复「进群」即可进入无广告技术交流群。
    同时送上250本电子书+学习视频作为见面 有你想看的精彩 
    
    
    GitHub大佬精选的一大批在线工具，是程序猿就来收藏！
    知乎高赞：拼多多和国家电网，选哪个？
    600 条最强 Linux 命令总结
    字节跳动1/3员工不支持取消大小周，员工：每年少赚10万块
    用 Nginx 禁止国外 IP 访问我的网站..
    抖音服务器带宽有多大，为什么能够供那么多人同时刷？
    从零开始搭建创业公司后台技术栈
    牛逼！JetBrains 又出了一款编程神器！协同编程！
    目前5000+ 人已关注加入我们
                 
    
    点赞和在看就是最大的支持❤️

[c3d02884e68928aeac6a8a52c9970456.png]: /images/20221005/94d78124b27b4978b0fc5f6bcab4a518.png
[720708c46ec3544bcfc9c87c8c066405.png]: /images/20221005/fe94e8a13f004b5f94feb607445e42cd.png
[Java]: http://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ%3D%3D&chksm=9bd3e1ceaca468d803d637b2457eab4ca76fab7a99e22cc9a74f0ab868772247e7f793ce3f86&idx=2&mid=2247535702&scene=21&sn=7a8b908aaf7767084cc53ec948aeeeb5#wechat_redirect
[0e82c883687632ad6e6446cd069a5fe5.png]: /images/20221005/4a12cfa5c7054b01839bf4ca27b2a04d.png
[...]: http://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ%3D%3D&chksm=9bd3e1ceaca468d85ab426d1288e6e78b6601f7176377b62df6f21de02d823ebe2edeeecb72d&idx=1&mid=2247535702&scene=21&sn=6a1a996633787a10062323e4fca282a7#wechat_redirect
[2763ba41a754034a4aeb100584565045.gif]: /images/20221005/79454649a1d94b0c891307b9b0d8d171.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ%3D%3D&chksm=9bd3e1ceaca468d8067b647e1439400550bf6e798895a03ec473cdce90a92e6f45a8fc5969a5&idx=3&mid=2247535702&scene=21&sn=a7335f4345c89477439b7f0a5c87551f#wechat_redirect