引言
- 开发环境
- 代码结构
- 示例代码
- 运行效果
- 总结
使用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>