乐趣区

关于java:JetBrains-又出了一款新神器一套代码适应多端

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

1、前言

该工具是赫赫有名的 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


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


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

起源 | 程序员编程

退出移动版