素材下载：/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在同一个文件夹，或者在子文件夹里。
最终效果：
