QT-QML制作登录界面

115849

Qt Meta Language 或者说Qt Modeling Language(QML)  是Qt用来设计用户界面的js脚本的标记语言。在Qt中的基于QML技术的Qt Quick组件中可以很轻松的设计出适应触屏的界面，而不需要写c++代码。下面我们一起使用QML和Qt Quick 组件设计界面。

1，创建项目。file-new file or project ,选择 application --Qt Quick Application

2,点击Choose按钮，在下一页中填写名字，然后next.选择最新版本，next,然后finish.

3,创建后，会看到产生了main.qml文件。选中这个文件，然后切换到 design ，会看到一个完全不同的界面。欢迎来到Qt Quick!

4,设定尺寸 800x600

5,在Edit视图中，选中qrc文件右键添加存在的图片。切换到design视图选择resource视窗，找到logo_bg图片拖动到，视口内，将填充模式设置为strech然后在layout中点击如下图标

 这个命令，使图片粘贴到画布中。

6，点击并拖动rectangle组件到画布，我们将用这个矩形框作为头部区域。

7，将rectangle组件的上部，左右侧面加上锚定，这样就粘贴到画布中。并确保margin为0.

8，找到顶部的部件的颜色属性选择渐变模式。设置第一个颜色为#805bcce9 另一个颜色为80000000，这将创建一个半透明的蓝色渐变。

9,从navigation窗口操作。添加一个text组件到顶部组件中，并将字体设置为白色，填上日期。

 10,在layout 中，将文字的布局启动顶部和左边的锚点。使它固定在左上角。

11，/*添加一个矩形为蓝色#27a9e3，*/尺寸为50x50，/*并设置他的半径为2，拐角处有圆润的感觉。启用顶部锚点和右侧锚点固定在窗口的右上角。*/顶部margin为8，右边margin为10。在矩形中，添加mousearea。

12,在resource窗口中拖动图标到navigation的mouse area 的子级。再选中图片的情况设定他的layout为适应。同样方法添加另外一个按钮，调节间距等，如果一切顺利是这样的。

窗口的顶部是这样的

13，准备制作登录窗口，创建rectangle 360 200,适当圆角。设置颜色#8000 0000，半透明。调整layout

同样方法，添加用户名，密码，输入框。

14，添加输入框的时候只有文字没有背景，所以添加一个矩形框即可，然后将矩形框设定为填充模式即可。

15，制作按钮，添加mousearea 调整好位置和尺寸，添加矩形背景，添加字等内容。、

总之：添加-调整-在调整。。。。。

最后上图说明：