The Fdog im project source code has been packaged and uploaded to github.com/HuaGouFdog/… If you don’t understand, please remember to chat with me privately. If it is helpful to you, welcome to Star!
A preface.
Fdog series written directory:
Fdog series (1) : thinking, it is better to write a chat software, then from the imitation QQ registration page to start.
Fdog series (2) : how to write HTML after the registration page, write the background response in Java.
Fdog series (iii) : Use Tencent Cloud SMS interface to send SMS, write to the database, deploy to the server, web ending.
Hello, my friends, in the previous three papers, we realized the web client to register a Fdog account, including the design of the first HTML, the second, the response of the HTML page, and the third send text messages, database writing, etc., on the web page of the writing, with the three articles, starting from the fourth article, will enter the stage of Qt, I’m going to start using Qt to create more, to bring some of this together.
Take a look at the renderings first! [insert picture description here] (img – blog. Csdnimg. Cn / 20210424193… =500x) all the source code has been packaged and uploaded to Github.
By studying this essay, you will learn:
Custom title box, achieve moving hidden taskbar icon, icon display in the system tray (bottom right corner of the system) create a right click menu text box fancy custom border How to add border shadow effects style design and more
The drop-down box in the picture, and how to get the content, change the content, delete the content, will be explained in the fifth feature, but also to get local login information, identify whether the user remember the password, and ListWdiget custom, I don’t get lost!
So let’s do it! Go!
2. The body of
1. Create a window and add basic components
Create a Widget window first. Do not create a MainWindow window, because the MainWindow window will serve as the window for our main screen later.
Right-click the project, add a new file, select the Qt Designer Interface class under Qt, and select Create Widget type window.
And then mimicking QQ to add the necessary controls.
You can see that the one on the right of the three controls below the textbox doesn’t seem to be aligned very well, so how do you do that? Just add a horizontal layout to the three of them, and you might say, well, you can use the XY values as well, okay, whatever.
Let’s pull a horizontal layout and pull these three controls into it. The effect is as follows:
! [insert picture description here] (img – blog. Csdnimg. Cn / 20210424201… =500x)
Tip:
If you want certain controls to be very long, or very short, you can try setting their maximum and minimum values. If controls, such as buttons, zoom freely in horizontal controls, but height does not. Why? You can click on the button, and you can select sizePolicy on the property page, and you can see the difference between the horizontal and vertical values, that's why, and the vertical stretch properties, and setting these properties properly will help you design a better interface.
Now, let’s hit Run and it will look like this:
2. Customize the title, hide the title of the task bar, and realize the system tray display
Now we will hide the automatic title from the system and use our own title. Before this, we will minimize and close the button, although we can cut the background directly
Also for horizontal layout, place the minimize and maximize button (ToolButton) and the green TAB on the left in the horizontal layout. If you want to put a distance between the two controls in the layout, you can use a spring to do so.
void Login::on_toolButton_clicked(a)/ / minimize
{
this->hide(a); }void Login::on_toolButton_2_clicked(a)/ / close
{
this->close(a); }Copy the codeI added an icon to the button and a logo image to the upper left corner of the label. The running effect is as follows (the black effect is not obvious, I changed one) :! [insert picture description here] (img – blog. Csdnimg. Cn / 20210424210… =400x) If you’ve added an icon to the button, but it’s white behind it like the close button, check autoRaise in the button properties, and you’ll see that the background is transparent.
If you don't know how to add Resources, here's how to do it: Right click on the project, create a new file, select the Qt Resources file in Qt, create an additional Resources file in the project list, then create a lib folder under the project folder, put the image in there, and click Resources. To add an existing file, select the image under lib.
Most importantly, I forgot how to cancel the system title and, in the constructor, set the Flags for the form.
this->setWindowFlags(Qt::SplashScreen|Qt::WindowStaysOnTopHint|Qt::FramelessWindowHint);
Copy the codeRun to see
Let’s solve it.
Add two header files
#include<QPoint>
#include<QMouseEvent>
Copy the codeAdd three functions and two variables to the header file.
bool isPressedWidget;
QPoint last;
void mousePressEvent(QMouseEvent *event);// Click
void mouseMoveEvent(QMouseEvent *event);// Move the mouse
void mouseReleaseEvent(QMouseEvent *event);// Release the mouse
Copy the codeAnd implement it
void Login::mousePressEvent(QMouseEvent *event)
{
isPressedWidget = true; // The current mouse press is the QWidget, not the other controls on the interface layout
last = event->globalPos(a); }void Login::mouseMoveEvent(QMouseEvent *event)
{
if (isPressedWidget)
{
int dx = event->globalX() - last.x(a);int dy = event->globalY() - last.y(a); last = event->globalPos(a);move(x()+dx, y()+dy); }}void Login::mouseReleaseEvent(QMouseEvent *event)
{
int dx = event->globalX() - last.x(a);int dy = event->globalY() - last.y(a);move(x()+dx, y()+dy);
isPressedWidget = false; // Set to false when the mouse is released
}
Copy the codeHere’s another way I wrote my previous post about mouse movement: Qt hides the system title bar and uses a custom title bar
The result is as follows:! [insert picture description here] (img – blog. Csdnimg. Cn / 20210424215… =400x)
In addition, the taskbar does not show the program title, which is exactly what we want, now we add the system tray for this window, just like QQ, we will operate on it in the system tray.
The QSystemTrayIcon class helps us do this.
Create a QSystemTrayIcon class object in the header file
QSystemTrayIcon * systemtrayicon; // System tray
Copy the codeCPP file to instantiate the actual
// Initialize the system tray
systemtrayicon = new QSystemTrayIcon(this);
QIcon icon = QIcon(":/lib/qusefdogicon.png");
// Add an icon
systemtrayicon->setIcon(icon);
// When the mouse hover, the text is displayed
systemtrayicon->setToolTip(QObject::trUtf8("Fdog"));
// Display the icon
systemtrayicon->show(a);Copy the code
The only drawback is that QQ has a right click menu, we don’t, now let’s try to add a right click menu, and achieve open the main interface and exit function.
Create a menu object, two actions, and two slot functions
#inlcude<QMenu>
QMenu * menu;
QAction *m_pShowAction;
QAction *m_pCloseAction;
private slots:
void showwidget(a);
void closewidget(a);
Copy the codeInstantiate the reality
menu = new QMenu(this);
m_pShowAction = new QAction("Open the home screen");
m_pCloseAction = new QAction("Quit");
menu->addAction(m_pShowAction);
menu->addSeparator(a); menu->addAction(m_pCloseAction);
systemtrayicon->setContextMenu(menu);
connect(m_pShowAction,SIGNAL(triggered(bool)),this.SLOT(showwidget()));
connect(m_pCloseAction,SIGNAL(triggered(bool)),this.SLOT(closewidget()));
void Login::showwidget(a)
{
this->show(a); }void Login::closewidget(a)
{
this->close(a); }Copy the codeThe effect is as follows: Right click, you can choose to open the main screen or exit.
3. Beautify the main interface, the whimsy of text box
For example, a GIF in the top half, how do you display a GIF
#include<QMovie>
QMovie * m_movie;
// Load the dynamic graph
m_movie = new QMovie(":/lib/mian.gif");// This is the dynamic to play
// Set dynamic graph size
m_si.setWidth(431);
m_si.setHeight(151);
m_movie->setScaledSize(m_si);
// Add dynamic graph
ui->mian_label->setMovie(m_movie); // Mian_label is the pink label
// Start the animation
m_movie->start(a);Copy the codeSetting the profile picture to a circle requires setting the QSS, which is the style sheet. You can add the following statement to the change style sheet for the profile picture by right-clicking label
border-image: url(:/lib/icon2505897252.png);
border-width:0px;
border-radius:33px;
border-style:solid;
border-color: rgb(255.255.255);
Copy the codeThe same goes for the white box behind the head.
Then you can set the difference between normal state and hover state, and the color of the text. Here take button for example, set its QSS, : hover represents the mouse hover.
#pushButton_2{
color: rgb(149.149.149);
}
#pushButton_2:hover{
color: rgb(120.120.120);
}
Copy the codeQSS beautification of login button
#pushButton{
background-color: rgb(99.188.255);
color: rgb(255.255.255);
border-radius: 5px;
font-size:14px;
}
#pushButton:hover{
background-color: rgb(99.170.255);
color: rgb(255.255.255);
border-radius: 5px;
}
#pushButton:pressed{
background-color: rgb(99.188.255);
color: rgb(255.255.255);
border-radius: 5px;
padding-left:2px;
padding-top:2px;
}
Copy the code
By default, when we click the button, the text on the button will move to the upper right corner, but when we add a custom image, the effect disappears. To do this, use the padding-left:2px; padding-top:2px; To implement.
The following is a major point of text box whimsy.
1. How to add the default text? Find the empty text setting in the textbox properties.
2. How to add ICONS to the text box, including the left and right
//Fdog Number text box
QAction * searchAction = new QAction(ui->lineEdit);
searchAction->setIcon(QIcon(":/lib/suo.png"));
ui->lineEdit->addAction(searchAction,QLineEdit::LeadingPosition);// Indicates the direction (left) of the action.
// Password text box
QAction * searchAction_2 = new QAction(ui->lineEdit);
searchAction_2->setIcon(QIcon(":/lib/jianpan.png"));
ui->lineEdit->addAction(searchAction_2,QLineEdit::TrailingPosition);// indicates the direction (right) of the action.
QAction * searchAction_3 = new QAction(ui->lineEdit);
searchAction_3->setIcon(QIcon(":/lib/fdog.png"));
ui->lineEdit_2->addAction(searchAction_3,QLineEdit::LeadingPosition);// Indicates the direction (left) of the action.
Copy the code3. How to implement the right drop-down box, actually here is a text box and a combox drop-down list box composition
This triangle looks a little ugly, but we can make a substitution
::down-arrow{
border-image: url(:/lib/jietou.png);
}
Copy the codeIf you are not clear what a control has child control, you can see the child control check.
Then change the left and right sides of the text box and the top edge to white or transparent, change the bottom to black, and you are done.
border-style:solid;
border-width:1px;
border-top-color: rgba(255.255.255.0);
border-right-color: rgba(255.255.255.0);
border-left-color: rgba(255.255.255.0);
border-bottom-color: rgb(129.129.129);
Copy the code4. Implement background shadows
So far, there is only one question left. When we use the built-in title bar, the window has a shadow border, but when we remove the built-in title bar, the border also disappears. How to make a shadow border? Let me show you. First of all, prepare a frame and shadow. No? Don’t worry, dog SON I am omnipotent, PS walk, at least I am also responsible for the student union poster excellent talent.
Create a transparent layer and then create a white layer with the border smaller than the transparent layer. Set the layer style for the white layer. Drop shadow inside with the following parameters:
// Transparent form
setAttribute(Qt::WA_TranslucentBackground);
Copy the codeOverride void paintEvent(QPaintEvent *e);
void paintEvent(QPaintEvent *e);
void Login::paintEvent(QPaintEvent *e)
{
Q_UNUSED(e)
QPainter painter(this);
QPixmap pixmap(":/lib/background.png");// The finished graph
qDrawBorderPixmap(&painter, this->rect(), QMargins(0.0.0.0), pixmap);
QRect rect(this->rect().x()+8.this->rect().y()+8.this->rect().width()- 16.this->rect().height()- 16);
painter.fillRect(rect, QColor(255.255.255));
}
Copy the code! [insert picture description here] (img – blog. Csdnimg. Cn / 20210424192… =500x)
Source and picture resources want, you can leave an email in the comment area, you can also add my wechat to get sui2506897252.