QT样式表（二）

最新推荐文章于 2024-07-15 12:30:08 发布

sakura0908

最新推荐文章于 2024-07-15 12:30:08 发布

阅读量230

点赞数

分类专栏： QT 文章标签： QT 概念学习源码

本文链接：https://blog.csdn.net/sakura0908/article/details/132414744

版权

QT 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

2.1 设置margin、border、padding、content

2.2 改变盒子模型大小的计算方式

1、伪状态的样式表

在Qt中，我们可以为不同的控件状态设置不同的样式，这些状态可以是鼠标悬停、获得焦点、失去焦点、选中等。Qt中通过状态样式表来实现这种功能。Qt Style Sheets Reference关键字对应帮助文档的List of Pseudo-States 一项中列出了Qt支待的所有伪状态。

1、常见的状态

在Qt中，常见的控件状态有：

:hover 鼠标悬停
:pressed 鼠标按下
:checked 选中
:unchecked 未选中
:disabled 禁用
:enabled 可用
:focused 获得焦点
:unfocused 失去焦点

QT手册中，罗列了控件所有的伪状态：

:active This state is set when the widget resides in an active window.
:adjoins-item This state is set when the ::branch of a QTreeView is adjacent to an item.
:alternate This state is set for every alternate row whe painting the row of a QAbstractItemView when QAbstractItemView::alternatingRowColors() is set to true.
:bottom The item is positioned at the bottom. For example, a QTabBar that has its tabs positioned at the bottom.
:checked The item is checked. For example, the checked state of QAbstractButton.
:closable The items can be closed. For example, the QDockWidget has the QDockWidget::DockWidgetClosable feature turned on.
:closed The item is in the closed state. For example, an non-expanded item in a QTreeView
:default The item is the default. For example, a default QPushButton or a default action in a QMenu.
:disabled The item is disabled.
:editable The QComboBox is editable.
:edit-focus The item has edit focus (See QStyle::State_HasEditFocus). This state is available only for Qt Extended applications.
:enabled The item is enabled.
:exclusive The item is part of an exclusive item group. For example, a menu item in a exclusive QActionGroup.
:first The item is the first (in a list). For example, the first tab in a QTabBar.
:flat The item is flat. For example, a flat QPushButton.
:floatable The items can be floated. For example, the QDockWidget has the QDockWidget::DockWidgetFloatable feature turned on.
:focus The item has input focus.
:has-children The item has children. For example, an item in a QTreeView that has child items.
:has-siblings The item has siblings. For example, an item in a QTreeView that siblings.
:horizontal The item has horizontal orientation
:hover The mouse is hovering over the item.
:indeterminate The item has indeterminate state. For example, a QCheckBox or QRadioButton is partially checked.
:last The item is the last (in a list). For example, the last tab in a QTabBar.
:left The item is positioned at the left. For example, a QTabBar that has its tabs positioned at the left.
:maximized The item is maximized. For example, a maximized QMdiSubWindow.
:middle The item is in the middle (in a list). For example, a tab that is not in the beginning or the end in a QTabBar.
:minimized The item is minimized. For example, a minimized QMdiSubWindow.
:movable The item can be moved around. For example, the QDockWidget has the QDockWidget::DockWidgetMovable feature turned on.
:no-frame The item has no frame. For example, a frameless QSpinBox or QLineEdit.
:non-exclusive The item is part of a non-exclusive item group. For example, a menu item in a non-exclusive QActionGroup.
:off For items that can be toggled, this applies to items in the "off" state.
:on For items that can be toggled, this applies to widgets in the "on" state.
:only-one The item is the only one (in a list). For example, a lone tab in a QTabBar.
:open The item is in the open state. For example, an expanded item in a QTreeView, or a QComboBox or QPushButton with an open menu.
:next-selected The next item (in a list) is selected. For example, the selected tab of a QTabBar is next to this item.
:pressed The item is being pressed using the mouse.
:previous-selected The previous item (in a list) is selected. For example, a tab in a QTabBar that is next to the selected tab.
:read-only The item is marked read only or non-editable. For example, a read only QLineEdit or a non-editable QComboBox.
:right The item is positioned at the right. For example, a QTabBar that has its tabs positioned at the right.
:selected The item is selected. For example, the selected tab in a QTabBar or the selected item in a QMenu.
:top The item is positioned at the top. For example, a QTabBar that has its tabs positioned at the top.
:unchecked The item is unchecked.
:vertical The item has vertical orientation.
:window The widget is a window (i.e top level widget)

2.、使用状态样式表

使用状态样式表可以为控件不同的状态设置不同的样式。例如，我们可以为一个QPushButton控件在不同状态下设置不同的背景色：

QPushButton { 
    background-color: red; 
} 
QPushButton:hover { 
    background-color: green; 
} 
QPushButton:pressed { 
    background-color: blue; 
}

3、样式表中的状态选择器

Qt中的状态选择器是以冒号(:)开头的伪类选择器，用于匹配控件不同的状态。例如：

QLineEdit:hover { 
    border: 1px solid red; 
} 
QCheckBox:checked { 
    background-color: yellow; 
}

2、样式盒子模型

在Qt中，样式盒子模型是指每个控件具有的四个矩形框：margin（外边距）、border（边框）、padding（内边距）和content（内容区域）。这些框可以用来调整控件的外观和布局。默认情况下，外边距、边框、内边框默认都是0，正好4个矩形框重合。

样式盒子模型是一种网页设计概念，它描述了HTML元素的布局和渲染方式。在Qt中，每个控件都有自己的样式盒子模型。

1、Qt样式盒子模型

2.1 margin

margin指的是控件的外边距，它会影响控件与其它元素之间的距离。可以使用margin属性来设置控件的外边距，语法如下：

QWidget {

margin: 10px;

}

上述代码表示将QWidget控件的外边距设置为10像素。

2.2 border

border指的是控件的边框，包括边框的颜色、样式和宽度等属性。可以使用border属性来设置控件的边框，语法如下：

QWidget {

border: 2px solid black;

}

上述代码表示将QWidget控件的边框设置为2像素宽的实线边框，颜色为黑色。

QPushButton#btn1{

border:1px solid #0000ff; 设置边框大小，边框颜色

border-radius:50px; 设置圆角边框

}

上述代码表示将btn1按钮的边框设置为1像素宽的实线边框，颜色为蓝色，并且设置了圆角边框。

2.3 padding

padding指的是控件的内边距，它会影响控件内部元素与边框之间的距离。可以使用padding属性来设置控件的内边距，语法如下：

QWidget {

padding: 10px;

}

上述代码表示将QWidget控件的内边距设置为10像素。

2.4 content

content指的是控件的内容区域，它是控件内部除边框、内边距之外的区域。可以使用width和height属性来设置控件的内容区域大小，如下所示：

QWidget {

width: 200px; height: 100px;

}

上述代码表示将QWidget控件的内容区域大小设置为200像素宽、100像素高。

2、应用样式盒子模型

2.1 设置margin、border、padding、content

可以通过设置控件的margin、border、padding和content属性来调整控件的大小和布局。例如：

QLabel {

        background-color: blue;

        border: 2px solid black;

        padding: 10px;

        margin: 20px;

}

2.2 改变盒子模型大小的计算方式

可以使用box-sizing属性来改变盒子模型的大小。例如：

我们有一个宽度为 100px、高度为 50px 的按钮，边框为 2px，内边距为 10px，如果不使用 box-sizing 属性，那么按钮的实际宽度应该是 124px（100px + 2px * 2 + 10px * 2），而使用 box-sizing: border-box 后，按钮的实际宽度仍然是 100px，同时边框和内边距的尺寸也被计算在内

QPushButton {

        width: 100px;

        height: 50px;

        padding: 10px;

        border: 2px solid black;

        box-sizing: border-box;

}

sakura0908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
QT样式表（二）

在Qt中，我们可以为不同的控件状态设置不同的样式，这些状态可以是鼠标悬停、获得焦点、失去焦点、选中等。Qt中通过状态样式表来实现这种功能。Qt Style Sheets Reference关键字对应帮助文档的List of Pseudo-States 一项中列出了Qt支待的所有伪状态。
复制链接

扫一扫