/****┌─┐ ┌─┐ + +* ┌──┘ ┴───────┘ ┴──┐++* │ │* │ ─── │++ + + +* ███████───███████ │+* │ │+* │ ─┴─ │* │ │* └───┐ ┌───┘* │ │* │ │ + +* │ │* │ └──────────────┐* │ │* │ ├─┐* │ ┌─┘* │ │* └─┐ ┐ ┌───────┬──┐ ┌──┘ + + + +* │ ─┤ ─┤ │ ─┤ ─┤* └──┴──┘ └──┴──┘ + + + +*神兽保佑*代码无BUG!*/
1、演示效果
2、制作
2.1、新建一个Qwidget项目
2.2、添加界面组件
调整容器为合适大小,同时调整整个画布为合适大小。
2.3、添加按钮,标签,文字组件
账号密码部分使用Input Widgets:Line Edit
Logo和忘记密码使用两个Display Widgets:TextLabel
是否记住选择一个Buttons:CheckBox
登录按钮使用Buttons:PushButton
修改Line Edit默认文本属性,分别点击两个LineEdit修改文本属性placeholdertext为Username和Password。
2.4、添加qss样式表
*{background:rgb(255, 255, 255);font-size:15px;font-style:MingLiU-ExtB;}QFrame{border:sold 10px rgba(0,0,0);background-image:url(:/image/background.png);}QLineEdit{color:#8d98a1;background-color:#405361;font-size:16px;border-style:outset;border-radius:10px;font-style:MingLiU-ExtB;}QPushButton{background:#ced1d8;border-style:outset;border-radius:10px;font-style:MingLiU-ExtB;}QPushButton:pressed{background-color:rgb(224,0,0);border-style:inset;font-style:MingLiU-ExtB;}QCheckBox{background:rgba(85,170,255,0);color:white;font-style:MingLiU-ExtB;}QLabel{background:rgba(85,170,255,0);color:white;font-style:MingLiU-ExtB;font-size:14px;}#label_forget{color:red;text-decoration: underline}
2.5、实现最小化窗口和关闭窗口功能
为最小化好关闭按钮添加槽函数:
void Widget::on_minButton_clicked(){showMinimized();}void Widget::on_closeButton_clicked(){close();}
2.6、隐藏widget窗口边框和背景
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget){ui->setupUi(this);//去窗口边框setWindowFlags(Qt::FramelessWindowHint | windowFlags());//把窗口背景设置为透明;setAttribute(Qt::WA_TranslucentBackground);}
2.7、实现界面可移动
void mouseMoveEvent(QMouseEvent *e);//鼠标移动void mousePressEvent(QMouseEvent *e);//鼠标按下移动void Widget::mouseMoveEvent(QMouseEvent* event){if(event->buttons() & Qt::LeftButton){//移到左上角move(event->globalPos() - point);}}void Widget::mousePressEvent(QMouseEvent* event){if(event->button() == Qt::LeftButton){//求坐标差值//当前点击坐标-窗口左上角坐标point = event->globalPos() - this->frameGeometry().topLeft();}}