QListWidget 自定义 item的图标和文字的位置

这篇具有很好参考价值的文章主要介绍了QListWidget 自定义 item的图标和文字的位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

楼主并没有完整的解决这个问题,如果你是着急寻找解决方案的就可以划走了,如果你对楼主的解决思路有兴趣,那么可以继续向下阅读。首先需求是可以控制QListWidgetItem的icon和text x轴的位置,但是同时保持icon在左text在右的基本布局,还要求styleSheet能够生效。

思路一

做一张两边透明中间显示的图片。这样就可以控制icon和text的位置了。楼主没有试过实际效果

思路二

使用QListWIdgetsetItemWIdget接口。
mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>

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

    QListWidgetItem *item0 = new QListWidgetItem(ui->listWidget);   
    MyItemWidget *itemWidget = new MyItemWidget(QIcon(":/pic/rabbit.png"), QStringLiteral("兔子"), ui->listWidget);
    ui->listWidget->setItemWidget(item0, itemWidget);

    QListWidgetItem *item1 = new QListWidgetItem(ui->listWidget);
    item1->setIcon(QIcon(":/pic/tiger.png"));
    item1->setText(QStringLiteral("老虎"));

    ui->listWidget->addItem(item0);
    ui->listWidget->addItem(item1);
}

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

void MainWindow::on_pushButton_clicked()
{
    QListWidgetItem *item = ui->listWidget->item(0);
    QModelIndex index = ui->listWidget->currentIndex();
    qDebug() << index.data(Qt::DisplayRole).toString();
}

MyItemWidget::MyItemWidget(const QIcon &icon, const QString &name, QWidget *parent)
{
    iconLabel = new QLabel;
    iconLabel->setPixmap(icon.pixmap(QSize(15, 15)));
    iconLabel->setFixedSize(QSize(15, 15));

    nameLabel = new QLabel(name);

    hSpaceItem = new QSpacerItem(10, 10, QSizePolicy::Fixed);
    hSpaceItem1 = new QSpacerItem(20, 10, QSizePolicy::Fixed);

    layout = new QHBoxLayout;
    layout->setMargin(0);

    layout->addItem(hSpaceItem);
    layout->addWidget(iconLabel);

    layout->addItem(hSpaceItem1);

    layout->addWidget(nameLabel);

    this->setLayout(layout);
}

MyItemWidget::~MyItemWidget()
{

}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QListWidget>
#include <QListWidgetItem>
#include <QIcon>
#include <QSpacerItem>
#include <QLabel>
#include <QHBoxLayout>
#include "mydelegate.h"

namespace Ui {
class MainWindow;
}

class MyItemWidget : public QWidget
{
    Q_OBJECT
public:
    explicit MyItemWidget(const QIcon& icon, const QString& name, QWidget *parent = nullptr);
    ~MyItemWidget();
private:
    QLabel *iconLabel;
    QLabel *nameLabel;
    QSpacerItem *hSpaceItem;
    QSpacerItem *hSpaceItem1;
    QHBoxLayout *layout;
};

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

思路二缺陷

因为对于QListWidget QTableWidget等。如果在stylesheet中把为状态为selecteditem背景色设置为深色那么前景色(字体的颜色)会变成比较浅的颜色来做一个区分。如果使用思路二那么将没有这种效果。
qtreewidget添加图标,我的QT,ui,qt,qt5
如果你想通过QlistWidget点击某个item的信号来控制label的颜色,那么这是可行的。只是你可能会在遇到一个坑,那就是伪状态为:selected:!actived没有进行控制。

思路三

通过delegate控制,将用于画图的rectangle左边缩短一截。这样导致的问题是,item区域有部分rectangle没法使用样式表控制,且只能控制icon相对于左侧的位置。
MyDelegate.cpp

#include "mydelegate.h"
#include <QDebug>

MyDelegate::MyDelegate(QObject *parent) : QStyledItemDelegate(parent)
{

}

void MyDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
//    QPixmap icon = index.data(Qt::DecorationRole).value<QIcon>().pixmap(15 , option.rect.height() - 5);
//    QString text = index.data(Qt::DisplayRole).toString();
//    QAbstractItemModel *model = (QAbstractItemModel*)index.model();
//    model->setData(index, QVariant::fromValue(QIcon()), Qt::DecorationRole);
//    model->setData(index, QVariant::fromValue(QString()), Qt::DisplayRole);

//    QStyleOptionViewItem op(option);
//    QStyledItemDelegate::paint(painter, op, index);
//    painter->drawPixmap(op.rect.x() + 5, op.rect.y() + 5, 15, op.rect.height() - 5, icon);
//    painter->drawText(op.rect.x() + 5 + 15 + 30, op.rect.height() / 2, text);

    QStyleOptionViewItem op(option);
    op.rect = QRect(op.rect.x() + 30, op.rect.y(), op.rect.width(), op.rect.height());
    QStyledItemDelegate::paint(painter, op, index);
}

思路四

通过delegate,让delegate不绘制icon和text。icon和text有自己来手动绘制。想法很美好但是现实根本行不通
MyDelegate.cpp

#include "mydelegate.h"
#include <QDebug>

MyDelegate::MyDelegate(QObject *parent) : QStyledItemDelegate(parent)
{

}

void MyDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    qDebug() << index.row();
    QPixmap icon = index.data(Qt::DecorationRole).value<QIcon>().pixmap(15 , option.rect.height() - 5);
    QString text = index.data(Qt::DisplayRole).toString();
    QAbstractItemModel *model = const_cast<QAbstractItemModel*>(index.model());
    model->setData(index, QVariant::fromValue(QIcon()), Qt::DecorationRole);
    model->setData(index, QVariant::fromValue(QString()), Qt::DisplayRole);

    QStyleOptionViewItem op(option);
    painter->drawPixmap(op.rect.x() + 5, op.rect.y() + 5, 15, op.rect.height() - 5, icon);
    painter->drawText(op.rect.x() + 5 + 15 + 30, op.rect.height() / 2, text);

    QStyledItemDelegate::paint(painter, op, index);
}

思路四效果
qtreewidget添加图标,我的QT,ui,qt,qt5
效果就是没有任何效果。跪求大佬解答为什么没有效果。文章来源地址https://www.toymoban.com/news/detail-791258.html

到了这里,关于QListWidget 自定义 item的图标和文字的位置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JAVA PDF 给PDF添加文字/图片水印(指定内容),并且设置位置

    提示:看完这个简单的demo 后就知道怎样去操作一个PDF了 文章目录 前言 一、前提准备 二、使用步骤 1.引入库 2.以下是部分代码的作用 总结 提示:操作PDF其实是一件很简单的事情,比一般的CRUD都简单 例如:我们拿到了一个需求,我需要给这个PDF设置一个 电子签名 ( 就是一

    2024年04月23日
    浏览(47)
  • Echarts自定义地图和添加图标

    介绍:由于我司在项目中使用到了Echarts,所以我开了Echarts的相关栏目来分享在使用上的经验。这是本栏目的第一篇文章,需要Echarts相关基础,之后会介绍Echarts的基础,需要的朋友可以关注一下。废话不多说,先看看例子: 先到阿里云的地理小工具获取对应的地图json数据并

    2024年02月09日
    浏览(64)
  • 解决uView添加自定义图标不成功

    自定义图标的添加方法: CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 这里1.0版本和2.0版本教程都是一样的,估计是很长没动过了。 解决步骤: 1.先按照上述链接把图标css文件下载下来,然后把css中的修改成和官方教程中的一样 2. 修改

    2024年02月09日
    浏览(31)
  • 【微信小程序-原生开发】添加自定义图标(以使用阿里图标库为例)

    优点:操作方便,支持多彩图标 缺点:会增加源代码大小 下载 svg 格式的图标图片,放入源码中使用 小程序项目中的路径为 assetsicon美食.svg 优点:不会增加源代码大小 缺点:不支持多彩图标,更新比较麻烦 将图标添加到自己的图标项目中后,生成对应的 css 链接 浏览器打

    2024年02月11日
    浏览(50)
  • 前端Vue自定义等分底部菜单导航按钮 自适应文字宽度 可更改组件位置

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月12日
    浏览(52)
  • elementui el-table-column表头换行,自定义表头以及排序图标的位置放置

    https://www.jb51.net/article/228935.htm // 在需要换行的地方加入换行符 n ,在搭配最底下的white-space样式设置 ⭐️想实现以下效果 ⭐️想实现以下效果 表头文字过长要换行显示,让排序图标位于两行文字右边,居中显示。 现在将解决问题的过程记录一下: 1、首先想到的办法是使用

    2024年02月11日
    浏览(45)
  • 鼠标右键添加自定义Cmd与Powershell【最全 最详细 含图标Icon】

    快捷键 Win+R 打开运行,输入 regedit 进入注册表 Background 的 shell 目录下新建项,取名 OpenCmd 这里的取名就是鼠标实际右键时显示打开cmd的名称,如↓ 1.4.1 OpenCmd下新建 command 项 1.4.2 command项赋值【实际打开cmd的命令值】 至此,基本的右键打开 cmd 的功能实现,下面是附上右键

    2024年04月23日
    浏览(30)
  • PyQT QListWidget 列表项添加、删除与编辑

    PyQT开发图形界面的应用时,QListWidget控件类用于生成列表,可以方便地以可视化方式对列表项进行选择,添加,删除,编辑操作。 如果要处理的数据是2维结构,如2维数组, Pandas DataFrame, 嵌套列表等, 请参考文章:PyQt QTableWidget 表格控件的使用 如果需要可视化处理数据库数

    2024年01月19日
    浏览(44)
  • QListWidget中添加QListWidgetItem的几种形式

    本文介绍QListWidget中添加QListWidgetItem的几种形式: 第一种是直接使用 QListWidgetItem ,第二种是添加一个 widget 进去: 第三种是使用 model : 第四种实质还是添加 widget ,不过是使用 setItemWidget 添加一个自定义的 widget 。 效果图: 工程源码地址:https://gitee.com/gao-yuelong/qtdemo/tree

    2024年02月16日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包