【qt】QListWidget 组件

QListWidget 组件

一.QListWidget的用途

QListWidget 是一个用于显示列表项的组件,每个列表项通常由一个图标和一个文本组成。用户可以通过单击或选择列表项来与其进行交互

二.界面设计

我们还是来跟着项目来一起做,边做边学边快来!

目标图:

首先添加素材,需要的可以dd我。

然后需要用到 action 前面有讲过,不懂的可以去看界面设计哪里

工具栏这个地方可以调图标大小:

还需要用到QListWidget 组件

不用状态栏的话,可以将其删除

接着就是一些布局。

三.QListWidget的添加

1.界面添加

双击ListWidget 即可添加:

2.代码添加

这个是大头,来吧我们开始吧,先定义一个initUI的函数,记得姚在窗口的构造函数中调用哦。

因为用代码进行添加时姚用到列表项,所有我们要先来设置一下列表项。

四.列表项的设置

1.文本

QListWidgeItem就是列表项,我们可以对其添加文本

然后就可以添加到我们的ListWidget

cpp 复制代码
void MainWindow::initUI()
{
    QStringList list={"语文","美术","体育","音乐","地球物理学","数学","英语"};
    for(int i=0;i<list.count();i++)
    {
        QListWidgetItem *item=new QListWidgetItem;//列表项
        item->setText(list[i]);
        ui->listWidget->addItem(item);
    }

}

运行结果:

对了,可以把我们刚刚添加的恋爱课程去掉;

cpp 复制代码
void MainWindow::initUI()
{
    ui->listWidget->clear();//可以清空
    QStringList list={"语文","美术","体育","音乐","地球物理学","数学","英语"};
    for(int i=0;i<list.count();i++)
    {
        QListWidgetItem *item=new QListWidgetItem;//列表项
        item->setText(list[i]);
        ui->listWidget->addItem(item);
    }
}

就一行代码,运行结果:

2.图标

现在我们来添加灵魂就是图标。

cpp 复制代码
void MainWindow::initUI()
{
    ui->listWidget->clear();//可以清空
    QStringList list={"语文","美术","体育","音乐","地球物理学","数学","英语"};

    QIcon icon;
    icon.addFile(":/images/image/class.png");//设置图标到图标变量icon中

    for(int i=0;i<list.count();i++)
    {
        QListWidgetItem *item=new QListWidgetItem;//列表项
        item->setText(list[i]);
        item->setIcon(icon);//添加图标
        ui->listWidget->addItem(item);
    }
}

运行结果:

3.复选框

cpp 复制代码
item->setCheckState(Qt::Unchecked);//设置未勾选的复选框

运行结果:

4.列表大小

还可以对列表项的大小进行设置

cpp 复制代码
item->setSizeHint(QSize(200,80));

五.字体和图标的设置

1.字体:

对于ListWidget里面列表项的字体,我们可以继续设置。

cpp 复制代码
    QFont font=ui->listWidget->font();
    font.setPointSize(30);
    ui->listWidget->setFont(font);

运行结果:

2.图标:

图标的大小我们同样可以通过listWidget来进行设置。

cpp 复制代码
ui->listWidget->setIconSize(QSize(40,40));

运行结果:

六.设置显示模式

1.图标

对图标模式用action转到槽

cpp 复制代码
void MainWindow::on_actionIconMode_triggered()
{
    ui->listWidget->setViewMode(QListView::IconMode);//设置为图标模式
}

运行结果:

但是感觉上下帖的好紧,我们可以用setSpacing来进行留白

cpp 复制代码
ui->listWidget->setSpacing(20);//对四周都会产生留白效果

运行结果:

现在还有一个问题就是当我们缩小框的时候,列表项不能够自适应

就是这样:

解决方案:

cpp 复制代码
ui->listWidget->setResizeMode(QListView::Adjust);//可以自适应窗口大小

运行结果:

2.列表

对列表模式action用转到槽:

cpp 复制代码
void MainWindow::on_actionListMode_triggered()
{
    ui->listWidget->setViewMode(QListView::ListMode);//设置为列表模式
    //ui->listWidget->setSpacing(10);对四周都会产生留白效果
}

运行结果:

七.其他功能实现

1.删除

cpp 复制代码
void MainWindow::on_actionDelete_triggered()
{
    int count=ui->listWidget->count();//先拿列表项的个数
    for(int i=count-1;i>=0;i--)//从后往前删,不然索引会错误
    {
        //如果列表项的复选框选中就进行删除
        if(ui->listWidget->item(i)->checkState()==Qt::Checked)
        {
            auto item=ui->listWidget->takeItem(i);//删除会返回这个值的指针,但是内存没有真正的删除
            delete item;
        }
    }
}

数学英语被我删了,运行结果:

2.全选

item可以拿到列表项,然后进行设置

cpp 复制代码
void MainWindow::on_actionSelectAll_triggered()
{
    int count=ui->listWidget->count();
    for(int i=0;i<count;i++)
    {
        ui->listWidget->item(i)->setCheckState(Qt::Checked);
    }
}

运行结果:

3.反选

先用item拿到列表项

然后检查复选框的状态,然后进行相反的设置。

cpp 复制代码
void MainWindow::on_actionFan_triggered()
{
    int count=ui->listWidget->count();
    for(int i=0;i<count;i++)
    {
        auto item=ui->listWidget->item(i);
        if(item->checkState()==Qt::Checked)
        {
            ui->listWidget->item(i)->setCheckState(Qt::Unchecked);
        }
        else
        {
            ui->listWidget->item(i)->setCheckState(Qt::Checked);
        }
    }
}

运行结果:

4.add添加

对按钮进行转到槽,然后检查文本框是否为空
trimmed可以排除收尾的空格,避免输入无效空格

cpp 复制代码
void MainWindow::on_pushButton_clicked()
{
    //如果文本不为空
    if(ui->lineEdit->text().trimmed().length()>0)
    {
        QListWidgetItem *item=new QListWidgetItem;
        item->setText(ui->lineEdit->text().trimmed());
        QIcon icon;
        icon.addFile(":/images/image/class.png");
        item->setIcon(icon);
        item->setCheckState(Qt::Unchecked);
        ui->listWidget->addItem(item);
    }

}

运行结果:

八.右键快捷菜单

1.自定义菜单设置

cpp 复制代码
 ui->listWidget->setContextMenuPolicy(Qt::CustomContextMenu);//可以自定义菜单

将上下文菜单策略设置为自定义菜单策略。在这种策略下,当用户在该部件上右击时,不会自动弹出默认的上下文菜单,而是需要手动编写代码来定义自己的上下文菜单。

2.转到槽

选择这个信号

3.创建菜单

cpp 复制代码
QMenu *menu=new QMenu(this);

4.添加菜单项

cpp 复制代码
    menu->addAction(ui->actionIconMode);
    menu->addAction(ui->actionListMode);
    menu->addSeparator();//添加分割线
    menu->addAction(ui->actionDelete);

7.显示菜单

cpp 复制代码
menu->exec(QCursor::pos());

8.删除菜单

cpp 复制代码
 delete menu;

总的:

cpp 复制代码
void MainWindow::on_listWidget_customContextMenuRequested(const QPoint &pos)
{
    
    menu->addAction(ui->actionIconMode);
    menu->addAction(ui->actionListMode);
    menu->addSeparator();//添加分割线
    menu->addAction(ui->actionDelete);
    menu->exec(QCursor::pos());
    delete menu;
}

运行结果:

九.工具按钮

1.拖拉工具按钮

2.添加菜单

cpp 复制代码
    QMenu *menu=new QMenu;
    menu->addAction(ui->actionIconMode);
    menu->addAction(ui->actionListMode);
    menu->addAction(ui->actionDelete);
    ui->toolButtonMenu->setMenu(menu);

3.弹出方式

cpp 复制代码
 ui->toolButtonMenu->setPopupMode(QToolButton::InstantPopup);

4.默认子菜单

cpp 复制代码
ui->toolButtonMenu->setDefaultAction(ui->actionIconMode);

5.显示样式

cpp 复制代码
ui->toolButtonMenu->setToolButtonStyle(Qt::ToolButtonTextBesideIcon);

运行结果:

十.总结

对于QListWidget 的组件,我们最重要的一点是往里面添加的是列表项ListWidgetItem ,这又是一种类型。

因此我们要注意那些接口是用在列表项的,那些是用在列表的。

冰冻三尺,非一日之寒

相关推荐
每次的天空10 分钟前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
苦夏木禾12 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
重庆小透明17 分钟前
力扣刷题记录【1】146.LRU缓存
java·后端·学习·算法·leetcode·缓存
超级土豆粉20 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
wei_shuo1 小时前
飞算 JavaAI 开发助手:深度学习驱动下的 Java 全链路智能开发新范式
java·开发语言·飞算javaai
熊猫钓鱼>_>1 小时前
用Python解锁图像处理之力:从基础到智能应用的深度探索
开发语言·图像处理·python
小小小小王王王2 小时前
求猪肉价格最大值
数据结构·c++·算法
GO兔2 小时前
开篇:GORM入门——Go语言的ORM王者
开发语言·后端·golang·go
好开心啊没烦恼2 小时前
Python 数据分析:numpy,抽提,整数数组索引与基本索引扩展(元组传参)。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy·pandas
岁忧2 小时前
(LeetCode 面试经典 150 题 ) 58. 最后一个单词的长度 (字符串)
java·c++·算法·leetcode·面试·go