how to set tableview horizontal header different stylesheet in qt creator
-
@learn_Qt If you are using
QStandardItemModel
, then your headers should beQStandardItem
s, right?
You should be able to callQStandardItem::setBackground()
on them to set the background color for each one.[Added]: I found there's something related to the style. The windows style seems to ignore the background role returned by the
headerData()
(which will return the color set bysetBackground()
in this case).
So if you are on Windows you'll need to either switch style to fushion (which is much more simple as my example code below), or write your own custom proxy style.//change the style of the whole tableview ui->tableView->setStyle(QStyleFactory::create("fusion"));
or
//only change the style of the headerviews auto fusion = QStyleFactory::create("fusion"); ui->tableView->horizontalHeader()->setStyle(fusion); ui->tableView->verticalHeader()->setStyle(fusion);
-
@learn_Qt If you are using
QStandardItemModel
, then your headers should beQStandardItem
s, right?
You should be able to callQStandardItem::setBackground()
on them to set the background color for each one.[Added]: I found there's something related to the style. The windows style seems to ignore the background role returned by the
headerData()
(which will return the color set bysetBackground()
in this case).
So if you are on Windows you'll need to either switch style to fushion (which is much more simple as my example code below), or write your own custom proxy style.//change the style of the whole tableview ui->tableView->setStyle(QStyleFactory::create("fusion"));
or
//only change the style of the headerviews auto fusion = QStyleFactory::create("fusion"); ui->tableView->horizontalHeader()->setStyle(fusion); ui->tableView->verticalHeader()->setStyle(fusion);
@Bonnie thank for reply
I'm shearing my code snippet thought code I got above 1st posted pic result. could let me know what to do for 2nd posted result.QStandardItemModel *mode = new QStandardItemModel(); //number of column mode->setColumnCount(12); //number of row mode->setRowCount(12); QString styleSheet = "::section {" // "QHeaderView::section {" "background-color: white;" "border-radius: 20px;" "border: 3px solid #498fd0;" "font-size: 20px;" "text-align: center;" "font: bold;" "}"; ui->tableView->horizontalHeader()->setStyleSheet(styleSheet); ui->tableView->verticalHeader()->setVisible(false); ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch); mode->setHeaderData(0, Qt::Horizontal, ("1")); mode->setHeaderData(1, Qt::Horizontal, ("2")); mode->setHeaderData(2, Qt::Horizontal, ("3")); mode->setHeaderData(3, Qt::Horizontal, ("4")); mode->setHeaderData(4, Qt::Horizontal, ("5")); mode->setHeaderData(5, Qt::Horizontal, ("6")); mode->setHeaderData(6, Qt::Horizontal, ("7")); mode->setHeaderData(7, Qt::Horizontal, ("8")); for(int i = 0; i < MAX_ROW_COUNT; i++) { for(int j = 0; j < MAX_COLUMN_COUNT; j++) { mode->setData(mode->index(i, j), " "); mode->setData(mode->index(i, j), Qt::AlignCenter, Qt::TextAlignmentRole); mode->setData(mode->index(i, j), QFont("Arial", 10, QFont::Bold), Qt::FontRole); } }
-
@Bonnie thank for reply
I'm shearing my code snippet thought code I got above 1st posted pic result. could let me know what to do for 2nd posted result.QStandardItemModel *mode = new QStandardItemModel(); //number of column mode->setColumnCount(12); //number of row mode->setRowCount(12); QString styleSheet = "::section {" // "QHeaderView::section {" "background-color: white;" "border-radius: 20px;" "border: 3px solid #498fd0;" "font-size: 20px;" "text-align: center;" "font: bold;" "}"; ui->tableView->horizontalHeader()->setStyleSheet(styleSheet); ui->tableView->verticalHeader()->setVisible(false); ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch); mode->setHeaderData(0, Qt::Horizontal, ("1")); mode->setHeaderData(1, Qt::Horizontal, ("2")); mode->setHeaderData(2, Qt::Horizontal, ("3")); mode->setHeaderData(3, Qt::Horizontal, ("4")); mode->setHeaderData(4, Qt::Horizontal, ("5")); mode->setHeaderData(5, Qt::Horizontal, ("6")); mode->setHeaderData(6, Qt::Horizontal, ("7")); mode->setHeaderData(7, Qt::Horizontal, ("8")); for(int i = 0; i < MAX_ROW_COUNT; i++) { for(int j = 0; j < MAX_COLUMN_COUNT; j++) { mode->setData(mode->index(i, j), " "); mode->setData(mode->index(i, j), Qt::AlignCenter, Qt::TextAlignmentRole); mode->setData(mode->index(i, j), QFont("Arial", 10, QFont::Bold), Qt::FontRole); } }
@learn_Qt Unfortunately my solution is conflict with stylesheet, as far as I can see, you can't have different header bgcolors if you use stylesheet to set the header bg/border.
So If you remove these 3 lines from your style sheet
"background-color: white;"
"border-radius: 20px;"
"border: 3px solid #498fd0;"
Then you could have colorful headers by adding the below code:mode->setHeaderData(0, Qt::Horizontal, QColor("red"), Qt::BackgroundRole); mode->setHeaderData(1, Qt::Horizontal, QColor("green"), Qt::BackgroundRole); mode->setHeaderData(2, Qt::Horizontal, QColor("blue"), Qt::BackgroundRole); auto headerStyle = ui->tableView->horizontalHeader()->style(); if(headerStyle->inherits("QWindowsStyle")) { headerStyle = QStyleFactory::create("fusion"); headerStyle->setParent(this); ui->tableView->horizontalHeader()->setStyle(headerStyle); }
-
@Bonnie thank for reply
I'm shearing my code snippet thought code I got above 1st posted pic result. could let me know what to do for 2nd posted result.QStandardItemModel *mode = new QStandardItemModel(); //number of column mode->setColumnCount(12); //number of row mode->setRowCount(12); QString styleSheet = "::section {" // "QHeaderView::section {" "background-color: white;" "border-radius: 20px;" "border: 3px solid #498fd0;" "font-size: 20px;" "text-align: center;" "font: bold;" "}"; ui->tableView->horizontalHeader()->setStyleSheet(styleSheet); ui->tableView->verticalHeader()->setVisible(false); ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch); mode->setHeaderData(0, Qt::Horizontal, ("1")); mode->setHeaderData(1, Qt::Horizontal, ("2")); mode->setHeaderData(2, Qt::Horizontal, ("3")); mode->setHeaderData(3, Qt::Horizontal, ("4")); mode->setHeaderData(4, Qt::Horizontal, ("5")); mode->setHeaderData(5, Qt::Horizontal, ("6")); mode->setHeaderData(6, Qt::Horizontal, ("7")); mode->setHeaderData(7, Qt::Horizontal, ("8")); for(int i = 0; i < MAX_ROW_COUNT; i++) { for(int j = 0; j < MAX_COLUMN_COUNT; j++) { mode->setData(mode->index(i, j), " "); mode->setData(mode->index(i, j), Qt::AlignCenter, Qt::TextAlignmentRole); mode->setData(mode->index(i, j), QFont("Arial", 10, QFont::Bold), Qt::FontRole); } }
@learn_Qt
As @Bonnie has said, your stylesheet was not just setting border, it was setting colors too. Qt always makes stylesheet rules override coded styles.I don't know whether @Bonnie tried it, but you might be able to keep your border non-color stuff:
"border-radius: 20px;" "border: 3px solid;"
Try his first to make sure that works, then see whether you could add in above without losing your color stuff.
-
@learn_Qt Unfortunately my solution is conflict with stylesheet, as far as I can see, you can't have different header bgcolors if you use stylesheet to set the header bg/border.
So If you remove these 3 lines from your style sheet
"background-color: white;"
"border-radius: 20px;"
"border: 3px solid #498fd0;"
Then you could have colorful headers by adding the below code:mode->setHeaderData(0, Qt::Horizontal, QColor("red"), Qt::BackgroundRole); mode->setHeaderData(1, Qt::Horizontal, QColor("green"), Qt::BackgroundRole); mode->setHeaderData(2, Qt::Horizontal, QColor("blue"), Qt::BackgroundRole); auto headerStyle = ui->tableView->horizontalHeader()->style(); if(headerStyle->inherits("QWindowsStyle")) { headerStyle = QStyleFactory::create("fusion"); headerStyle->setParent(this); ui->tableView->horizontalHeader()->setStyle(headerStyle); }
-
@Bonnie thanks reply, It's code snippet working. But how can we add background-color, border-radius, border into header in that.
-
@Bonnie thanks reply, It's code snippet working. But how can we add background-color, border-radius, border into header in that.
-
@learn_Qt
Did you even try adding back in, say, the"border-radius: 20px;"
I suggested you try? Or not? -
@learn_Qt
Did you even try adding back in, say, the"border-radius: 20px;"
I suggested you try? Or not? -
@learn_Qt
If you cannot get stylesheet to work on, say, border radius, for whatever reason, then you will need a customQHeaderView
and override void QHeaderView::paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const, or something like that. -
@learn_Qt
If you cannot get stylesheet to work on, say, border radius, for whatever reason, then you will need a customQHeaderView
and override void QHeaderView::paintSection(QPainter *painter, const QRect &rect, int logicalIndex) const, or something like that.