·看到一款基於多端的 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!")
}
}
}