Qt 常用控件美化

Posted 2022-08-01 小哈龙

在使用Qt开发界面程序时，常用控件的美化是一件繁琐的事情，收藏一些基本控件的美化样式，可以在项目开发时节省大量时间，本篇文章由此而出，收集常用的控件美化样式。

以下所列是直接放在qt的UI编辑器里面的，代码中使用调整一下即可

一.编辑框（QLineEdit）

border: 1px solid gray;   /*设置边框的粗细，以及颜色*/
border-radius: 2px;       /*设置圆角的大小*/
border-bottom-right-radius:  2px ;  /*设置右下角圆角*/
border-top-left-radius:  2px ;      /*设置左上角圆角*/

二.下拉框（QComboBox）

//下面设置针对下拉框整体设置
QComboBox 
     border:1px solid gray ;          #设置边框
     border-radius: 3px ;             #设置圆角
     padding : 1px  2px  1px  2px ;  # 针对于组合框中的文本内容


//下面设置针对下拉框下拉标识（箭头）
QComboBox::drop-down 
     subcontrol-origin: padding;           #针对标识图标的位置设置
     subcontrol- position :  top  right ;
     width : 20px ;

     border-left-width :  1px ;            #针对标识图标四周属性
     border-left-color : darkgray;
     border-left-style :  solid ;  /* just a single line */
     border-top-right-radius:  3px ;  /* same radius as the QComboBox */
     border-bottom-right-radius:  3px ;

 
//下面设置针对下拉框下拉标识图片设置
QComboBox::down-arrow 
     image: url (:/misc/down_arrow.png);

三.表格(QTableWidget)

win10下表头边框线设置

//如下代码设置横向表格头的间隔线，有四个方向的间隔线,不需要间隔线的可以设置为0px
ui.myTableWidget->horizontalHeader()->setStyleSheet(
"QHeaderView::section"
            "border-top:0px solid #E5E5E5;"
            "border-left:0px solid #E5E5E5;"
            "border-right:0.5px solid #E5E5E5;"
            "border-bottom: 0.5px solid #E5E5E5;"
            "background-color:white;"
            "padding:4px;"
        ""
)
 
//如下代码设置横向表格头的间隔线，有四个方向的间隔线,不需要间隔线的可以设置为0px
ui.myTableWidget->verticalHeader()->setStyleSheet(
"QHeaderView::section"
            "border-top:0px solid #E5E5E5;"
            "border-left:0px solid #E5E5E5;"
            "border-right:0.5px solid #E5E5E5;"
            "border-bottom: 0.5px solid #E5E5E5;"
            "background-color:white;"
            "padding:4px;"
        ""
)
 
//如下代码设置列表左上角第0行第0列的那个格子的边框线
ui.myTableWidget->verticalHeader()->setStyleSheet(
"QTableCornerButton::section"
            "border-top:0px solid #E5E5E5;"
            "border-left:0px solid #E5E5E5;"
            "border-right:0.5px solid #E5E5E5;"
            "border-bottom: 0.5px solid #E5E5E5;"
            "background-color:white;"
        ""
)