-
目标：
- 使用Model/View实现列表内容加载；
- 使用Delegate实现Item的设计；
- Item可以包含多个不同类型的控件；
- Item可处理多控件的鼠标hover，press事件；
- Item可支持输入控件；
- 实现列表内容随滚动条动态加载；
- 实现ListMode和IconMode动态切换；
-
效果演示
-
Model/View原理
Model：列表的数据集合，每一条Item是一个数据表，默认的key值是Qt::DisplayRole，用户可扩展以Qt::UserRole起始的自定义字段；数据提供者；
Delegate：Item的样式实现，使用Model中的数据来创建Item的UI；数据使用者；
View：List UI的载体，带有默认的Model和Delegate，也可设置自定义的Model及Delegate来实现自定义的ListView；
-
QListView设置Model和Delegate
void ProjectInfoListView::init(QListView::ViewMode viewMode)
{
//layout;
auto layout = new QHBoxLayout();
layout->setContentsMargins(0, 0, 0, 0);
this->setLayout(layout);
//listview;
m_listView = new QListView(this);
layout->addWidget(m_listView);
//model
m_model = new ProjectInfoModel(this);
m_listView->setModel(m_model);
//list delegate;
m_delegate = new ProjectInfoDelegate(this);
m_listView->setItemDelegate(m_delegate);
}分别创建QListView，ProjectInfoModel和ProjectInfoDelegate的对象，然后把Model和Delegate对象设置给ListView。
-
ListModel和IconMode动态切换
void ProjectInfoListView::setViewMode(QListView::ViewMode viewMode)
{
m_viewMode = viewMode;
if(viewMode == QListView::IconMode)
{
m_listView->setItemDelegate(m_iconDelegate);
m_listView->setViewMode(QListView::IconMode);
m_listView->setProperty("isListMode", false);
m_listView->setSelectionBehavior(QAbstractItemView::SelectItems);
m_listView->setResizeMode(QListView::Adjust); //ListView Resize时是否根据新的宽高重新排列；
m_listView->setWrapping(true); //一行多个Item，直到占满一行；
m_listView->setSpacing(10);
m_listView->verticalScrollBar()->setSingleStep(100);
}
else
{
m_listView->setItemDelegate(m_listDelegate);
m_listView->setViewMode(QListView::ListMode);
m_listView->setProperty("isListMode", true);
m_listView->setSelectionBehavior(QAbstractItemView::SelectRows);
m_listView->setWrapping(false); //一行多个Item，直到占满一行；
m_listView->setSpacing(0);
m_listView->verticalScrollBar()->setSingleStep(1);
}
m_listView->scrollToTop();
style()->unpolish(m_listView);
style()->polish(m_listView);
}创建m_listDelegate和m_iconDelegate两个不同类型的Delegate对象，分别代表list mode和icon mode。
-
Model的设计
-
item数据的读写
-
namespace fly
{
struct ProjectDetailInfo
{
bool checked = false;
QString name = "";
QDateTime modifyTime;
QString size = "";
int hoverPosX= 0;
ProjectDetailInfoKey clickedRole = PROJECT_NAME;
QString iconPath = ":/icon/default.png";
};
}
class ProjectInfoModel : public QAbstractListModel
{
Q_OBJECT
public:
explicit ProjectInfoModel(QObject* parent=nullptr);
explicit ProjectInfoModel(const QList<fly::ProjectDetailInfo>& itemList, QObject*parent=nullptr);
virtual ~ProjectInfoModel();
void appendList(const QList<fly::ProjectDetailInfo>& itemList);
void append(const fly::ProjectDetailInfo& item);
void insert(int row, const fly::ProjectDetailInfo& item);
void remove(int row);
private:
QList<fly::ProjectDetailInfo> m_list;
};用户数据实际上存储在m_list中，我们自定义了ProjectDetailInfod数据结构，增加了append，insert，remove等接口来操作m_list，实现Model的更新。
Item的数据读写需要通过固定的接口来实现，分别是data()和setData()，这两个函数会在Delegate被使用到，我们需要对其进行重写，使它们支持自定义的数据结构ProjectDetailInfo。
QVariant ProjectInfoModel::data(const QModelIndex &index, int role) const
{
QVariant var;
do
{
if(!index.isValid())
break;
if(index.row()>= m_list.size() || index.row()< 0)
break;
const auto& info = m_list.at(index.row());
switch(role)
{
case fly::CHECKED_STATE:
var = info.checked;
break;
case fly::PROJECT_NAME:
var = info.name;
break;
case fly::MODIFY_TIME:
var = info.modifyTime;
break;
case fly::PROJECT_SIZE:
var = info.size;
break;
case fly::HOVER_POS_X:
var = info.hoverPosX;
break;
case fly::ICON_PATH:
var = info.iconPath;
break;
case fly::CLICKED_ROLE:
var = info.clickedRole;
break;
case Qt::DisplayRole:
var = info.name;
break;
}
}while(0);
return var;
}index代表一条item数据，role则代表一条item数据下的一个字段（一条item可以有多个字段）。
bool ProjectInfoModel::setData(const QModelIndex &index, const QVariant &value, int role)
{
int row = index.row();
if(row>= m_list.size() || row< 0)
return false;
auto info = m_list.at(row);
switch(role)
{
case fly::CHECKED_STATE:
info.checked = value.toBool();
break;
case fly::PROJECT_NAME:
info.name = value.toString();
break;
case fly::MODIFY_TIME:
info.modifyTime = value.toDateTime();
break;
case fly::PROJECT_SIZE:
info.size = value.toString();
break;
case fly::HOVER_POS_X:
info.hoverPosX = value.toInt();
break;
case fly::ICON_PATH:
info.iconPath = value.toString();
break;
case fly::CLICKED_ROLE:
info.clickedRole = (fly::ProjectDetailInfoKey)value.toInt();
break;
case Qt::DisplayRole:
info.name = value.toString();
break;
}
m_list.replace(row, info);
return true;
}对应于data()访问数据函数，setData()函数则是用于通过key值更新数据，同样传入index定位到item，再通过role找到对应的字段。
-
item随滚动条滑动动态加载
int ProjectInfoModel::rowCount(const QModelIndex &parent) const
{
(void)parent;
return m_itemCount;
}
bool ProjectInfoModel::canFetchMore(const QModelIndex &parent) const
{
(void)parent;
if(m_itemCount< m_list.size())
return true;
else
return false;
}
void ProjectInfoModel::fetchMore(const QModelIndex &parent)
{
(void)parent;
int remainder = m_list.size()- m_itemCount;
int itemToFetch = qMin(m_onceFetchNum, remainder);
if(itemToFetch< 0)
return;
beginInsertRows(QModelIndex(), m_itemCount, m_itemCount+ itemToFetch- 1);
m_itemCount += itemToFetch;
endInsertRows();
}通过重写基类的rowCount()，canFetchMore()，fetchMore()三个函数实现item的动态加载，这三个函数默认由ListView底层去调用，我们只需关注实现。
m_itemCount记录的是ListView当前加载的item数量，ListView会根据这个值去计算滚动条的位置。
当滚动条到达底部时，底层会调用canFetchMore()函数，若返回true，则下一步调用fetchMore()，fetchMore()里面实现了item的加载。
-
Delegate的设计
-
绘制多个不同的控件
-
void ProjectInfoDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
fly::ProjectDetailInfo info;
info.init(index);
QRect rect = option.rect;
QRect checkedRect;
QRect iconRect;
QRect nameRect;
QRect timeRect;
QRect sizeRect;
QRect moreRect;
getRects(rect, checkedRect, iconRect, nameRect, timeRect, sizeRect, moreRect);
//checked button;
if(info.checked)
{
QPixmap pix(":/icon/checked.png");
painter->drawPixmap(checkedRect, pix);
}
else
{
QPixmap pix(":/icon/unchecked.png");
painter->drawPixmap(checkedRect, pix);
}
//icon
QPixmap iconPix(info.iconPath);
painter->drawPixmap(iconRect, iconPix);
{
QFont font;
font.setFamily("Microsoft YaHei");
font.setPixelSize(18);
painter->setFont(font);
painter->drawText(nameRect, Qt::AlignLeft, info.name);
painter->drawText(timeRect, Qt::AlignLeft, info.modifyTime.toString());
painter->drawText(sizeRect, Qt::AlignLeft, info.size);
}
//more button;
QPixmap morePix(":/icon/more.png");
painter->drawPixmap(moreRect, morePix);
}ProjectInfoDelegate继承于QStyledItemDelegate，重写它的paint()函数，通过传入的index所带的数据来绘制item。所有的item都会通过paint()函数来创建，所以过程是统一的，差异在于每条index带的数据会不一样。
- 鼠标press事件实现
bool ProjectInfoDelegate::editorEvent(QEvent *event, QAbstractItemModel *model, const QStyleOptionViewItem &option, const QModelIndex &index)
{
ProjectInfoModel* conModel = static_cast<ProjectInfoModel*>(model);
QRect rect = option.rect;
QRect checkedRect;
QRect iconRect;
QRect nameRect;
QRect timeRect;
QRect sizeRect;
QRect moreRect;
getRects(rect, checkedRect, iconRect, nameRect, timeRect, sizeRect, moreRect);
QMouseEvent* msEvent = static_cast<QMouseEvent*>(event);
if(event->type() == QEvent::MouseButtonPress)
{
if(checkedRect.contains(msEvent->pos()))
{
conModel->setData(index, fly::CHECKED_STATE, fly::CLICKED_ROLE);
emit conModel->clicked(index);
conModel->setData(index, false, fly::CHECKED_STATE);
}
else if(moreRect.contains(msEvent->pos()))
{
emit conModel->moreBtnClick(index, QPoint(rect.x()+ moreRect.x()+ moreRect.width(), rect.y()+ moreRect.height()));
}
}
return QStyledItemDelegate::editorEvent(event, model, option, index);
}editorEvent()函数会传入鼠标的Pressed事件，以及当前index和整个Model，我们在判断到MouseButtonPress事件时，可以根据鼠标当前所在的位置来判断属于哪个控件的区域，然后更新对应item的CLICKED_ROLE字段的值，该字段记录了鼠标事件属于哪个控件的。通过在Model中的自定义信号clicked发出信号，该信号可以在Delegate对象持有者中进行处理。
-
鼠标hover事件实现
bool ProjectInfoListView::eventFilter(QObject *watched, QEvent *event)
{
//捕获ListView的MouseMove事件，并把Mouse的position值记录在鼠标当前所在的item的数据里，用于实现item的多控件hover响应；
if(watched == m_listView->viewport() && event->type() == QMouseEvent::MouseMove)
{
QMouseEvent* msEvent = static_cast<QMouseEvent*>(event);
m_model->setData(m_listView->indexAt(msEvent->pos()), msEvent->x(), fly::HOVER_POS_X);
update();
}
return QWidget::eventFilter(watched, event);
}void ProjectInfoDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
QRect rect = option.rect;
QRect checkedRect;
QRect iconRect;
QRect nameRect;
QRect timeRect;
QRect sizeRect;
QRect moreRect;
getRects(rect, checkedRect, iconRect, nameRect, timeRect, sizeRect, moreRect);
QPoint msPos = QPoint(index.data(fly::HOVER_POS_X).toInt(), rect.y());
if(option.state & QStyle::State_MouseOver)
{
//more button hover
if(moreRect.contains(msPos))
{
painter->fillRect(moreRect, QColor(100, 100, 100, 100));
}
else if(nameRect.contains(msPos))
{
painter->fillRect(nameRect, QColor(100, 100, 100, 100));
}
}
}item中的鼠标hover事件需要由QListView的viewport的的MouseMove来实现，Delegate的paint()函数中虽然有QStyle::State_MouseOver事件，但这个事件只能实现item的hover，无法实现item里面具体的控件的hover。结合QListView的viewport中捕获的Mouse 的位置就可以具体到哪个控件，同样也是通过把Mouse的位置记录到item的自定义的HOVER_POS_X字段中，再在paint()中去读取这个值。
-
实现输入型控件动态创建
重写createEidtor()，setEditorData()，setModelData()和updateEditorGeometry()这四个函数可以实现在item上动态创建各种类型的控件，比如QLineEidt，QSlider，甚至自绘的控件都可以。
1. QListView可以通过setEditTriggers()函数设置触发item进入Eidt模式的方式，分别有鼠标双击，选中单击等选项。假如设置了双击触发，那么在双击item时QListView底层会调用createEidtor()来获取要创建的控件对象，当我们在子类重写了createEditor()，使它返回我们自己创建的控件，那么动态创建控件的目的就达到了。
2. 底层在调用完createEditor()后，会接着调用setEidtorData()来初始化控件的内容，比如说把item的内容设置在控件上。
3. createEidtor()创建出来的控件默认位置是当前item的(0, 0) 位置，要想控件显示在不同的位置可以重写updateEditorGeometry()把控件移到希望显示的位置，同样这个函数也是由QListView底层调用。
4. setModelData()的作用是在item推出edit状态后更新Model的，也是由QListView底层调用，比如输入框输入完成后，把输入框的内容更新到Model中。
【QListViewDemo】
https://download.csdn.net/download/JellyLi2091/88068274
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
