QTableWidget通用初始化设置（内容自适应）以及QScrollBar样式设置

老赵的博客

已于 2024-12-13 15:35:14 修改

阅读量3.4k

点赞数 4

分类专栏： QT 文章标签： qt ui 开发语言

于 2022-06-13 11:39:33 首次发布

本文链接：https://blog.youkuaiyun.com/sinat_20962951/article/details/125257143

版权

QT 专栏收录该内容

43 篇文章

订阅专栏

可直接使用，不会出现某一列宽，某一列窄的情况

    ui->tableWidget->setColumnCount(13);   //设置列数
    ui->tableWidget->setContextMenuPolicy(Qt::CustomContextMenu);

    //右键
    m_tabMenu = new QMenu(ui->tableWidget);
    action= new QAction("展示最近数据",this);
    m_tabMenu->addAction(action);
    connect(ui->tableWidget, SIGNAL(customContextMenuRequested(QPoint)), this, SLOT(slot_DL_RcOnTw(QPoint)));
    connect(action,SIGNAL(triggered(bool)),this,SLOT(slotActionInsert()));

    //设置表头
    QStringList header1;
    header1<<QStringLiteral("首次时间")<<QStringLiteral("最近更新时间")<<QStringLiteral("调制方式")<<QStringLiteral("类型")<<QStringLiteral("个数")<<QStringLiteral("plv")
          <<QStringLiteral("类型")<<QStringLiteral("个数")<<QStringLiteral("us")
         <<QStringLiteral("s")<<QStringLiteral("功率/dBm")<<QStringLiteral("带宽/MHz")
        <<QStringLiteral("角度/deg");
    ui->tableWidget->setHorizontalHeaderLabels(header1);

    ui->tableWidget->horizontalHeader()->setFixedHeight(23); //设置表头的高度
    QFont font1;
    font1.setBold(true);
    ui->tableWidget->horizontalHeader()->setFont(font1);//设置表头字体加粗
    //设置table的水平滚动条
    ui->tableWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOn);

    //设置列宽
    ui->tableWidget->horizontalHeader()->resizeSection(0, 100); //设置表头第1列的宽度

    //设置列宽可拖动
    ui->tableWidget->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);    //x先自适应宽度
    ui->tableWidget->horizontalHeader()->setSectionResizeMode(0, QHeaderView::ResizeToContents);

    ui->tableWidget->horizontalHeader()->setSectionResizeMode(QHeaderView::Interactive);
    ui->tableWidget->verticalHeader()->setSectionResizeMode(QHeaderView::Interactive);
    ui->tableWidget->horizontalHeader()->setStretchLastSection(true);//最后一格靠边
    //ui->tableWidget->horizontalHeader()->setSectionResizeMode(0,QHeaderView::ResizeToContents);//列宽自适应内容

    ui->tableWidget->verticalHeader()->setDefaultSectionSize(20); //设置每行高度
    ui->tableWidget->setSelectionBehavior(QAbstractItemView::SelectRows);         //整行选择，设置选择行为时每次选择一行
    ui->tableWidget->setSelectionMode(QAbstractItemView::SingleSelection);         //只能选择一行
    //点击表时不对表头行光亮（获取焦点）解决表头出现塌陷的问题，如颜色变化，字体变粗等
    ui->tableWidget->horizontalHeader()->setHighlightSections(false);
    ui->tableWidget->setEditTriggers(QAbstractItemView::NoEditTriggers);

追加：

【QT界面设计】 QTableWidge常用方法及样式设计（QSS）_qt_雪易-开放原子开发者工作坊

补充：

1. 表头设置

QHeaderView::section /* 标题的样式设置*/
{
font-family: "Microsoft YaHei";
font-size: 12px;
font-style: normal;
font-weight: 400;
color: #FFFFFF; /* 白色文本 */
background-color: #4169E1; /* 蓝色背景 */
border: 0.5px solid #FFFFFF;/*可选：设置表头标题之间边框颜色会失效*/
}

QTableWidget QTableCornerButton::section /* 左上角文字和样式设置*/
{
color: white;/*文字颜色*/
background-color: #1E1E1E;/*背景色*/
border: 0.5px solid #808080;/*边框*/
border-radius:0px;/*边框圆角*/
border-color: #808080;/*边框颜色*/
font: bold 11pt;/*字体大小*/
padding:12px 0 0 10px;/*内边距*/
}

QTableWidget::item
{
background-color: #ADD8E6;
height: 30px;
width: 80px;
font-size: 12pt;
font-family: Arial;
color: #34495E;
}

QTableWidget::item:selected
{
background-color: #6495ED;
color:#FFFFFF;
}

QTableWidget
{
border: 1px solid #DADADA;
gridline-color: #FFFFFF;

}

2. 滑块样式设置： icon 自己网上找，成品如下：

Qt QScrollBar滚动条样式设置_qt 设置表格滚动条没有上下头-优快云博客

QT QTableView表格左上角样式_qtableview左上角颜色-优快云博客

/*滑块区域*/

QScrollArea
{
border: 0px solid;
border-right-width: 1px;
border-right-color: #f5f5f7;
background-color: #FFFFFF;
}
/* 滚动条整体 */
QScrollBar:vertical {
border: 1px solid white;
background:white;
width:20px; /* 宽度 */
margin: 22px 0 22px 0;
}

/* 滑块 */
QScrollBar::handle:vertical {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
stop: 0 rgb(169,169,169), stop: 0.5 rgb(169,169,169), stop:1 rgb(169,169,169));
min-height: 20px;
border: none;
}

/* 滑块悬停时 */
QScrollBar::handle:vertical:hover {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
stop: 0 rgb(105, 105, 105), stop: 0.5 rgb(105, 105, 105), stop:1 rgb(105, 105, 105));
}

/* 上下箭头按钮 */
QScrollBar::sub-line:vertical, QScrollBar::add-line:vertical {
border: 1px solid white;
background-color: white;
height: 20px;
subcontrol-origin: margin;
}

/* 上箭头 */
QScrollBar::sub-line:vertical {
subcontrol-position: top;
}

/* 下箭头 */
QScrollBar::add-line:vertical {
subcontrol-position: bottom;
}

/* 箭头图标
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
border: 1.59863px solid #999999;
width: 3px;
height: 3px;
background: white;
}*/
QScrollBar::up-arrow:vertical {
image: url(:/Blue_Surveillance/Resource/ResourceWnd/Arrow_up.png); /* 替换为你的上箭头图片路径 */
}

/* 下箭头 */
QScrollBar::down-arrow:vertical {
image: url(:/Blue_Surveillance/Resource/ResourceWnd/Arrow_down.png); /* 替换为你的下箭头图片路径 */
}

/* 悬停时的箭头图标
QScrollBar::up-arrow:vertical:hover, QScrollBar::down-arrow:vertical:hover {
border: 1.59863px solid #666666;
}*/

/* 按钮不可用时 */
QScrollBar::sub-line:vertical:disabled, QScrollBar::add-line:vertical:disabled {
background: none;
}

/* 滑块之间的区域 */
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}

以上均为在qss中使用，将对象setObjectName之后，在QScrollBar后加 #objectName, 即可在qss中设置指定样式。以上qss在另一个工程上出现了问题，最后结合上边链接的大佬博客修正完美之后的版本如下：

/* 滚动条整体 */
QScrollBar#AlarmTableScrollbar::vertical {
    border: none;
    background:#FDF5E6;
    width:15px; /* 宽度 */
    margin:22 0 22 0;
}

/* 滑块 */
QScrollBar#AlarmTableScrollbar::handle:vertical {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
    stop: 0 rgb(169,169,169), stop: 0.5 rgb(169,169,169), stop:1 rgb(169,169,169));
    min-height: 30px;
    border: none;
}

/* 滑块悬停时 */
QScrollBar#AlarmTableScrollbar::handle:vertical:hover {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
    stop: 0 rgb(105, 105, 105), stop: 0.5 rgb(105, 105, 105), stop:1 rgb(105, 105, 105));
}

/* 上下箭头按钮外圈 */
QScrollBar#AlarmTableScrollbar::sub-line:vertical {
    border: 1px solid white;
    background-color: white;
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

QScrollBar#AlarmTableScrollbar::add-line:vertical
{
    border: 1px solid white;
    background-color: white;
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
/*中间箭头图片*/
QScrollBar#AlarmTableScrollbar::up-arrow:vertical {
    border: 2px solid rgb(22, 12, 68);
    width: 20;
    height: 20;
    background: rgb(130, 141, 165);
    image: url(:/Dark_Surveillance/Resource/Arrow_up.png); /* 替换为你的上箭头图片路径 */

}

/* 下箭头图片 */
QScrollBar#AlarmTableScrollbar::down-arrow:vertical {
    image: url(:/Dark_Surveillance/Resource/Arrow_down.png); /* 替换为你的下箭头图片路径 */
    border: 2px solid rgb(22, 12, 68);
    width: 20;
    height: 20;
    background: rgb(130, 141, 165);
}

/* 去除滑块的剩余区域 */
QScrollBar#AlarmTableScrollbar::add-page:vertical {
    background: none;
    background-color: #1E1E1E;
}
 QScrollBar#AlarmTableScrollbar::sub-page:vertical{
    background: none;
    background-color: #1E1E1E;
 }

3. QTableWidget中添加QCheckBox,样式设置：

QCheckBox#AlarmTableCheckbox {
border: none; /* 边框样式 */
padding: 0px;
margin:0px;
}

QCheckBox#AlarmTableCheckbox::indicator {
   width: 18px;
   height: 18px;
}

QCheckBox#AlarmTableCheckbox::indicator:unchecked {
   image:url(:/Blue_Alarm/Resource/AlarmCheckbox_unchecked.png);
}

QCheckBox#AlarmTableCheckbox::indicator:checked {
   image:url(:/Blue_Alarm/Resource/AlarmCheckbox_checked.png);
}

4.手动设置列表表头宽度

void AlarmInfoWnd::InitTable()
{
    setColumnCount(TABLECOLUMNCOUNT);   //设置列数 加选择框
    setContextMenuPolicy(Qt::CustomContextMenu);

    //右键
    m_tabMenu = new QMenu(this);
    QAction* action = new QAction(QString::fromUtf8("历史告警信息"), this);
    m_tabMenu->addAction(action);
    connect(this, SIGNAL(customContextMenuRequested(QPoint)), this, SLOT(OnRightMenu(QPoint)));
    //connect(action, SIGNAL(triggered(bool)), this, SLOT(slotActionInsert()));

    //添加
    //设置表头
    horizontalHeader()->setFixedHeight(30);

    QStringList header1;
    header1 << QString::fromUtf8("")<< QString::fromUtf8("时间") << QString::fromUtf8("区域")
        << QString::fromUtf8("设备信息") << QString::fromUtf8("告警类型") << QString::fromUtf8("级别")
        << QString::fromUtf8("详细内容") << QString::fromUtf8("状态");
    setHorizontalHeaderLabels(header1);
    // 隐藏行号
    QHeaderView* header = this->verticalHeader();
    header->setHidden(true);
    //设置表头字体加粗
    QFont font1;
    font1.setBold(true);
    horizontalHeader()->setFont(font1);
    //设置table的水平滚动条
    setHorizontalScrollBarPolicy(Qt::ScrollBarAsNeeded);

    //先自适应宽度
    //horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
    //然后设置要根据内容使用宽度的列
    //horizontalHeader()->setSectionResizeMode(0, QHeaderView::ResizeToContents);
    //设置列宽可拖动
    horizontalHeader()->setSectionResizeMode(QHeaderView::Interactive);
    verticalHeader()->setSectionResizeMode(QHeaderView::Interactive);
    //设置列宽
    horizontalHeader()->resizeSection(0, 50); //设置表头第1列的宽度
    horizontalHeader()->resizeSection(1, 200); //设置表头第1列的宽度
    horizontalHeader()->resizeSection(2, 180); //设置表头第3列的宽度
    horizontalHeader()->resizeSection(3, 180); //设置表头第1列的宽度
    horizontalHeader()->resizeSection(4, 120); //设置表头第1列的宽度
    horizontalHeader()->resizeSection(5, 80); //设置表头第2列的宽度
    horizontalHeader()->resizeSection(6, 220); //设置表头第3列的宽度
    horizontalHeader()->resizeSection(7, 180); //设置表头第2列的宽度
    
    //最后一格靠边
    horizontalHeader()->setStretchLastSection(true);

    setSelectionBehavior(QAbstractItemView::SelectRows);         //整行选择，设置选择行为时每次选择一行
    setSelectionMode(QAbstractItemView::SingleSelection);         //只能选择一行
    //点击表时不对表头行光亮（获取焦点）解决表头出现塌陷的问题，如颜色变化，字体变粗等
    horizontalHeader()->setHighlightSections(false);
    setEditTriggers(QAbstractItemView::NoEditTriggers);
    //setFrameShape(QFrame::NoFrame); //设置无边框
    //test
    QList<QString> test_stringlist = {"2024-12-04 10:25:200",QString::fromUtf8("F栋三号楼大厅"),QString::fromUtf8("摄像头1号"),
                                   QString::fromUtf8("设备告警"), QString::fromUtf8("一般"),QString::fromUtf8("多人翻越栏杆") 
                                   , QString::fromUtf8("设备失联") };
    for (int row = 0; row < 10; ++row) {
        this->insertRow(row); // 在指定行插入新行
        AddRow(row, test_stringlist);
    }
}