qml 背景透明 图片显示正常_基于QML的 客户端软件开发流程

一，背景

Qt Quick 作为Qt公司对移动端的一种尝试，无疑是失败的。生态的缺失，支持的不利，基本上看不到移动端有人用这套东西来开发应用，但是这套技术本身是不错的，快速的开发效率，gpu式的渲染方式，在取代传统QWidget 开发桌面应用方面，还是值得学习的。现结合多年使用经验，解析下Quick开发桌面客户端时，一个基本的开发流程。

二，demo

Quick  目前推荐的方式是界面与逻辑分离，界面采用qml开发，底层逻辑采用c++开发。其实一些简单的界面逻辑也可直接用js写在界面文件中，c++只负责核心的业务逻辑。

我们demo的需求是：

1，登录页面输入用户名和密码，点击登录。

2，校验成功后，跳转到主页，显示一张背景图片。

分析需求，涉及到两个页面，登录页和首页。涉及的底层逻辑是，用户名和密码校验。因此，两个界面使用QML开发，底层逻辑使用C++。

三，具体实现

按照先开发页面再添加逻辑的流程。

1，利用QtCreator 建一个空的Quick项目：

2，添加Login.qml 登陆页 及Home.qml 主页，还有一张背景图片

3，登录页

两个文本输入框，一个登陆按钮，以及一个登陆成功的信号。

页面间切换采用信号传递的方式，也就是说当前页面完成本身的任务后，通过激发信号告知外界。而什么时候激发这个信号，则是涉及到底层的逻辑判断，我们在点击【登陆】时，进行判断，如果符合要求则激发登陆成功信号。

4，主页

一个图片，一个退出按钮，一个退出信号。点击【退出】时，激发退出信号

5，页面跳转

两个页面有了，逻辑判断稍后填充。那么页面如何跳转呢，Quick 有两种方式，一种是通过静态隐藏的方式，就是说两种页面提前全部加载，当捕获到登陆成功信号时，将登陆页隐藏，主页显示，捕获到退出信号时，将主页隐藏，登陆页显示。还有一种是只加载一种页面，根据信号来动态加载。更推荐第二种方式，因为处理起来方便，并且内存占用小。

通过Loader加载器，默认加载登录页，当收到登陆成功信号后，动态加载主页。当收到退出信号后，动态加载登录页。

总结下来，流程就是先单独开发页面，当前页面任务完成后，激发信号。程序收到此信号后，动态加载其他页面。

6，页面效果

7，添加底层逻辑

添加 maincontroller 类，将底层逻辑，添加到这个类中。当前demo 只涉及到用户名及密码的判断。

8，导入QML

将C++类导入到qml中，否则无法识别C++的类，导入按照作用域的分为两种方式。一种是临时的，相当于局部变量，只对当前QML文件可见，一种是永久的，对所有QML文件可见，相当于单列模式。具体使用哪种，按照这个类的作用进行选择，如果此类是所有qml文件都可能使用，那就导入成永久的，否则就使用临时的方式。下面使用的就是永久的方式，所有qml文件可见。

 9，填充逻辑

界面有了，逻辑写完。最后将逻辑填充到界面对应部分。我们在界面处，进行判断。

10，最终效果

四，总结

如需 demo源码，请留言