• Qt QTableView 样式参考


    QTableView样式分多个区域

    整体样式

     1 QTableView {
     2     color: white;                                       /*表格内文字颜色*/
     3     gridline-color: black;                              /*表格内框颜色*/
     4     background-color: rgb(108, 108, 108);               /*表格内背景色*/
     5     alternate-background-color: rgb(64, 64, 64);
     6     selection-color: white;                             /*选中区域的文字颜色*/
     7     selection-background-color: rgb(77, 77, 77);        /*选中区域的背景色*/
     8     border: 2px groove gray;
     9     border-radius: 0px;
    10     padding: 2px 4px;
    11 }

    奇偶行区分颜色样式

    1 cpp:
    2 view->setAlternatingRowColors(true);
    3 
    4 qss:
    5 QTableView{
    6     background-color: rgb(250, 250, 115);
    7     alternate-background-color: rgb(141, 163, 215);
    8 }

    水平/垂直表头
    设置表头样式

     1 QHeaderView {
     2     color: white;
     3     font: bold 10pt;
     4     background-color: rgb(108, 108, 108);/*设置表头空白区域背景色*/
     5     border: 0px solid rgb(144, 144, 144);
     6     border:0px solid rgb(191,191,191);
     7     border-left-color: rgba(255, 255, 255, 0);
     8     border-top-color: rgba(255, 255, 255, 0);
     9     border-radius:0px;
    10     min-height:29px;
    11 }

    为垂直及水平表头分别设置样式
    表头为QHeaderView,水平表头和垂直表头都是QHeaderView,需要设置QTableView两个表头的ObjectName进行区分

    1 view->horizontalHeader()->setObjectName("hHeader");
    2 view->verticalHeader()->setObjectName("vHeader");

    样式中根据不同对象名称进行样式设置

     1 QHeaderView#hHeader::section {
     2     background-color:darkcyan;
     3     color: red;padding-left: 4px;
     4     border: 1px solid #6c6c6c;
     5     height:40;
     6 }
     7 QHeaderView#vHeader::section {
     8     background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,stop:0 #616161, stop: 0.5 yellow,stop: 0.6 green, stop:1 cyan);
     9     color: white;padding-left: 4px;border: 1px solid #6c6c6c;
    10     30;
    11 }

    左上角空白区域
    设置完QTableView头部后,左上角区域为白色,需要为左上角区域设置样式

     1 /*QTableView 左上角样式*/
     2 QTableView QTableCornerButton::section {
     3    /*  background: red;
     4     border: 2px outset red;*/
     5     color: red;
     6     background-color: rgb(64, 64, 64);
     7     border: 5px solid #f6f7fa;
     8     border-radius:0px;
     9     border-color: rgb(64, 64, 64);
    10  }

    表头内容区域

    1 QHeaderView::section {
    2     color: white;
    3     background-color: rgb(64, 64, 64);
    4     border: 5px solid #f6f7fa;
    5     border-radius:0px;
    6     border-color: rgb(64, 64, 64);
    7 } 

    全部样式代码:

     1 /*QTableView 左上角样式*/
     2 QTableView QTableCornerButton::section {
     3    /*  background: red;
     4     border: 2px outset red;*/
     5     color: red;
     6     background-color: rgb(64, 64, 64);
     7     border: 5px solid #f6f7fa;
     8     border-radius:0px;
     9     border-color: rgb(64, 64, 64);
    10  }
    11 
    12  QTableView {
    13     color: white;                                       /*表格内文字颜色*/
    14     gridline-color: black;                              /*表格内框颜色*/
    15     background-color: rgb(108, 108, 108);               /*表格内背景色*/
    16     alternate-background-color: rgb(64, 64, 64);
    17     selection-color: white;                             /*选中区域的文字颜色*/
    18     selection-background-color: rgb(77, 77, 77);        /*选中区域的背景色*/
    19     border: 2px groove gray;
    20     border-radius: 0px;
    21     padding: 2px 4px;
    22 }
    23 
    24 QHeaderView {
    25     color: white;
    26     font: bold 10pt;
    27     background-color: rgb(108, 108, 108);
    28     border: 0px solid rgb(144, 144, 144);
    29     border:0px solid rgb(191,191,191);
    30     border-left-color: rgba(255, 255, 255, 0);
    31     border-top-color: rgba(255, 255, 255, 0);
    32     border-radius:0px;
    33     min-height:29px;
    34 }
    35 
    36 QHeaderView::section {
    37     color: white;
    38     background-color: rgb(64, 64, 64);
    39     border: 5px solid #f6f7fa;
    40     border-radius:0px;
    41     border-color: rgb(64, 64, 64);
    42 } 
     
  • 相关阅读:
    JavaScript学习-自定义对象/
    网站特效:欢迎窗口/发表评论
    javacript中的事件
    DOM / DOM操作表格
    如何设置文本不换行省略号显示等CSS常用文本属性
    从零开始的H5生活
    Spring手动提交事务
    java基础学习之接口
    java基础学习之抽象类
    java基础学习之final关键字
  • 原文地址:https://www.cnblogs.com/ybqjymy/p/13605837.html
Copyright © 2020-2023  润新知