使用Qt6的样式表创建登陆界面

素材下载：https://download.csdn.net/download/shuishou1000/23690954

首先绘制一下草稿图，这一步很关键。

一，创建头部布局

1，创建工程，将mainwindow窗口尺寸设置为800x600.

2, 在DisplayWidget类别下，拖放入label标签。

3，修改标签的名字为currentTime,并修改text属性为2021-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在同一个文件夹，或者在子文件夹里。

最终效果：

使用Qt6的样式表创建登陆界面相关推荐

MFC 登陆界面创建地方
在"工程名APP.CPP"的InitInstance()函数中创建登陆界面可以根据自己需求做界面. 这里只是用对话框简单演示. BOOL CDAFGeneratorApp::Ini ...
使用HTML表单和表格完成静态QQ登陆界面
使用HTML表单和表格完成静态QQ登陆界面一.创建过程创建表单创建表格创建行创建单元格创建表单组建二.原理使用表单来显示收集用户信息并用表格来帮助排版三.主要代码 1. <ta ...
【Python】解决Django Admin管理界面样式表(CSS Style)丢失问题
[Python]解决Django Admin管理界面样式表(CSS Style)丢失问题参考文章: (1)[Python]解决Django Admin管理界面样式表(CSS Style)丢失问题 ( ...
web developer tips (1):创建、管理、应用样式表的强大工具
原文链接:Powerful CSS Tools to Create, Manage and Apply Styles Visual Studio 2008 包含了三个新的CSS样式工具窗口: 1.应用 ...
引用自己创建的css样式表_如何使用CSS创建联系表
引用自己创建的css样式表 First we create the HTML elements - input fields for First Name, Last Name, Email and ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
户界面样式-表单轮廓和防止拖拽文本域（HTML、CSS）
户界面样式-表单轮廓和防止拖拽文本域(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><m ...
css新建样式表文件,CSS教程:创建性感的CSS样式表
CSS教程:创建性感的CSS样式表互联网发布时间:2008-10-17 19:28:31 作者:佚名我要评论原文名称:Creating Sexy Stylesheets
用Qt写一个简单的音乐播放器（七）：界面美化（QSS样式表）
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...

使用Qt6的样式表创建登陆界面

使用Qt6的样式表创建登陆界面相关推荐

最新文章

热门文章