菜单 搜索
首页 前端知识 QTableView设置样式表/选中行颜色， QTableView美化

QTableView设置样式表/选中行颜色， QTableView美化

2024-02-03 12:02:44 前端知识 前端哥 875 79 我要收藏

QTableView设置QSS样式表

    color: white;                                       /*表格内文字颜色*/
    gridline-color: black;                              /*表格内框颜色*/
    background-color: rgb(108, 108, 108);               /*表格内背景色*/
    alternate-background-color: rgb(64, 64, 64);
    selection-color: white;                             /*选中区域的文字颜色*/
    selection-background-color: rgb(77, 77, 77);        /*选中区域的背景色*/
    border: 2px groove gray;
    border-radius: 0px;
    padding: 2px 4px;

只设置此行的这一列的背景颜色，设置成功。

如：item->setBackgroundColor(QColor(0,60,10));//也可以使用qt系统的默认颜色。

设置单元格字体颜色、背景颜色和字体字符：

  QTableWidgetItem *item = new QTableWidgetItem("Apple");

  item->setBackgroundColor(QColor(0,60,10));

  item->setTextColor(QColor(200,111,100));

  item->setFont(QFont("Helvetica"));

  tableWidget->setItem(0,3,item);

/* 表格设置 */
QTableView{  /** QTableView设置 */
    border: none;
    background-color: white;
    selection-background-color: black;
}


QHeaderView::section{         /*表头设置*/
    border: none;
    height:20px;    /*表头高度*/
    color: white;
    font-size: 15px;
    font-weight: 900;
    background-color: rgb(80, 80, 80);
    text-align: center;
}

QTableView::item{  /** 每个单元格设置 */
    background-color: white;
    border: none;
    background-color: rgb(220, 220, 220);  /*交替行，第二行*/
    selection-background-color: white;
    selection-color: black;
    font-family: Consolas;
    font-size: 11px;
    text-align: center;
}
QTableView::item:!alternate:!selected{
    background-color: white;    /*交替行的另一颜色*/
    selection-background-color: rgb(220, 220, 220);  
    selection-color: black;
}
# 如果要显示两种颜色还要在代码中添加
    ui->tableView_name->setShowGrid(false);              //<-----不显示grid
    ui->tableView_name->setAlternatingRowColors(true); //<-----双色显示

 

Qt基础使用

说明：笔记为代码修改方式，value：代表值，tableWidget替代ui->tabelwidget[控件名称]

#include <QTableWidget>

创建一个tablewidget

QTableWidget *tabelWidget = new QTableWidget ;

设置行数

tableWidget->setRowCount(value);

设置列数

tableWidget->setColumnCount(value);

QTableWidget设置表头内容

QStringList header;header<<tr("value")<<tr("value")<<tr("value");tableWidget->setHorizontalHeaderLabels(header);

设置充满表宽度[表格自动横向填充满控件]

tableWidget->horizontalHeader()->setStretchLastSection(true);

设置无边框

tableWidget->setFrameShape(QFrame::NoFrame);

设置不显示格子线

tableWidget->setShowGrid(false); 

去除选中虚线框

tableWidget->setFocusPolicy(Qt::NoFocus);

设置垂直头不可见

tableWidget->verticalHeader()->setVisible(false);

设置水平、垂直滚动条样式

tableWidget->horizontalScrollBar()->setStyleSheet( “[美化内容参照QScrollArea样式美化]” ）；tableWidget->verticalScrollBar()->setStyleSheet(“[美化内容参照QScrollArea样式美化]” ）；

修改表格编辑状态权限

tableWidget->setEditTriggers(QAbstractItemView::value);value常用参数：NoEditTriggers--不能对表格内容进行修改CurrentChanged--任何时候都能对单元格修改DoubleClicked--双击单元格SelectedClicked--单击已选中的内容 AnyKeyPressed--按下任意键就能修改

设置表格选择方式

tableWidget->setSelectionBehavior(QAbstractItemView::value); value常用参数：SelectItems--选中单个单元格SelectRows--选中一行    SelectColumns--选中一列）

单个选中和多个选中的设置

tableWidget->setSelectionMode(QAbstractItemView::value);  value常用参数：NoSelection--不能选择SingleSelection--选中单个目标MultiSelection--选中多个目标ExtendedSelection/ContiguousSelection 的区别不明显，主要功能是正常情况下是单选，但按下Ctrl或Shift键后，可以多选）

表格表头的显示与隐藏

tableWidget->verticalHeader()->setVisible(false);   //隐藏列表头  tableWidget->horizontalHeader()->setVisible(false); //隐藏行表头 

设置表头字体及颜色

//获得水平方向表头的Item对象  QTableWidgetItem *columnHeaderItem = tableWidget->horizontalHeaderItem(0); columnHeaderItem->setFont(QFont("value")); //设置字体  columnHeaderItem->setBackgroundColor(QColor(0,0,0)); //设置单元格背景颜色  columnHeaderItem->setTextColor(QColor(0,0,0)); //设置文字颜色

在单元格里加入控件：

tableWidget->setCellWidget(value x , value y , [你的控件]); 

设置单元格字体颜色、背景颜色和字体字符：

QTableWidgetItem *item = new QTableWidgetItem("显示的文字");item->setBackgroundColor(QColor(0,0,0));item->setTextColor(QColor(0,0,0));item->setFont(QFont("value"));tableWidget->setItem(0,0,item);//所有的单元格都使用tableWidget->setFont(QFont("value"));

合并单元格

//参数为： 要改变单元格的1行数、2列数，要合并的3行数、4列数tableWidget->setSpan(0, 0, 3, 1) ；

设置单元格宽高

tableWidget->setColumnWidth(3,200); //行tableWidget->setRowHeight(3,60); //列//行和列的大小设为与内容相匹配tableWidget->resizeColumnsToContents();tableWidget->resizeRowsToContents();

调整表格行宽

//使列完全填充并平分tableWidget->horizontalHeader()->setResizeMode(QHeaderView::Stretch);//行自适应宽度 tableWidget->verticalHeader()->setResizeMode(QHeaderView::Stretch);//根据内容调整列宽tableWidget->resizeColumnsToContents(); 

设置某列列宽

tableWidget->headerView->resizeSection(0,284);//设置第一列宽

内容清除

tableWidget->clear();//清除所有可见数据（包括表头），行还在tableWidget->clearContents();//只清除表中数据，不清除表头内容tableWidget->setRowCount( column )；//或者直接设置行数为0，则所有行内容清除掉

表格排序，将某列按升序/降序的方式排列

tableWidget->sortByColumn( column , Qt::AscendingOrder);

获取某一格的内容

QString proName = tableWidget->item(row, column)->text();

添加一行

int row = tableWidget->rowCount();//获取表格中当前总行数

 tableWidget->setRowCount(row+1);//加一行
QSS美化

QScrollBar:vertical{    

     width:6px;     
    border-style:flat;   
    border-radius: 4px;   
    border:0px;   
    background: #19191A;
}
QScrollBar::handle:vertical{     
    background: rgba(255,255,255,0.50);   
    border-radius: 4px;   
    width:8px;     
    min-height:91px;     
    border-style:flat;
}
QScrollBar::handle:vertical::hover{     
    background: rgba(255,255,255,0.90);   
    border-radius: 4px;   
    width:8px;
}
QScrollBar::handle:vertical::pressed{     
    background: rgba(255,255,255,0.90);   
    border-radius:4px;   
    width:8px;
}
QScrollBar::sub-page:vertical {   
    background: #19191A;
    border-style:flat;
}
QScrollBar::add-page:vertical {   
    background: #19191A;
    border-style:flat;
}
QScrollBar::add-line:vertical{   
    background: #19191A;
}
QScrollBar::sub-line:vertical {   
    background: #19191A;
}
QScrollBar:horizontal{     
    height:8px;     
    border-style:flat;   
    border-radius: 4px;   
    border:0px;
    background: #19191A;
}
QScrollBar::handle:horizontal{     
    background: rgba(255,255,255,0.50);   
    border-radius: 4px;   
    height:8px;     
    min-width:91px;     
    border-style:flat;
}
QScrollBar::handle:horizontal::hover{     
    background: rgba(255,255,255,0.90);   
    border-radius: 4px;   
    height:8px;
}
QScrollBar::handle:horizontal::pressed{     
    background: rgba(255,255,255,0.90);   
    border-radius:4px;   
    height:8px;
}
QScrollBar::sub-page:horizontal {   
    background: #19191A;   
    border-style:flat;
}
QScrollBar::add-page:horizontal {   
    background: #19191A;   
    border-style:flat;
}
QScrollBar::sub-line:horizontal {   
    background: #19191A;
}
QScrollBar::add-line:horizontal{   
    background: #19191A;
}
ui->tableWidget->verticalScrollBar()->setStyleSheet("QScrollBar:vertical { width: 5px; }");
QTableWidget{   
    background: #303033;
}
QTableWidget::item{   
    color:rgba(255,255,255,150);   
    background: #303033;   
    text-align:center;
}
QTableWidget::item:hover{   
    color:#FFFFFF;   
    background: #4B4B4D;
}
QTableWidget::item:selected{   
    color:#FFFFFF;   
    background: #4B4B4D;
}
QHeaderView::section,QTableCornerButton:section{     
    text-align:center;   
    padding:3px;     
    margin:0px;     
    color:#DCDCDC;     
    border:1px solid #242424;     
    border-left-width:0px;     
    border-right-width:1px;     
    border-top-width:0px;     
    border-bottom-width:1px;     
    background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #646464,stop:1 #525252);
}
QHeaderView::section:selected{     
    color:#FFFFFF;     
    border:1px solid #242424; 
}

转载请注明出处或者链接地址：https://www.qianduange.cn//article/1150.html
标签
element-ui
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

借用jQuery发送Http请求的实现（内附源码）

2024-02-15 14:02:07

jQuery ---- 插件

2024-02-15 14:02:06

Python入门自学进阶-Web框架——16、Django登录/注册

2024-02-15 14:02:03

html5 简单实用好看的滑动开关Jquery css带效果图（无bug）

2024-02-15 14:02:00

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

Jquery锚点导航定位、css设置头部左侧固定，右侧内容滚动

2024-02-15 14:02:58

web前端JQuery当鼠标浏览到对应的地方盒子颜色相对改变

2024-02-15 14:02:58

原生JavaScript技术，jQuery实现下拉菜单

2024-02-15 14:02:52

在vue3项目中如何使用echarts

2024-02-15 14:02:45

BI可视化报表工具-SpringReport

2024-02-15 14:02:34

大家推荐的文章
1

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
2

移动端css布局大全

2024-02-06 15:02:421000
3

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
4

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
5

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
6

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
7

尚硅谷css3笔记

2024-02-13 10:02:44998
8

如何利用浏览器测试跨域

2024-02-11 10:02:28998
9

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
10

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！