使用qt实现一个列表,列表中每一项中的类似一个checkbox,通过上下键可以切换选中项,按下回车键在已经选中的项前出现对勾。且选中最后一行后,再去按向下按键会接着回滚选中第一行,按向上的按键也是类似的效果。
程序的运行效果如下:
20241203_163929
开发环境
使用ubuntu下QtCreator4.11.。
代码结构
这里将项目的结构截图贴上,为了更好的复现项目 。
项目结构图如下:
ui文件中的控件采用在项目中用代码实现,没有在ui设计器中拖控件,是项目生成时生成的dialog.ui。
示例代码
本示例中有两个类可以单独拿来使用,作为自定义的checkbox,分别为MyCheckBox类和MyCheckMarkIcon类。这两个类用来实现一个自定义的checkbox。
下面是具体实现代码。
mycheckmarkicon.h
#ifndef MYCHECKMARKICON_H
#define MYCHECKMARKICON_H
#include <QObject>
#include <QWidget>
class MyCheckMarkIcon : public QWidget
{
Q_OBJECT
public:
explicit MyCheckMarkIcon(QWidget *parent = nullptr);
void setColor(const QColor& color);
void setSelected(const bool& bIsSelected);
bool getSelected()const;
protected:
void paintEvent(QPaintEvent *event) override;
signals:
private:
QColor m_color;
QColor m_backColor;//背景色
bool m_bIsSelected;//是否选中
};
#endif // MYCHECKMARKICON_H
mycheckmarkicon.cpp
#include "mycheckmarkicon.h"
#include <QPainter>
#include <QStyleOption>
MyCheckMarkIcon::MyCheckMarkIcon(QWidget *parent) : QWidget(parent),m_color(Qt::transparent)
{
setFixedSize(20,20);
}
void MyCheckMarkIcon::setColor(const QColor &color)
{
m_color = color;
m_bIsSelected == true?m_backColor=Qt::yellow:m_backColor = QColor("#6A5ACD");
update();
}
void MyCheckMarkIcon::setSelected(const bool &bIsSelected)
{
m_bIsSelected = bIsSelected;
}
bool MyCheckMarkIcon::getSelected() const
{
return m_bIsSelected;
}
void MyCheckMarkIcon::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QPen pen(Qt::SolidLine);
pen.setWidth(2);
pen.setBrush(m_backColor);
QRect rect(0,0,20,20);
painter.fillRect(rect,m_backColor);//绘制填充矩形
pen.setColor(m_color);
painter.setPen(pen);
QPainterPath path;
path.moveTo(rect.left()+5,rect.right()-5);
path.lineTo(rect.left()+10,rect.bottom());
path.lineTo(rect.left()+15,rect.top()+5);
painter.strokePath(path,pen);//使用指定的笔在路径上绘制轮廓
}
mycheckbox.h
#ifndef MYCHECKBOX_H
#define MYCHECKBOX_H
#include <QWidget>