JetBrains 又出了一款新神器，一套代碼適應(yīng)多端！
1、Windows 11 全網(wǎng)曝光，果然一股子蘋果味... 2、小團(tuán)隊(duì)真的適合引入Spring Cloud微服務(wù)嗎？ 3、卷不動(dòng)了？300 秒快速了解 Java 9 - 16 新特性，助你脫離內(nèi)卷 4、Java 程序員常犯的 10 個(gè) SQL 錯(cuò)誤！ 5、SpringBoot+webSocket實(shí)現(xiàn)掃碼登錄功能
看到一款基于多端的 UI 調(diào)試工具，一套代碼適應(yīng)多端，真的是太棒了，下面分享給大家。
1
該工具是大名鼎鼎的 JetBrains 公司新推出的，名曰：“Jetpack Compose for Web”，官方介紹稱此項(xiàng)目基于 Google 現(xiàn)代 UI 工具包 Jetpack Compose，支持使用 Kotlin 編寫響應(yīng)式 Web UI。
Jetpack Compose 是用于構(gòu)建原生界面的新款 Android 工具包。它可簡(jiǎn)化并加快 Android 上的界面開發(fā)。使用更少的代碼、強(qiáng)大的工具和直觀的 Kotlin API，快速讓應(yīng)用生動(dòng)而精彩。
UI 代碼和預(yù)覽如下圖所示：
據(jù)介紹，Jetpack Compose for Web 可簡(jiǎn)化并加速 Web 應(yīng)用的 UI 開發(fā)，目標(biāo)是在 Web、桌面和 Android APP 之間實(shí)現(xiàn) UI 代碼共享，一套代碼適應(yīng)多端。目前處于技術(shù)預(yù)覽階段。
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 并應(yīng)用 Jetpack Compose 的概念和 API 為 Web 構(gòu)建響應(yīng)式用戶界面，以表達(dá)應(yīng)用程序的狀態(tài)、行為和邏輯。
可組合的 DOM API
通過 DOM 元素和 HTML 標(biāo)簽表達(dá)設(shè)計(jì)和布局
使用類型安全的 HTML DSL 構(gòu)建 UI 表示形式
通過使用類型安全的 CSS DSL 創(chuàng)建樣式表來(lái)完全控制應(yīng)用程序的外觀
通過 DOM 子樹與其他 JavaScript 庫(kù)集成
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 支持的多平臺(tái)小部件
通過利用 Kotlin 的 Expect-actual 機(jī)制來(lái)提供特定于平臺(tái)的實(shí)現(xiàn)，從而使用和構(gòu)建可在 Android、桌面和 Web 上運(yùn)行的 Compose 小部件
處于實(shí)驗(yàn)性階段的一組布局原語(yǔ) (layout primitives) 和API，這些原語(yǔ)和 API 與 Compose for Desktop/Android 的功能相似
3
使用 Composable DOM 編寫簡(jiǎn)單的計(jì)數(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!")
}
}
}—————END—————
最近熱文閱讀：
1、Windows 11 全網(wǎng)曝光，果然一股子蘋果味... 2、小團(tuán)隊(duì)真的適合引入Spring Cloud微服務(wù)嗎？ 3、卷不動(dòng)了？300 秒快速了解 Java 9 - 16 新特性，助你脫離內(nèi)卷 4、Java 程序員常犯的 10 個(gè) SQL 錯(cuò)誤！ 5、SpringBoot+webSocket實(shí)現(xiàn)掃碼登錄功能 6、短 URL 服務(wù)的設(shè)計(jì)以及實(shí)現(xiàn) 7、為什么阿里巴巴禁止使用存儲(chǔ)過程？ 8、面試官：說一下JDK/Dubbo/Spring 三種 SPI 機(jī)制，誰(shuí)更好？ 9、在外包干了三年，我廢了..… 不吹不黑！ 10、還在寫大量 if 來(lái)判斷？試試用一個(gè)規(guī)則執(zhí)行器來(lái)替代它 關(guān)注公眾號(hào)，你想要的Java都在這里