• 2735阅读
  • 14回复

Qt示例移植到Web的在线体验 [复制链接]

上一主题 下一主题
离线samhuilong
 

图酷模式  只看楼主 倒序阅读 楼主  发表于: 2021-02-18
链接地址:http://lan.iadiae.com:8866/ibestore2/uicoder/coder/main.html
增加了20多个example,其中绝大部分示例参考自Qt官方,用typescript仿写了下,效果很棒。
这些示例本来去年元旦期间就写好了,本来计划去年年底前写更多的示例,但是由于其他项目,这个任务搁置了。
年后才有空把这些示例集成到在线Coder这个应用里面去,让大家可以在线体验这些example。

1Animated Tiles

2Wood Styles

3Clocks

4Cork Board

5Blur Picker




4条评分好评度+1贡献值+1金钱+10威望+1
20091001753 好评度 +1 - 2021-02-21
20091001753 贡献值 +1 - 2021-02-21
20091001753 威望 +1 - 2021-02-21
20091001753 金钱 +10 - 2021-02-21
离线zqxwce007

只看该作者 1楼 发表于: 2021-02-19
请问利用什么技术实现的呀
离线samhuilong

只看该作者 2楼 发表于: 2021-02-19
回 zqxwce007 的帖子
zqxwce007:[表情] [表情] [表情] 请问利用什么技术实现的呀 (2021-02-19 08:20) 

基于typescript仿Qt风格写的一套前端框架
离线liulin188

只看该作者 3楼 发表于: 2021-02-19
    
https://wiki.qt.io/Qt_5.12_Release
https://wiki.qt.io/New_Features_in_Qt_5.12
https://wiki.qt.io/Qt_5.12.0_Known_Issues
https://www.qt.io/blog/qt-5.13.2-released
https://www.qt.io/blog/qt-creator-4.10.2-released
https://wiki.qt.io/Qt_5.12_Tools_and_Versions
离线shawking

只看该作者 4楼 发表于: 2021-02-19
是不是所有的Qml应用都能移植到这个前端框架下使用?
离线samhuilong

只看该作者 5楼 发表于: 2021-02-19
回 shawking 的帖子
shawking:是不是所有的Qml应用都能移植到这个前端框架下使用? (2021-02-19 15:54)

应该没啥问题。qml的那套写UI的方式就是参考Web的。
不过我走的都是QWidget那套路线,所以需要把qml工程翻译成QWidget那套范式。
因为在开发复杂的工业级项目的时候,需要平衡UI的抽象度和复杂度可控性和可扩展性之间的关系,综合对比qml和QWidget,QWidget那套范式更能胜任复杂工业级项目的开发。

离线samhuilong

只看该作者 6楼 发表于: 2021-02-19
回 shawking 的帖子
shawking:是不是所有的Qml应用都能移植到这个前端框架下使用? (2021-02-19 15:54)

比如图中第三个示例Clocks
你可以对比typescript代码和Qt官方Clocks的qml源代码,你会发现其实关键的代码都是一样的,主要就是构建UI的范式不同
这个示例关键点就是计算各个区域时间
1 typescript代码

2 qml的js代码


UI部分,比如时针的qml代码如下图

我把他改成widget的形式,然后其他的参数拷贝下用css配置下就行

离线lzh280

只看该作者 7楼 发表于: 2021-02-19
    
离线uidab

只看该作者 8楼 发表于: 2021-02-19
回 samhuilong 的帖子
samhuilong:比如图中第三个示例Clocks
你可以对比typescript代码和Qt官方Clocks的qml源代码,你会发现其实关键的代码都是一样的,主要就是构建UI的范式不同
这个示例关键点就是计算各个区域时间
1 typescript代码
....... (2021-02-19 16:24) 

这种对比很有意义!!!!
有时候为了工作直接获得答案,而我却失去了思考的乐趣!


飘啊飘,何时能安居!
离线shawking

只看该作者 9楼 发表于: 2021-02-20
这么说,那Qt自带的所有Widget例子也都能移植到这个前端框架下了?
离线samhuilong

只看该作者 10楼 发表于: 2021-02-20
回 shawking 的帖子
shawking:这么说,那Qt自带的所有Widget例子也都能移植到这个前端框架下了? (2021-02-20 13:38)

我不敢说“所有”,但基本应该没啥问题。
目前的示例还是太少,我后面会把这些示例丰富起来,以及加上3D渲染模块
离线liudianwu

只看该作者 11楼 发表于: 2021-02-20
龙龙还是一如既往的牛逼
欢迎关注微信公众号:Qt实战 (各种开源作品、经验整理、项目实战技巧,专注Qt/C++软件开发,视频监控、物联网、工业控制、嵌入式软件、国产化系统应用软件开发)QQ:517216493  WX:feiyangqingyun  QQ群:751439350
离线samhuilong

只看该作者 12楼 发表于: 2021-02-20
回 liudianwu 的帖子
liudianwu:龙龙还是一如既往的牛逼 (2021-02-20 19:47)

我们一直都是跟在刘大师后面学习的
离线shawking

只看该作者 13楼 发表于: 2021-02-22
这套前端ts框架,还得有后端支持才能使用吧?
离线samhuilong

只看该作者 14楼 发表于: 2021-02-22
回 shawking 的帖子
shawking:这套前端ts框架,还得有后端支持才能使用吧? (2021-02-22 09:36)

基于前端框架写代码, 然后编译工程,启动一个http-server就行了。
要做单机应用也可以,本地启动一个服务就行了。
快速回复
限100 字节
 
上一个 下一个