素材下载:/download/shuishou1000/23690954
首先绘制一下草稿图,这一步很关键。
一,创建头部布局
1,创建工程,将mainwindow窗口尺寸设置为800x600.
2, 在DisplayWidget类别下,拖放入label标签。
3,修改标签的名字为currentTime,并修改text属性为-9-17 2:30 AM 星期一.此处仅做显示目的。
4,在Buttons分类下,找到pushbutton按钮,拖放两个按钮,将文字修改为restartBtn和closeBtn.
5.选择主窗口,然后点击窗口上面的命令layout vertically.实现所有的部件居中排列。
6,添加layout horizontal 水平布局组件。并将pushbutton和label组件放入布局组件中。
7,删除多余的部件,比如状态条等,目前,水平方向布局基本正确,但是竖直方向却居中,需要进一步修改。添加spacer也就是常说的“弹簧”。
8,设置按钮的水平和垂直属性策略设置为固定,并设置最小尺寸为55x55,将按钮的文字去掉,为后面添加图片做准备。
二,创建logo
1,在头部区域和竖直弹簧之间添加水平部件
2,现在放上去是这样的,太细,不容易放入组件。所以需要临时调整一下,边框margin属性。
3,添加用于放置logo的label部件,将minisize大小设置为150x150.删除lebel默认内容,将上步调整的margin归零。
4,现在logo组件尺寸看不出来,所以我们临时写入一个样式表: border: 1px solid gray;
三,布局登陆表单
1,和创建logo一样,在弹簧和logo区域之间添加水平容器组件,然后将margin top调整为100,方便放入其他组件。
2,在水平容器组件中添加垂直容器组件,设置其margin top为20,这是登陆窗口存放组件。
3,右键点击刚刚创建的垂直容器组件,选择morph into->QWidget,这时候,垂直容器组件会转换为空组件。因为我们要调整组件的宽度和高度,所以这一步是必须的。一个布局组件尽管有margin但是没有宽度和高度的,
4,修改刚刚转换的组件名字为 loginForm,将水平和垂直属性策略都转换为fixed 固定模式,并将最小尺寸设置为350x200.
5,因为已经将loginForm放入到了水平容器中,所以将水平容器的margin top设为0.临时添加样式表来显示区域,这次放入到mainwindow中,使用#指定具体组件。
QWidget#loginForm{border:1px solid blue;}
6,放入具体内容。为用户名和密码放入两个水平布局。添加标签和line edit到水平布局里面,每个容器放一组。分别为修改为用户名,密码。在密码区域下面一个按钮,并修改为“提交”。
7,添加一个小弹簧,设置高度为5
8,设置loginForm的边框margin为35,也就是四周留空白,从设计上来说,看起来更好。
9,通过弹簧和组件尺寸继续调整之最佳的美观效果。然后将顶部的水平组件容器转换为QWidget,因为容器无法添加样式表。
10,如果我们不想要mainwindow的边框填充时,在列表窗口找到centralwidget,将边框设置设为0.目前的框架如下
11,下一步我们将要添加令人着迷的样式表了!
我们添加样式表通过继承的方法,选择mainwindow点击change style ,后面添加图片,临时样式。
#centralwidget{background:rgba(32, 80, 96,100);}
如果将样式应用到mainwindow,那么只能是用#centralwidget,因为mainwindow只是容器,无法放样式。
继续添加样式
#centralwidget{background:rgba(32, 80, 96,100);}#topWidget{background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(91,204,33 , 255), stop:1 rgba(32, 80,,96, 200))}#loginForm{background:rgba(0,0,0,80);border-radius:8px;}QLabel{color:white;}QLineEdit{border-radius:3px;}QPushButton{color:white;background-color:#27a9e3;border-width:0px;border-radius:3px;}QPushButton:hover{background-color:#66c011;}
总结:布局中主要是使用容器和弹簧,样式主要是从大到小的去应用。
添加外部资源
创建QT resource files,文件-新建文件-qt-qt resource files
在qt create中打开resource file文件,添加前缀是为了更好的管理素材。
添加前缀“/icons”"/images",并添加相应的素材如图
选择相应的按钮,从属性中找到 icon,打开 icon旁边的向下箭头,然后选择resource,如果是空白的,需要save all一下,就会显示。选择相应的资源。
如果图标很小,就需要调整尺寸,默认图标是16x16的。选择icon size属性框,进行调整。
往logo同添加素材使用属性 pixmap属性,选择与icon一样。
也可以使用另一个方法实现加载图片。
border-img:url(:/images/logo.png);
pixmap与样式表加载图片的最大区别: pixmap不能缩放,样式表可以跟随窗口缩放。
注意:使用的素材文件,不限于图片,需要和.qrc在同一个文件夹,或者在子文件夹里。
最终效果: