现在计算机专业的大学生,经常要打各种软件设计比赛或者实验,而凡是参与比赛就会要求写个图形界面。但是,怎么写一个图形界面,在学校的课上基本不会讲!因此,我在这里列出几个好用的图形界面方案,推荐给和我一样的在校大学生。
先声明两句,本文主要还是针对没有时间去系统地学习图形界面编程,但经常要做图形界面编程的同学,所以会尽可能地推荐能快速上手、做出精美界面的方案,故而优先考虑实用性和美观性而不是性能。其次,理论上无论是哪种图形界面方案都能够做出美观性和现代感很强的界面,但是做出同样的好看的界面需要的编码时间却不同,所以虽然我会对每种方案都评出“界面美观”的分数,但这只是说在相同的学习和编码时间的情况下、能达到的界面美观性,所以千万不能有“XXX框架写不出好看的界面”这种观点!
那么,话不多说,开始——
1.Qt
Qt是使用C++编程的经典的图形界面方案,Qt写出的应用可以跨Windows,Linux和macOS三个平台(据说还可在Android和iOS上跑,但基本上没人用过)。
Qt对新手很友好,基本上只要学过C++就能对着教程和视频动手写界面。Qt有独特的信号与槽机制,用起来非常爽。Qt可以借助Qt Creater用拖拽的方式写出一个UI,很适合不习惯写布局代码的小白。
Qt的下载也比较简单,基本上可以找官方的下载方式,大概花一两个小时的时间就能配置完。Qt的代码是非常面向对象的,很适合初学面向对象且对面向对象原理既懵懂又憧憬的同学。Qt的性能也是目前跨端GUI方案中最好的,如果你要设计嵌入式应用,那么Qt或PyQt几乎是必选。
Qt的致命缺点是初学者很难立即写出比较好看的界面,如果想要在Qt中写出精美的界面,请一定要学习Qt里的qss、QPainter和QML。
界面美观:★★
学习资源:★★★★★
编码效率:★★★
上手难度:较低
推荐理由:适合会C++初学者,能够快速写出一个能看的图形界面,性能优秀,适合PC端和嵌入式应用。不适合对界面美观要求高的应用、或者单纯不喜欢使用C++的同学。
展示一个我用Qt写的画图软件:
2.PyQt
PyQt就是Qt的Python版本,是使用Python写的界面。与Qt相比,PyQt使用Python语法,更简单易学,而且PyQt和Qt的接口几乎一样,所以已经会Qt的同学可以立即学会PyQt。
PyQt的优点是下载很方便,只需要pip install PyQt5。如果你不会Qt,也可以直接学习PyQt,网上关于PyQt的学习资源也很多。PyQt的写法也和Qt完全一致,区别只是编程语言而已。
当然,PyQt也有Qt的缺点,如果要做出精致到堪称华丽的界面的话,那还是需要花一番功夫的。
界面美观:★★
学习资源:★★★★★
编码效率:★★★★
上手难度:低
推荐理由:适合会写Python的同学或者需要用到Python中一些库的应用。性能也很优秀,适合PC端和嵌入式。Python语言制作图形界面的必选框架。不适合对界面美观要求高的应用。
展示我用PyQt写的答题软件(为了达到这样的效果我几乎花了一个星期在界面编程上...):
3.JavaFX
JavaFX是Java语言编写桌面图形界面的首选框架,适用于桌面端程序。Qt有的功能基本上JavaFX都有,包括对新手很友好的拖拽生成UI(需要下载SceneBuilder)。
JavaFX本身不需要下载,只需用Maven或Gradle引入依赖就行。JavaFX对样式表的支持比Qt更好,所以一些简单的风格化在JavaFX中会更容易做到。JavaFX网上的资料也比较多,可以找到成体系的教程和视频。JavaFX严格遵循MVC,在面向对象上比Qt要更加刻板。
受益于Java的库生态,你可以轻松地在maven.org上找到很多JavaFX的美化库并且加入你项目的依赖,这里推荐一个JMetro。
但是,JavaFX有致命缺点,那就是没有像Qt一样提供信号与槽机制。这一点在后期非常劝退,经常要保存父窗口的数据和传入回调函数。这也使得JavaFX的编码体验可能不如Qt。以及使用JavaFX很早就会遇到多线程问题,一个runLater就要捣鼓好久。
界面美观:★★★
学习资源:★★★★
编码效率:★★★
上手难度:中
推荐理由:适合不得不使用Java编写图形界面的情况,也适合只会用Java的同学。JavaFX在界面美化方面做得稍微比Qt要好。但是没有信号与槽确实使得编码难度变大。
展示一下我用JavaFX写的仿微信软件(大二学期的课程实践课写的, Mugi聊天室这个名字取自Summer Pockets的角色紬Tsumugi):
4.Vue+Flask
前后端分离的Web应用方案,即一个前端框架+一个后端框架的组合。这里选择了其中比较容易学的Vue+Flask的方案。Vue可以替换成React、Svelte等,甚至VanillaJS。Flask也可以替换成FastAPI,或者Java的SpringBoot。
这套方案只能用于写Web端的程序,也就是在浏览器中打开的网页应用,同时也要求你有一定的Web技术和服务器配置基础,一般建议两人以上合作完成。使用的语言是JavaScript(包括HTML与CSS)和Python。
受益于Vue简单的语法和JS生态,你可以很轻松地用Vue写出精致好看的界面,更有ElementUI和vuetify等优秀的组件库可供使用。Flask优雅的接口配合Python中丰富的库,简直抹去了后端的一切细枝末节。很多云服务厂商也会提供可以直接使用的Flask工具包(如宝塔界面就有提供开箱即用的Python环境),非常便利。
如果要学习Vue和Flask,我的建议都是直接去学习它们的官方文档,两个的官方文档都是非常适合初学者逐渐过渡学习的。参考:简介 | Vue.js 欢迎来到 Flask 的世界 — Flask中文文档(2.1.x)
界面美观:★★★★★
学习资源:★★★★★
编码效率:★★★★ (如果使用TypeScript的话就再加一颗星)
上手难度:中
推荐理由:Web端应用的首选,很容易做出精美的界面,以及可以考虑许多与之类似的方案。缺点是只能做在浏览器中运行的Web应用,对PC端和手机端不友好。
展示一个我用Vue做的登录界面:
5.Electron / Tauri
一般来说像Vue这种前端框架只能写Web应用,但是Electron.js却可以让它能够写桌面应用程序,如同你的PC上的一个软件一样。
这套方案的特点就是用前端框架写桌面应用,写出来的软件可以在PC上打开和运行,可在Windows、MacOS和Linux上运行。Electron.js学习难度也不大,基本的概念可以通过官网教程或视频理解。需要你掌握至少一个前端框架(如Vue),以及Node.js。
Electron.js的缺点是打包出来的包体积很大,一个exe的大小可能就是100M起步,这是因为Electron.js本身封装了一个Chrome浏览器,而且占用内存也很大。Tauri则解决了这个问题,Tauri是一个类似Electron.js的框架,也是用前端生态写桌面软件。Tauri打包出来的软件体积要小得多,可以做到几Mb的大小。但是Tauri的后台是用Rust编写的(而不是Electron.js中的Node.js),高性能的同时也需要你学习Rust这门语言。
界面美观:★★★★★
学习资源:★★★★
编码效率:★★★★
上手难度:Electron:中;Tauri:较高
推荐理由:前端程序员的福音,用前端生态写桌面软件!其中Electron打包体积大,Tauri需要学习Rust,各有优劣。相对来说Electron的生态要好于Tauri。
展示一个我用Tauri试水做的程序,可以看到这个程序是运行在PC上的:
6.uniapp+uniCloud
uniapp是一套基于Vue的全平台界面方案,也就是说uniapp可以用来写运行在Web端、手机端和小程序端(如微信小程序)的软件。只要会写Vue,就可以做出全平台的应用!uniapp还可以使用uView这种UI组件库,总的来说界面美观度还是有保证的。
uniCloud则是和uniapp配套的一套云服务方案,比自己去配置服务器要方便很多,而且还有免费的云服务空间和云储存服务,非常适合应用不大却需要云资源的场景。需要你会Node.js,以及学习与uniCloud相关的接口。当然,你也可以不使用uniCloud,只使用uniapp。
uniapp和uniCloud的官方文档都十分全面,一般建议直接参考官方文档学习。uniapp还提供HBuilderX这个专门的IDE。
缺点是不适合大型的应用,我一般在打比赛时做展示来用,或者用在个人的小项目。如果软件用户人数超过1000人,那么这可能不是一个合适的稳定的方案。
界面美观:★★★★★
学习资源:★★★★
编码效率:★★★★
上手难度:中
推荐理由:一站式的全平台软件方案!基于Vue的语法,可以实现Web、手机端和小程序端的应用。uniCloud对于不会配置服务器的同学非常友好,而且免费的云服务真的很香。缺点是,出于稳定性考虑,一般不用于大的项目。
7.Flutter
我注意到最近也有人使用Flutter做项目去参加比赛的,所以不妨介绍一下Flutter这个框架。
Flutter是一个可以实现Android、iOS、Windows、MacOS、Linux和Web端的全平台跨端框架,主打手机端跨端。Flutter使用的编程语言是Dart,其语法类似Java。
Flutter还是一个比较新的框架,但是它的跨平台特性很适合小团队和打比赛。因为它只需一套代码,就可以在Android和iOS上运行,以及Windows和MacOS。Flutter的生态尚在发展中,还没有成型的组件库,但是它原始的组件就已经能达到比较好的界面美观性。
如果要学习Flutter,我建议一边学Flutter一边学Dart,经常去pub.dev上搜搜,并且最好能够去看Flutter Widget of the Week的视频。由于暂时没有找到好的教程,因此不作特别推荐。Flutter的学习难度相对较大。
Flutter的语法比原生的Android简单,但是不如Swift和Jetpack Compose,其嵌套式的语法也是它的缺点之一。
界面美观:★★★★
学习资源:★★★
编码效率:★★★
上手难度:高
推荐理由:Flutter是真正的全平台跨端方案,无论是手机端还是电脑都能运行。但是学习难度大,目前还没找到比较好的学习资源。