序文
最近、Qt5とQt Creatorを使用して管理システムプロジェクトを行っています。当然、ログインインターフェイスを使用する必要があるため、ログインインターフェイスの作成を記録します。これらの機能のいくつかの実現は、Qt5基本ビデオの不規則なウィンドウ部分の以前の研究からも恩恵を受けました。
1.美しいログインインターフェイスを実装するように教えます
まず完成品を見てください。
最初のステップは、新しいQwidgetプロジェクトを作成することです
qmainwindowを使用する必要はなく、これらのメニューも必要ありません。通常はqwidgetを使用できます。uiを確認してください。
2番目のステップ、インターフェースコンポーネントの追加
1.コンテナを追加します
コンテナを適切なサイズに調整し、キャンバス全体を適切なサイズに調整します。
2.ボタン、ラベル、テキストコンポーネントを追加します
アイデア：
アカウントとパスワードに入力ウィジェットを使用する：行編集
ロゴとパスワードを忘れる2つの表示ウィジェットを使用する：TextLabel
はボタンを選択したかどうかを記憶していますか：CheckBox
ログインボタンはボタンを使用します：PushButton
3.コンポーネント名を変更します
まず、行編集のデフォルトのテキスト属性を変更し、2つの行編集をクリックして、テキスト属性をユーザー名とパスワードに変更します。
次に、名前をダブルクリックして、他のボタンのテキストラベルを直接変更できます。
上記の2つの手順を実行すると、この外観を得ることができます（ここでは、Wiighetsの右側のメニューでフォントを変更し、後でスタイルシートから変更できます）。
4.スタイルシートを追加します
cssと同様に、QtにはQssがあります。最も重要な手順は、スタイルシートを追加することです。フレームコンテナの外側のキャンバスを右クリックしてスタイルシートを変更し、次のコードを入力します。
*{
background:rgb(255, 255, 255);
font-size:15px;
font-style:MingLiU-ExtB;
}
QFrame{
border:sold 10px rgba(0,0,0);
background-image:url(H:/GUI_design/day04/image/Login_Blue5);//背景
}
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;
}
バックグラウンドで「DuNiang」を見つけてください。
スタイルシートを貼った後に表示します。
3番目のステップは、ウィンドウの最小化とウィンドウを閉じる機能を実現することです。
1.ボタンを追加して、ウィンドウを最小化して閉じます
ボタンの選択：ツールボタン、使用-最小化するには、xを使用してウィンドウを閉じます。
2.ボタンがスロットに移動します
両方のボタンをスロットに回します。
3.コード例
スロットに切り替えた後、close（）関数とshowMinimized（）関数を対応する関数に追加するだけです。具体的なコードは次のとおりです。
widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
QT_BEGIN_NAMESPACE
namespace Ui {
class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
private slots:
void on_toolButton_clicked();
void on_toolButton_2_clicked();
private:
Ui::Widget *ui;
};
#endif // WIDGET_H
main.cpp
#include "widget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Widget w;
w.show();
return a.exec();
}
widget.cpp
#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
}
Widget::~Widget()
{
delete ui;
}
//核心代码就这几行
void Widget::on_toolButton_clicked()
{
close();
}
void Widget::on_toolButton_2_clicked()
{
showMinimized();
}
キャンバスを適切なサイズに調整します。
表示は次のとおりです。
このとき、ウィジェットの上部の境界線を削除し、背景も削除する必要があります。
4番目のステップでは、ウィジェットウィンドウの境界線と背景を非表示にします
次の2行のコードをwidget.cppファイルに追加します。
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//去窗口边框
setWindowFlags(Qt::FramelessWindowHint | windowFlags());
//把窗口背景设置为透明;
setAttribute(Qt::WA_TranslucentBackground);
}
5番目のステップは、インターフェースを移動できることを理解する
マウス移動およびマウスダウンイベントを追加する必要があります。* eを使用して、マウスを動かすか押します。
main.cpp
#include "widget.h"
#include <QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Widget w;
w.show();
return a.exec();
}
widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include <QWidget>
QT_BEGIN_NAMESPACE
namespace Ui {
class Widget; }
QT_END_NAMESPACE
class Widget : public QWidget
{
Q_OBJECT
public:
Widget(QWidget *parent = nullptr);
~Widget();
protected:
void mouseMoveEvent(QMouseEvent *e);//鼠标移动
void mousePressEvent(QMouseEvent *e);//鼠标按下移动
private slots:
void on_close_clicked();
void on_minimized_clicked();
private:
Ui::Widget *ui;
QPoint p;
};
#endif // WIDGET_H
widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QPainter>
#include <QMouseEvent>
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//去窗口边框
setWindowFlags(Qt::FramelessWindowHint | windowFlags());
//把窗口背景设置为透明;
setAttribute(Qt::WA_TranslucentBackground);
}
Widget::~Widget()
{
delete ui;
}
void Widget::mousePressEvent(QMouseEvent *e)
{
if(e->button() == Qt::LeftButton)
{
//求坐标差值
//当前点击坐标-窗口左上角坐标
p = e->globalPos() - this->frameGeometry().topLeft();
}
}
void Widget::mouseMoveEvent(QMouseEvent *e)
{
if(e->buttons() & Qt::LeftButton)
{
//移到左上角
move(e->globalPos() - p);
}
}
void Widget::on_close_clicked()
{
close();
}
void Widget::on_minimized_clicked()
{
showMinimized();
}
仕事を終える！
参照：
https ：//www.bilibili.com/video/BV1gb411W7WE？p = 2