1.ui页面设计技巧

最外面的widget：

上下左右的margin都置相同的值

这里有4个widget，做好一个后，后面3个可以直接复制.ui文件，然后进行微调即可。

2.现阶段实现的效果：

 3.程序结构：

btn1--->btn

btn1--->btn2

btn1--->btn3

btn1--->btn4

movable_widget--->widget

widget包含page1,page2

page1包含boot_time,cpu_usage_rate,power,wifi,widget1

boot_time包含progress_bar

cpu_usage_rate包含dashboard

power包含cell

wifi包含speed_detection

widget1包含widget3

page2包含security_defense_system,line_chart

security_defense_system包含btn4,warning

line_chart包含circle

 4.实现下面的按钮效果：

#ifndef BTN3_H
#define BTN3_H#include "btn1.h"
class btn3 : public btn1
{Q_OBJECT
public:btn3(QWidget * parent = nullptr);
protected:void paintEvent(QPaintEvent *) override;
};#endif // BTN3_H

#include "btn3.h"
#include <QPainter>
#include <QDebug>
btn3::btn3(QWidget * parent ): btn1(parent)
{this->setCheckable(1);this->setChecked(1);
}void btn3::paintEvent(QPaintEvent *)
{QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::TextAntialiasing, true);//qDebug()<<this->isChecked();//画背景painter.save();painter.setPen(Qt::NoPen);painter.setBrush(QBrush(QColor(255,255,255)));painter.drawRect(rect());painter.restore();//画圆角矩形painter.save();painter.setPen(Qt::NoPen);if(this->isChecked()){painter.setBrush(QBrush(QColor(51, 94, 255)));}else{painter.setBrush(QBrush(QColor(204, 204, 204)));}double side=qMin(width(),height());painter.drawRoundedRect(rect(),side/2,side/2);painter.restore();//画白色圆圈painter.save();painter.setPen(Qt::NoPen);painter.setBrush(QBrush(QColor(255,255,255)));double r=side*3/5/2;QRect circle(-r,-r,2*r,2*r);//宽1,2,2,1if(this->isChecked()){painter.translate(3*width()/4,height()/2);}else{painter.translate(1*width()/4,height()/2);}painter.drawEllipse(circle);painter.restore();
}

 5.实现下面的按钮效果：

#ifndef BTN4_H
#define BTN4_H#include "btn1.h"
class btn4 : public btn1
{Q_OBJECT
public:btn4(QWidget * parent = nullptr);void set_normal_icon(QString icon);void set_hover_icon(QString icon);
protected:void paintEvent(QPaintEvent *) override;void enterEvent(QEvent *event) override;void leaveEvent(QEvent *event) override;
private:QPixmap normal_icon;QPixmap hover_icon;bool hover;
};#endif // BTN4_H

#include "btn4.h"
#include <QPainter>
#pragma execution_character_set("utf-8")
btn4::btn4(QWidget * parent):btn1(parent)
{hover=0;
}void btn4::set_normal_icon(QString icon)
{normal_icon=QPixmap(icon);
}void btn4::set_hover_icon(QString icon)
{hover_icon=QPixmap(icon);
}void btn4::paintEvent(QPaintEvent *)
{QPainter painter(this);painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::TextAntialiasing, true);//画背景painter.save();painter.setPen(Qt::NoPen);painter.setBrush(QBrush(QColor(255,255,255)));painter.drawRect(rect());painter.restore();//画图标painter.save();painter.translate(width()/3,height()/2);QPixmap image;if(hover){image=QPixmap(hover_icon);}else{image=QPixmap(normal_icon);}QPixmap img = image.scaled(this->width()/5, height()*5/6,Qt::IgnoreAspectRatio);painter.drawPixmap(-img.width()-5,-img.height()/2,img);painter.restore();//画文字painter.save();QFont font;font.setPointSize(10);font.setBold(true);painter.setFont(font);QPen pen;if(hover){pen.setColor(QColor(51, 94, 255));}else{pen.setColor(QColor(0,0,0));}painter.setPen(pen);painter.drawText(width()/3,0,width()*2/3,height(),Qt::AlignLeft | Qt::AlignVCenter,text());painter.restore();
}void btn4::enterEvent(QEvent *event)
{hover=1;update();
}void btn4::leaveEvent(QEvent *event)
{hover=0;
}

 5.局部样式表设计

#widget{
background-color: rgb(255, 243, 232);
border-top-left-radius:24px;
border-top-right-radius:24px;
}
QLabel{
font: 75 10pt "微软雅黑";
}
#pushButton{
border:none;
color:gray;
font: 10pt "方正小标宋简体";
}
#pushButton_2{
background-color:rgb(51, 94, 255);
border:none;
border-radius:20px;
color: rgb(255, 255, 255);
font: 10pt "方正小标宋简体";
}
#label_2{
border-image: url(:/page2/警告.png);
}

6.实现如下效果：

#ifndef WARNING_H
#define WARNING_H#include <QWidget>
#include "btn3.h"
namespace Ui {
class warning;
}class warning : public QWidget
{Q_OBJECTpublic:explicit warning(QWidget *parent = nullptr);~warning();void init_button(btn3 * btn);
private slots:void on_pushButton_2_clicked();void on_pushButton_clicked();private:Ui::warning *ui;btn3 * button;
};#endif // WARNING_H

void security_defense_system::on_pushButton_clicked()
{Warn->resize(this->width()-6,Warn->height());Warn->move(3,3);Warn->show();
}

void warning::on_pushButton_2_clicked()
{//确定this->hide();button->setChecked(0);
}void warning::on_pushButton_clicked()
{//取消this->hide();button->setChecked(1);
}

对于本人而言，如果直接去实现这样精美的程序，真的超级麻烦，累。

但通过分块，我每次都专注于一点点小的功能实现，很有成就感，同时也在一点点完善自己的小程序。

 又做出一个小页面

效果图：