首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在QTableView行上垂直居中对齐QProgressBar

的方法是使用QItemDelegate来自定义单元格的显示方式。具体步骤如下:

  1. 创建一个自定义的QItemDelegate类,继承自QStyledItemDelegate。
代码语言:txt
复制
class ProgressBarDelegate : public QStyledItemDelegate
{
public:
    ProgressBarDelegate(QObject* parent = nullptr)
        : QStyledItemDelegate(parent)
    {
    }

    void paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const override
    {
        if (index.data().isValid() && index.column() == targetColumn) {
            int progress = index.data().toInt();

            QStyleOptionProgressBar progressBarOption;
            progressBarOption.rect = option.rect;
            progressBarOption.minimum = 0;
            progressBarOption.maximum = 100;
            progressBarOption.progress = progress;
            progressBarOption.text = QString("%1%").arg(progress);
            progressBarOption.textVisible = true;
            progressBarOption.textAlignment = Qt::AlignCenter;

            QApplication::style()->drawControl(QStyle::CE_ProgressBar, &progressBarOption, painter);
        }
        else {
            QStyledItemDelegate::paint(painter, option, index);
        }
    }

    QSize sizeHint(const QStyleOptionViewItem& option, const QModelIndex& index) const override
    {
        if (index.data().isValid() && index.column() == targetColumn) {
            return QSize(100, option.rect.height());
        }

        return QStyledItemDelegate::sizeHint(option, index);
    }

private:
    int targetColumn = 1; // 设置对应的进度条所在的列号
};
  1. 在使用QTableView的地方,设置自定义的QItemDelegate。
代码语言:txt
复制
QTableView* tableView = new QTableView(this);
QStandardItemModel* model = new QStandardItemModel(this);
tableView->setModel(model);

// 设置进度条对应列的委托
ProgressBarDelegate* progressBarDelegate = new ProgressBarDelegate(this);
tableView->setItemDelegateForColumn(1, progressBarDelegate);

以上就是在QTableView行上垂直居中对齐QProgressBar的方法。使用自定义的QItemDelegate,可以根据需要灵活地定制单元格的显示效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

24.QTableView函数使用,右击菜单实现

QStandardItem("Age")); model.horizontalHeaderItem(0)->setFont(QFont("Helvetica",20,50)); //设置标题字体 /*设置表头垂直标题...model.setItem(1,0,new QStandardItem("C")); model.item(0,1)->setTextAlignment(Qt::AlignCenter); //设置条目居中对齐...model.sort(0,Qt::DescendingOrder); 对于QStandardItem的setData()成员 函数的第二个参数role 是模型数据角色  当role值不同时,则显示视图上的方式也会不同...BackgroundRole      8     设置模型数据的背景色(QBrush) Qt::ForegroundRole      9     设置模型数据的前景色,比如字体(QBrush) 实现右击菜单 当用户QTableView...view.currentIndex().isValid()==true) { menu.exec(cursor().pos()); //在当前鼠标位置运行菜单

1.8K40

Python Qt GUI设计:QTableView、QListView、QListWidet、QTableWidget、QTreeWidget和QTreeWidgetltem表格和树类(提升篇—1)

1、QTableView通常情况下,一个应用需要和一批数据(比如数组、列表)进行交互,然后以表格的形式输出这些信息,这时就要用到QTableView类了。...QtableView中可以使用自定义的数据模型来显示内容,通过setModel来绑定数据源。...QTableView控件可以绑定一个模型数据用来更新控件的内容,可用的模式如下表所示: 通过示例了解QTableView类的使用方法,效果如下所示: 实现代码如下所示: from PyQt5.QtWidgets...QTableWidget类中的常用方法如下表所示: 编辑规则的枚举值类型如下表所示: 表格的选择行为的枚举值类型如下表所示: 单元格文本的水平对齐方式如下表所示: 单元格文本的垂直对齐方式如下表所示...: 如果要设置水平和垂直对齐方式,比如在表格空间内、下、左、右居中对齐,那么只要使用Qt.AlignHCenter和Qt.AlignVCenter 即可。

3.9K30
  • Python Qt GUI设计:QTableView、QListView、QListWidet、QTableWidget、QTreeWidget和QTreeWidgetltem表格和树类(提升篇—1)

    1、QTableView通常情况下,一个应用需要和一批数据(比如数组、列表)进行交互,然后以表格的形式输出这些信息,这时就要用到QTableView类了。...QtableView中可以使用自定义的数据模型来显示内容,通过setModel来绑定数据源。...QTableView控件可以绑定一个模型数据用来更新控件的内容,可用的模式如下表所示: 通过示例了解QTableView类的使用方法,效果如下所示: 实现代码如下所示: from PyQt5.QtWidgets...QTableWidget类中的常用方法如下表所示: 编辑规则的枚举值类型如下表所示: 表格的选择行为的枚举值类型如下表所示: 单元格文本的水平对齐方式如下表所示: 单元格文本的垂直对齐方式如下表所示...: 如果要设置水平和垂直对齐方式,比如在表格空间内、下、左、右居中对齐,那么只要使用Qt.AlignHCenter和Qt.AlignVCenter 即可。

    3.1K20

    用Qt写软件系列三:一个简单的系统工具之界面美化

    窗口内容布局       由上面的规划图可以看出,内容布局由三个部分组成上方(top layout)的编辑框、两个按钮,中间及下面的两个QTableView。...QTableView的上下文菜单,则需要重写contextMenuEvent()实现。上下文的菜单项背景色仍然可以用QSS进行控制。另外,QTableView还有一个单元格对齐的问题。...QTableView的默认显示都是左对齐。这时,如果要想某一列都是居中对齐该怎么办那?答案是从QStandardItemModel类派生一个子类,重写虚函数data()。...这个data()函数带两个参数,第一个参数可以控制那几列()怎么对齐。第二个参数是一个Role类型,用于区分不同的数据类型。因为Qt里面的数据分很多种: ?      ...我们得指明,当数据是用来显示单元格中的时候,我们才设置对齐方式啊。不然的话就会乱套了。总之,QSS和2D绘图用好了,界面的效果也会慢慢炫起来。如果自己能够做出精美的界面素材,那么更加是锦上添花了。

    5.8K70

    PyQt5高级界面控件之QTableWidget(四)

    将单元格内的内容沿单元格的右边缘对齐 Qt.AlignHCenter 可用空间中,居中显示水平方向上 Qt.AlignJustify 将文本可用空间内对齐,默认从左到右 单元格文本垂直对齐方式...选项 描述 Qt.AlignTop 与顶部对齐 Qt.AlignBottom 与底部对齐 Qt.AlignVCenter 可用空间中,居中显示垂直方向上 Qt.AlignBaseline 与基线对齐...如果要设置水平和垂直方向对齐方式,比如在表格空间内上下,左右居中对齐,那么只要使用Qt,AlignHCenter和Qt,AlignVCenter即可 实例:QTableWidget的基本用法 import...QTableView类继承的,用来设置是否显示表格的分割线,默认显示分割线 #表格中不显示分割线 tableWidget.setShowGrid(False) 优化8:为单元格添加图片 还可以单元格内添加图片并显示图片描述信息...单元格文本垂直对齐方式 实例:QTableWidget的基本用法 代码分析 实例二:表格中快速定位到指定 实例三:QTableWidget的高级用法 实例四:单元格内图片的显示 实例五:支持右键菜单

    3.8K10

    python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性

    将单元格内的内容沿单元格的右边缘对齐 Qt.AlignHCenter 可用空间中,居中显示水平方向上 Qt.AlignJustify 将文本可用空间内对齐,默认从左到右 单元格文本垂直对齐方式...选项 描述 Qt.AlignTop 与顶部对齐 Qt.AlignBottom 与底部对齐 Qt.AlignVCenter 可用空间中,居中显示垂直方向上 Qt.AlignBaseline 与基线对齐...如果要设置水平和垂直方向对齐方式,比如在表格空间内上下,左右居中对齐,那么只要使用Qt,AlignHCenter和Qt,AlignVCenter即可 QTableWidget的基本用法实例 import...(0,0,newItem) 优化1:设置垂直方向表格头标签 TableWidget.setVerticalHeaderLabels([‘1’, ‘2’, ‘3’, ‘4’]) 效果如下...优化7:表格中不显示分割线 QTableWidget类的setShowGrid()函数是从QTableView类继承的,用来设置是否显示表格的分割线,默认显示分割线 #表格中不显示分割线 tableWidget.setShowGrid

    9.9K24

    flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

    1.2 align-items(用于垂直对齐) align-items 决定交叉轴(通常是垂直方向)子元素如何对齐。...flex-end:子元素交叉轴的末端对齐。 center:子元素交叉轴垂直居中对齐。 baseline:子元素以其文本基线对齐。...传统布局中,margin: auto; 主要用于水平居中对齐,不适用于垂直居中。因为普通流布局的垂直方向是由文档流控制的,不支持类似 Flexbox 中的自动调整行为。...*/ } 相比之下, Flexbox 布局中,margin: auto; 具有更多的灵活性,可以同时实现水平和垂直居中对齐。...使用 space-around 时如果最后一的元素数量不满,元素会在行中均匀分布,导致它们集中中间,而不是靠左或对齐其他。 大家遇到这些情况时是不是就在考虑换用 grid 布局了呢?

    9910

    五、Web App 基础可视组件属性(IVX 快速开发教程)

    文章目录 五、基础可视组件属性 5.1 页面属性 5.1.1 背景颜色 5.1.2 背景图片 5.1.3 垂直对齐 5.1.4 水平对齐 5.2 属性 5.2.1 、列的宽度、高度 5.2.2 、...垂直对齐 拥有 4 个可选项依次为顶部、居中、底部。...在此我们讲解常用的 3 个可选项顶部、居中、底部: 将 垂直对齐 设置为 顶部,页面中的 可视对象 将会从顶部依次往下进行显示;将 垂直对齐 设置为 居中,那么页面中的 可视对象 将会从页面的 垂直中部...水平对齐有 3 个对齐方式,依次是靠左、居中、靠右这三个方式: 靠左 对齐指第 1 个元素横排显示为左侧、居中则在中部、靠右则在右部开始显示: 5.2 属性 的常用属性有以下几点: 宽度...高度 外边距 下外边距 左外边距 右外边距 内边距 下内边距 边框宽度 边框颜色 边框类型 边框位置 5.2.1 、列的宽度、高度 、列的宽度、高度可以设置成百分比或者具体的像素, 与 列 是元素的容器

    4K20

    最全总结,CSS实现居中的方式全部方式

    ,font 块级元素 总是开始,占据一整行 高度,高以及外边距和内边距都可控制 宽度始终与浏览器的宽度一样,与内容无关 可以容纳行内元素和其他块级元素 常用的块级元素:div,p,table,...,其中justify-content用于设置弹性盒子元素主轴(横向)方向上的对齐方式。...: 45px; } image.png flex-direction 决定主轴的方向(即项目的排列方向) flex-wrap 如果一条轴线排列不下,如何换行 justify-content 定义了项目主轴对齐方式...align-items 定义项目交叉轴如何对齐 2、垂直居中 2.1、单行行内元素垂直居中 通过设置内联元素的高度(height)和高(line-height)相等,从而使元素垂直居中。...利用2D变换,水平和垂直方向都反向平移宽高的一半,从而使元素水平垂直居中

    2.9K10

    计算机科学里最大的难题:居中显示

    我们看到: 或者: 甚至是: 显然,知识和知识的应用之间,有些东西丢了。 理论,理论和实践之间并没有什么不同。遗憾的是,我们生活在实践中。 让我们看一下到底发生了什么。...许多公司,无论大小,都未能免于文本居中的问题。 高 除了字体参数,下一个影响完美居中的问题是高。 高是一个复杂的话题。...在这方面,Vincent De Oliveira 曾写过一篇经典的文章“深入理解 CSS:字体参数、高和垂直对齐”。 下面是一些实际的例子。...水平居中 你可能会想,只有垂直居中才这么难。...大体,Segoe UI 就是 Github Windows 看上去像下面这样的原因: 解决方法很简单:收紧边界框,居中就是小事一桩了: 如果你使用 Figma,也可以这样做了(虽然不是默认的):

    8410

    计算机科学里最大的难题:居中显示

    我们看到: 或者: 甚至是: 显然,知识和知识的应用之间,有些东西丢了。 理论,理论和实践之间并没有什么不同。遗憾的是,我们生活在实践中。 让我们看一下到底发生了什么。...许多公司,无论大小,都未能免于文本居中的问题。 高 除了字体参数,下一个影响完美居中的问题是高。 高是一个复杂的话题。...在这方面,Vincent De Oliveira 曾写过一篇经典的文章“深入理解 CSS:字体参数、高和垂直对齐”。 下面是一些实际的例子。...水平居中 你可能会想,只有垂直居中才这么难。...大体,Segoe UI 就是 Github Windows 看上去像下面这样的原因: 解决方法很简单:收紧边界框,居中就是小事一桩了: 如果你使用 Figma,也可以这样做了(虽然不是默认的):

    10410

    CSS垂直居中的七个方法

    七种垂直居中的方法 设定高(line-height) 添加伪元素 calc动态计算 使用表格或假装表格 转变 绝对定位 使用Flexbox 1.设定高(line-height) 设定高是垂直居中最简单的方式...,因为是高,所以会在行内元素的上下都加上行高的1/2,所以就垂直居中了!....greenbox { width:30px; 高度:100%; 背景:#0c0; 显示:行内块; 垂直对齐:中间; } 但是我们总不能每次要垂直居中,都要添加一个奇怪的div在里头吧!...HTML里面常用的DOM里头,要实现垂直居中是相当容易的,只需要下一vertical-align:middle就可以,为什么呢?...; 颜色:#fff; font-size:12px; 高:50px; 文本对齐居中; 背景:#c00; } .like-table div { background:#069; }

    2.8K30

    学习纲要:CSS 布局

    知道如何让文字水平居中。 知道如何让单行和多行文字垂直居中。...inline-block 应不应该使用inline-block代替float 如何解决inline-block元素的空白间距 inline-block 布局写法示例 十步图解CSS的position 元素的垂直居中的方法...元素的水平居中的方法 习题 1 用尽可能多的方法实现如下功能 多个元素 多个元素水平居中对齐 多个元素水平两端对齐 多行多个元素水平两端对齐 多个元素,某个元素占据剩余部分 多个元素水平垂直居中对齐...2 用尽可能多的方法实现如下功能 元素内的行内元素的水平居中 单个宽度固定的块级元素的水平居中 单个宽度不固定的块级元素的水平居中 单行文本的垂直居中 高度不固定的元素的垂直居中

    53410

    CSS十问之元素居中

    ,遇事不决「flex/grid」 ❞ 文章概要 水平居中 垂直居中 水平&垂直居中 知识点简讲 元素分类 CSS世界中,基本分为「两类」元素 块级元素 行内元素 常见的块级元素有div/li/table...「行距」: 指一底线到下一顶线的垂直距离,即第一粉线和第二绿线间的垂直距离。...同时,容器设置justify-content,该属性定义了项目「主轴」对齐方式。...垂直居中 行内元素-垂直居中 针对行内元素的垂直居中,有分两种情况 「单行」垂直居中 「多行」垂直居中 单行垂直居中 例如,现在希望某个行内元素的文案垂直方向居中显示。...元素水平垂直居中 针对处理这类问题,我们可以通过将 「水平居中」和「垂直居中」合并起来。可以有(M*N)的解法。但是,平时工作中,大致可分为四类。

    1.7K10

    css布局 - 垂直居中布局的一百种实现方式(更新中...)

    帮多行文本找一个继父来领养他,让继父弥补父元素给他带来的伤害(高和水平居中对齐的样式修改) 2. margin负边距简单处理一下底部小“裂痕” 三、父元素高度 不 固定时,单行文本 | 图片的绝对垂直居中...新增兄弟节点实力辅助,目标元素轻松王者 四、父元素高度 不 固定时,多行文本的绝对垂直居中 1....左50%方位值,先让左上角处于视图中心点  3. translate -50%偏移,实现自动化偏移相应数值到中心点 七、图片和多行文本的 两列垂直居中(经典布局难题) 1. 两端对齐交给爹地 2....于是,一不做二不休,我直接使用margin负值让元素再之前的基础向上4像素,竟真的实现了绝对的垂直居中。 ?...但是这种布局方式毕竟拘束,实现垂直居中后,还需要一大堆的代码把tabel的样子抹掉。 所以知道有这种方法,平时根本不用也没必要用,我也不去实践了。

    3.4K10

    动画 | 一文掌握 Flex 布局

    第三种实现方式: 使用 line-height 设置父容器高的方式进行垂直居中,但是只适用单行文本。...2 认识 Flex 布局 因为我们再用传统布局的时候,对齐元素进行垂直居中,代码特别的麻烦,为了更好的解决这个问题,Flex 布局就规定设置横、纵两个方向,我们无论水平排列还是垂直排列的时候,这样写起来更方便了...3.3 justify-content 之前我们传统布局的水平居中有这几种方式: ? 但是 Flex 布局几种水平位置的布局。这样用起来让页面的布局更加的灵活、多变。 ?...通过这个align-items属性值,很轻松的实现垂直居中。 (1)flex-start:交叉轴的起点对齐。 ? (2)flex-end:交叉轴的终点对齐。 ?...(3)center:交叉轴的中点对齐。 ? (4)baseline:项目的第一文字的基线对齐。 ? (5)stretch:如果项目未设置高度或设为auto,将占满整个容器的高度。 ?

    83941

    17个场景,带你入门CSS布局

    两个元素是位置。 下面,我们从大小和位置两个方面,结合场景来看CSS布局。 大小 大小指元素的占的空间。空间包含水平空间和垂直空间。...代码如下: text-align: left; // 左对齐 text-align: center; // 居中对齐 text-align: right; // 右对齐 场景08 文字的垂直居中 单行文本和多行文本的垂直居中的处理方式不一样...单行文本的垂直居中。只需设置高度等于高。如 height: 25px; line-height: 25px; 多行文本的垂直居中可以用 "场景12 多个元素的垂直居中" 中的方法。...相邻元素间距离,第一个元素距首的间距,最后一个元素距行尾的间距均相同。注意:IE 不支持该样式。 场景12 多个元素的垂直居中 用 Flex 布局可以实现多个元素的垂直居中。...实现单行文字的垂直居中,只需设置高度等于高。 一个固定宽度元素的水平居中,只需设置宽度值和左右margin值为auto。 Flex布局是目前主流的布局技术。

    2.6K20
    领券