利用Qt制作美化登录界面框

/*** * ┌─┐ ┌─┐ + + * ┌──┘ ┴───────┘ ┴──┐++ * │ │ * │ ─── │++ + + + * ███████───███████ │+ * │ │+ * │ ─┴─ │ * │ │ * └───┐ ┌───┘ * │ │ * │ │ + + * │ │ * │ └──────────────┐ * │ │ * │ ├─┐ * │ ┌─┘ * │ │ * └─┐ ┐ ┌───────┬──┐ ┌──┘ + + + + * │ ─┤ ─┤ │ ─┤ ─┤ * └──┴──┘ └──┴──┘ + + + + * 神兽保佑 * 代码无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();
    }
}