JetBrains 又出了一款新神器，一套代碼適應多端！
往期熱門文章：
1、來吧，教你如何減少Bug！ 2、卷不動了？300 秒快速了解 Java 9 - 16 新特性，助你脫離內卷 3、Java必會的工具庫，讓你的代碼量減少90% 4、Java 程序員常犯的 10 個 SQL 錯誤！ 5、摸魚王！ 來源 | https://mp.weixin.qq.com/s/8iabDTcw99kEa4i52w-XCQ
看到一款基于多端的 UI 調試工具，一套代碼適應多端，真的是太棒了，下面分享給大家。
1
該工具是大名鼎鼎的 JetBrains 公司新推出的，名曰：“Jetpack Compose for Web”，官方介紹稱此項目基于 Google 現(xiàn)代 UI 工具包 Jetpack Compose，支持使用 Kotlin 編寫響應式 Web UI。
Jetpack Compose 是用于構建原生界面的新款 Android 工具包。它可簡化并加快 Android 上的界面開發(fā)。使用更少的代碼、強大的工具和直觀的 Kotlin API，快速讓應用生動而精彩。
UI 代碼和預覽如下圖所示：
據介紹，Jetpack Compose for Web 可簡化并加速 Web 應用的 UI 開發(fā)，目標是在 Web、桌面和 Android APP 之間實現(xiàn) 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，開發(fā)者通過使用 Kotlin 并應用 Jetpack Compose 的概念和 API 為 Web 構建響應式用戶界面，以表達應用程序的狀態(tài)、行為和邏輯。
可組合的 DOM API
通過 DOM 元素和 HTML 標簽表達設計和布局
使用類型安全的 HTML DSL 構建 UI 表示形式
通過使用類型安全的 CSS DSL 創(chuàng)建樣式表來完全控制應用程序的外觀
通過 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 機制來提供特定于平臺的實現(xiàn)，從而使用和構建可在 Android、桌面和 Web 上運行的 Compose 小部件
處于實驗性階段的一組布局原語 (layout primitives) 和API，這些原語和 API 與 Compose for Desktop/Android 的功能相似
3
使用 Composable DOM 編寫簡單的計數(shù)器
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!")
}
}
}
往期熱門文章：
1、《歷史文章分類導讀列表！精選優(yōu)秀博文都在這里了！》
2、Java必會的工具庫，讓你的代碼量減少90% 3、騰訊最大股東收購了 Stack Overflow，以后“抄代碼”都要付費了么？ 4、靈隱寺招聘：沒有KPI，佛系上班…… 5、如何優(yōu)雅處理重復請求/并發(fā)請求？ 6、不用到2038年，MySQL的TIMESTAMP就能把我們系統(tǒng)搞崩！ 7、翻車！在項目中用了Arrays.asList、ArrayList的subList，被公開批評 8、想接私活時薪再翻一倍，建議根據這幾個開源的Spring Boot項目改改~ 9、細數(shù)ThreadLocal三大坑，內存泄露僅是小兒科 10、Redis與MySQL雙寫一致性如何保證？