IDEA 又出新神器,一套代码适应多端!
点击上方“芋道源码”,选择“设为星标”
管她前浪,还是后浪?
能浪的浪,才是好浪!
每天 10:33 更新文章,每天掉亿点点头发...
源码精品专栏
原创 | Java 2021 超神之路,很肝~
中文详细注释的开源项目
RPC 框架 Dubbo 源码解析
网络应用框架 Netty 源码解析
消息中间件 RocketMQ 源码解析
数据库中间件 Sharding-JDBC 和 MyCAT 源码解析
作业调度中间件 Elastic-Job 源码解析
分布式事务中间件 TCC-Transaction 源码解析
Eureka 和 Hystrix 源码解析
Java 并发源码
来源:程序员编程
1、前言
2、使用 Compose for Web 构建用户界面
3、示例代码
看到一款基于多端的 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
基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 用户小程序,支持 RBAC 动态权限、多租户、数据权限、工作流、三方登录、支付、短信、商城等功能。
项目地址:https://github.com/YunaiV/ruoyi-vue-pro
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 的功能相似
基于微服务的思想,构建在 B2C 电商场景下的项目实战。核心技术栈,是 Spring Boot + Dubbo 。未来,会重构成 Spring Cloud Alibaba 。
项目地址:https://github.com/YunaiV/onemall
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!")}}
}
欢迎加入我的知识星球,一起探讨架构,交流源码。加入方式,长按下方二维码噢:
已在知识星球更新源码解析如下:
最近更新《芋道 SpringBoot 2.X 入门》系列,已经 101 余篇,覆盖了 MyBatis、Redis、MongoDB、ES、分库分表、读写分离、SpringMVC、Webflux、权限、WebSocket、Dubbo、RabbitMQ、RocketMQ、Kafka、性能测试等等内容。
提供近 3W 行代码的 SpringBoot 示例,以及超 4W 行代码的电商微服务项目。
获取方式:点“在看”,关注公众号并回复 666 领取,更多内容陆续奉上。
文章有帮助的话,在看,转发吧。
谢谢支持哟 (*^__^*)
IDEA 又出新神器,一套代码适应多端!相关推荐
- JetBrains打造的开发神器,一套代码适应多端!
欢迎关注方志朋的博客,回复"666"获面试宝典 来源:程序员编程 最近正在考虑开发一款APP,今天就看到一款基于多端的 UI 调试工具,一套代码适应多端,真的是太棒了,下面分享给大 ...
- JetBrains 又出了一款新神器,一套代码适应多端!
上一篇:滴滴程序员被亲戚鄙视:年薪八十万不如二本教书的-- 看到一款基于多端的 UI 调试工具,一套代码适应多端,真的是太棒了,下面分享给大家. 前言 该工具是大名鼎鼎的 JetBrains 公司新推 ...
- uni app 调用网络打印机_一套代码,七端运行-uni-app
为什么要使用uni-app uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 同时在别的方面它也有很大优 ...
- 学会这个大屏神器,低代码开发高端可视化大屏不在话下
文末有福利,你不会失望的 随着企业数字化建设的迅速发展,各行各业都开始注重数据的价值,数据分析和可视化展现的需求日益增长.对于管理层来说,可视化大屏尤其受欢迎和重视. 一方面大屏项目能够全面展示业务数 ...
- 官网,一套代码如何运行多端?
前段时间,做了公司一个项目的官网,就官网布局和效果来说,都是比较简单的,唯一一点不好的就是要兼容到ie8,所以很多css3的属性并不能用,只能老老实实按常规操作来. 为了一套代码可以在pc.移动端.i ...
- vuecli3 实现 移动端和pc端 界面切换(两套代码)
适合场景 多页面多系统应用 所有系统都在同一目录下.配置多入口多出口.每个系统之间可以链接.每个系统内依然采用Vue单页应用开发. 产品需求:一套代码 兼容pc端和移动端 , 移动端和pc端的样式布局 ...
- 【一套代码小程序NativeWeb阶段总结篇】可以这样阅读Vue源码
前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...
- 一套代码小程序WebNative运行的探索03——处理模板及属性
接上文: 一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/ ...
- 多重影分身:一套代码如何生成多个小程序?
前言 影分身术,看过火影的都知道,一个本体,多个分身. 大家肯定要问了,那小程序开发跟影分身术也能扯上关系?没错,那自然就是:一套代码,多个小程序啦. 各位先别翻白眼,且听我细细说来. 如今小程序发展 ...
最新文章
- 速卖通关键词挖掘工具_网站优化必备的关键词挖掘工具
- php中0与NULL,False,“0”,\0的区别
- Swift 新特性 - 访问控制(Access Control)
- 审计系统---堡垒机python下ssh的使用
- Android之最简单的遍历某个目录下的所有文件(递归)
- long类型20位示例_Java Long类reverseBytes()方法与示例
- javascript基础(json数据操作)
- Unity DOTween插件和iTween插件使用(笔记)
- 商家可以通过刷脸支付与顾客建立粘性效应
- pandas——解决excel科学计数法问题
- mysql的填充因子_数据库的索引和填充因子fillfactor
- 推荐几个前端 模板 框架,收藏
- 经典简单的猜数字小游戏
- 基于百度AI实现的语音识别搜索文件
- Python爬虫入门实战2:获取CSDN个人博客文章基础信息
- 【English】十大词性之感叹词(感叹句)
- 同一个html自动跳转分页,PageMenu分页控制器(基础篇)-相同分页页面的实现
- 近视手术?一个医学的阴谋?
- Excel打开csv文件时中文内容显示为乱码或问号的解决办法
- UltraEdit软件列模式的一些使用技巧
热门文章
- 二进制八进制相互转换
- 搭建人工智能云服务器,搭建人工智能云连接,实现手机APP远程控制
- 飞机机翼机身对接结构数值计算分析(ANSYS)
- 最适合微商的直播平台——微信直播
- kafka sql入门
- 美团大规模微服务通信框架及治理体系OCTO核心组件开源
- python未读邮件_请问如何用python将某个邮箱未读邮件全部转发到另一个邮箱?
- 【Get深一度】dB、dBm、dBW和W换分别代表的含义及换算关系
- 【软件测试的计划和策略】
- 疯狂android讲义第4版光盘_卧槽!当当网又又又可以 4 折买书了!!跟我一起薅羊毛了!...