您的位置:首页 - HT - 正文
QT自定义控件实例HovertreeUserControl
QT实例
名称:HovertreeUserControl

实例介绍:
建立自定义控件,并在QT Creator中拖放控件提升为自定控件,同时使用代码添加自定义控件。自定义控件内放一个Label,文本下使用QPainter画下划线。

QT自定义用户控件,有自定义Widget组件,也有自定义QT Designer插件。
本实例介绍Widget组件。

命名规范:在局部变量名,使用"h_"作为前缀

运行效果:


知识点:
设置控件的边框、背景等样式
使用代码添加自定义控件到容器中
调整控件大小
移动控件的位置
画直线(参考:QT实例HovertreeDrawing
自定义QWidget组件的使用(请看本文后部分)

开发环境:
Qt Creator 4.9.1 (Enterprise)

编译环境:
Qt 5.13.0 MSVC2017 32bit

控件代码:
#include "hovertreewidget.h"
#include "ui_hovertreewidget.h"

HoverTreeWidget::HoverTreeWidget(QWidget *parent) :
QWidget(parent),
ui(new Ui::HoverTreeWidget)
{
ui->setupUi(this);

}

HoverTreeWidget::~HoverTreeWidget()
{
delete ui;
}

void HoverTreeWidget::paintEvent(QPaintEvent *event)
{
drawContent();
}

void HoverTreeWidget::drawContent()
{
this->resize(50,100);//调整控件大小
QPainter h_HoverTreePainter(this);//创建QPainter对象
h_HoverTreePainter.setRenderHint(QPainter::Antialiasing);// 抗锯齿
h_HoverTreePainter.setRenderHint(QPainter::TextAntialiasing);// 抗锯齿

int h_TextX,h_TextY;
h_TextX=(this->width()-ui->labelNote->width())/2;
h_TextY=(this->height()-ui->labelNote->height())/2;

ui->labelNote->setText("3");
ui->labelNote->move(h_TextX,h_TextY);//移动控件的位置

//设置画笔
QPen pen;
pen.setWidth(1); //线宽
pen.setColor(Qt::black); //划线颜色

//Qt::NoPen,Qt::SolidLine, Qt::DashLine, Qt::DotLine,Qt::DashDotLine,Qt::DashDotDotLine,Qt::CustomDashLine
pen.setStyle(Qt::SolidLine);//线的类型,实线、虚线等

//Qt::FlatCap, Qt::SquareCap,Qt::RoundCap
pen.setCapStyle(Qt::FlatCap);//线端点样式

//Qt::MiterJoin,Qt::BevelJoin,Qt::RoundJoin,Qt::SvgMiterJoin
pen.setJoinStyle(Qt::BevelJoin);//线的连接点样式
h_HoverTreePainter.setPen(pen);

int h_underLineX,h_underLineY,h_underLineWidth;

h_underLineX=ui->labelNote->x();
h_underLineY=ui->labelNote->y()+ui->labelNote->height()+5;
h_underLineWidth=ui->labelNote->width();

// drawLine
QLine h_line0(h_underLineX*9/10,h_underLineY,h_underLineX+h_underLineWidth,h_underLineY);
h_HoverTreePainter.drawLine(h_line0);

QLine h_line1(0,0,this->width(),0);
h_HoverTreePainter.drawLine(h_line1);
QLine h_line2(0,0,0,this->height());
h_HoverTreePainter.drawLine(h_line2);
QLine h_line3(this->width(),0,this->width(),this->height());
h_HoverTreePainter.drawLine(h_line3);
QLine h_line4(0,this->height(),this->width(),this->height());
h_HoverTreePainter.drawLine(h_line4);
}

使用控件代码:
#include "htmainwindow.h"
#include "ui_htmainwindow.h"


HTMainWindow::HTMainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::HTMainWindow)
{
ui->setupUi(this);
this->setWindowTitle("Hovertree UserControl");

//添加一个QWidget作为容器
QWidget* h_qw=new QWidget(ui->centralWidget);
h_qw->setObjectName("h_qw");//不能省略,否则设置样式不生效
h_qw->resize(500,300);
h_qw->move(20,120);
//设置背景颜色和边框
h_qw->setStyleSheet("QWidget#h_qw{border: 1px solid gray; border-radius: 5px;background:white;}");

//使用代码添加控件的方法,添加到容器h_qw中
HoverTreeWidget* h_htw=new HoverTreeWidget(h_qw);
h_htw->move(20,30);

}

HTMainWindow::~HTMainWindow()
{
delete ui;
}


在UI设计器中使用自定义QWidget组件的步骤:
新建自定义QWidget组件:




使用自定义QWidget组件:
在工具栏把Widget组件拖到界面上

右键点击组件,在弹出菜单选择“提升为...”




项目源码下载:HovertreeDrawing下载

评论: