Back to Qt.io
Contact Us Blog Download Qt
本页内容

StylableControls QML Type

包含可进行样式设置的控件类型的抽象基类型。更多...

Import Statement: import Qt.labs.StyleKit
Inherited By:

AbstractStyle, Style, StyleVariation, and Theme

Status: Technology preview

此类型处于技术预览阶段，可能会有变动。

属性

方法

详细说明

StylableControls 是一个抽象基类。它为每种可由Style 、Theme 或StyleVariation 进行样式设置的控件类型包含一个相应的ControlStyle 。

这些控件类型构成一个继承层次结构，在该结构中，设置在基类上的属性会向下传播到更具体的子类。例如，将半径设置为4应用于abstractButton.background.radius ，将导致所有按钮类型（如button 、checkBox 和radioButton ）的半径均变为4。

本页面的代码片段展示了可用于为每种控件类型设置样式的几个关键属性，但绝非详尽无遗。还有许多其他属性可用，具体请参阅ControlStyle 和DelegateStyle 的文档。 实际上，其中部分属性可以省略，因为fallback style 已经提供了合理的默认值。这意味着，如果您只是从代码片段中移除某项属性，可能并不会实际影响其外观，因为系统会直接采用备用样式。

注意： Qt.labs 模块中的类型在未来版本中不保证保持兼容。

另请参阅 StyleKit 属性解析。

属性文档

abstractButton : ControlStyle

用于设置所有按钮类控件样式的分组属性，包括Button 、CheckBox 、RadioButton 、Switch 和RoundButton 。未设置的属性将回退为control 。

abstractButton.background.radius: 4 // all buttons get a radius of 4
checkBox.indicator.radius: 2 // except check boxes, which get a radius of 2

另请参阅 “控件类型”。

applicationWindow : ControlStyle

用于样式设置的分组属性ApplicationWindow 。

未设置的属性将回退到control 。

使用 `applicationWindow ` 设置窗口的背景颜色：

light: Theme {
    applicationWindow.background.color: "#f0f0f0"
}
dark: Theme {
    applicationWindow.background.color: "#404040"
}

注意： 要使此设置生效，应用程序 必须使用 `ApplicationWindow`，而非 `Window`。

busyIndicator : ControlStyle

用于样式设置的分组属性BusyIndicator 。

未设置的属性将回退到control 。

busyIndicator {
    background {
        visible: false
        width: 48
        height: 48
    }
    indicator {
        fillWidth: true
        fillHeight: true
        color: "transparent"
        border.width: 0
        foreground {
            radius: 255
            color: palette.accent
        }
    }
}

StyleKit 未提供专门的属性来设置旋转指示器的动画效果。若要更改旋转指示器的形状或动画效果，您需要实现自定义指示器前景delegate 来实现：

busyIndicator {
    background {
        visible: false
        width: 48
        height: 48
    }
    indicator {
        fillWidth: true
        fillHeight: true
        color: "transparent"
        border.width: 0
        foreground {
            radius: 255
            color: palette.accent
            delegate: Text {
                required property DelegateStyle delegateStyle
                required property QtObject control
                opacity: control.running ? 1 : 0
                Behavior on opacity { NumberAnimation{} }
                text: "↻"
                color: delegateStyle.color
                font.pixelSize: 20
                RotationAnimation on rotation {
                    from: 0
                    to: 360
                    duration: 1000
                    loops: Animation.Infinite
                    running: control.running
                }
            }
        }
    }
}

button : ControlStyle

用于样式设置的分组属性Button 。

未设置的属性将回退到abstractButton 。

button {
    background {
        width: 120
        height: 40
        shadow {
            opacity: 0.6
            color: "gray"
            verticalOffset: 2
            horizontalOffset: 2
        }
        color: "cornflowerblue"
        gradient: Gradient {
            // The gradient is drawn on top of the 'background.color', so
            // we use semi-transparent stops to give the button some shading
            // while letting the base color show through. This makes it easier
            // to change the color, but keep the shading, in the hovered state below.
            GradientStop { position: 0.0; color: Qt.alpha("black", 0.0)}
            GradientStop { position: 1.0; color: Qt.alpha("black", 0.2)}
        }
    }
    text.color: "white"
    hovered.background.color: "royalblue"
    pressed.background.scale: 0.95
}

checkBox : ControlStyle

用于样式设置的分组属性CheckBox 。

未设置的属性将回退到abstractButton 。

checkBox {
    // Hide the button background; show only the indicator and text
    background.visible: false

    indicator {
        color: "white"
        border.color: "darkslategray"
        foreground {
            color: "transparent"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
            image.color: palette.accent

            // Hide the checkmark when the checkbox is not checked
            visible: false
        }
    }

    // Show the checkmark when the checkbox is checked
    checked.indicator.foreground.visible: true
}

checkDelegate : ControlStyle

用于样式设置的分组属性CheckDelegate 。

未设置的属性将回退为itemDelegate 。

checkDelegate {
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    background {
        radius: 0
        color: "white"
        border.width: 0
    }

    indicator {
        border.color: "darkslategray"
        foreground {
            color: "transparent"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
            image.color: palette.accent

            // Hide the checkmark when the checkbox is not checked
            visible: false
        }
    }

    hovered.background.color: "#f0f0f0"
    // Show the checkmark when the checkbox is checked
    checked.indicator.foreground.visible: true
}

comboBox : ControlStyle

用于样式设置的分组属性：ComboBox 。

未设置的属性将回退到control 。

注意： 通过 `popup`设置 弹出窗口的样式 ，通过 `itemDelegate` 设置其项的样式 。

comboBox {
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter
    background.topLeftRadius: 4
    background.topRightRadius: 4

    indicator {
        // Show only the dropdown arrow, not the indicator background
        color: "transparent"
        border.width: 0
        foreground {
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/drop-indicator.png"
            image.color: "black"
        }
    }
}

control : ControlStyle

用于设置所有控件样式的分组属性。

control 是控件层次结构中的基类，在此处设置的属性将作为所有其他控件类型的默认值。例如，将control.width: 200 设置为200像素，将使所有控件（包括按钮、滚动指示器以及其他所有控件）的宽度均为200像素。 它还会覆盖从样式层次结构中更高级别继承的任何值（例如，对于Theme ，其Style 属性；对于Style ，其fallbackStyle 属性），包括悬停效果和其他基于状态的行为。请谨慎使用control ，并在可能的情况下优先使用更具体的基类，如abstractButton 或pane 。

control {
    padding: 8
    background.radius: 4
}

delayButton : ControlStyle

用于设置样式DelayButton 的分组属性。

对于延迟按钮，进度通过指示器进行样式设置。默认情况下，指示器本身是透明的且没有边框，因此只有指示器的前景色在填充过程中可见。

未设置的属性将回退到abstractButton 。

delayButton {
    padding: 0
    indicator {
        fillWidth: true
        fillHeight: true
        color: "transparent"
        border.width: 0
        foreground.color: palette.accent
    }
    checked.indicator.foreground.color: palette.accent.darker(1.2)
}

dial : ControlStyle

用于样式设置的分组属性Dial 。

未设置的属性将回退为control 。

dial {
    spacing: 0
    handle.width: 15
    handle.height: 15
    background.visible: false
    indicator {
        width: 60
        height: 60
        radius: 255
        foreground {
            fillWidth: true
            fillHeight: true
            width: 6
            height: 6
            color: palette.accent
        }
    }
}

dialog : ControlStyle

用于样式设置的分组属性Dialog 。

未设置的属性将回退到popup 。

dialog {
    text {
        padding: 12
        alignment: Qt.AlignHCenter | Qt.AlignVCenter
    }

    background.color: "white"
}

dialogButtonBox : ControlStyle

用于样式设置的分组属性DialogButtonBox 。

未设置的属性将回退为pane 。

dialogButtonBox {
    background {
        height: 40
        radius: 0
        color: "transparent"
        border.width: 0
    }
}

flatButton : ControlStyle

用于为扁平按钮（即正常状态下无可见背景的按钮）设置样式的分组属性。如果将 `Button.flat ` 设置为 `true`，则该样式将对 `Button ` 生效。

未设置的属性将回退为abstractButton 。

flatButton {
    // Hide background normally, show on hover
    background.visible: false
    hovered.background.visible: true
}

frame : ControlStyle

用于样式设置的分组属性Frame 。

未设置的属性将回退到pane 。

frame {
    background {
        color: "#fafafa"
        border.color: "#d0d0d0"
        radius: 4
    }
}

groupBox : ControlStyle

用于样式设置的分组属性：GroupBox 。

未设置的属性将回退为frame 。

groupBox {
    // A group box is a container for other controls, so we give it some
    // padding to avoid the child controls to be too close to the border
    padding: 20

    // Move the label to the right, to match the radius of the background
    text.leftPadding: 6
    text.color: "darkslategray"

    background {
        // Move the frame down, below the text label
        topMargin: 30
        radius: 6
        color: "#f8f8f8"
        border.color: "#d0d0d0"
    }
}

itemDelegate : ControlStyle

用于样式设置的分组属性ItemDelegate 。

未设置的属性将回退到control 。

注意：在 Qt Quick Controls 中，ItemDelegate 继承自AbstractButton 。但在 StyleKit 中，itemDelegate 会回退到control 而不是abstractButton ，因为委托控件的样式通常与按钮截然不同（扁平化、无边框或阴影等）。

itemDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }
    hovered.background.color: "#f0f0f0"
}

label : ControlStyle

用于样式设置的分组属性Label 。

未设置的属性将回退到control 。

light: Theme {
    // Labels typically have no background, so set background.visible to false.
    // Alternatively, hiding the background for labels can be done once for all
    // themes by setting Style.label.background.visible: false.
    label.background.visible: false
    label.text.color: "black"
}
dark: Theme {
    label.background.visible: false
    label.text.color: "white"
}

用于样式设置的分组属性Menu 。

未设置的属性将回退为popup 。

menu {
    background {
        width: 200
        height: 40
        border.color: "darkslategray"
        radius: 4
    }
}

用于样式设置的分组属性MenuBar 。

未设置的属性将回退到control 。

注意：对 `MenuBar`、`MenuBarItem` 和 `MenuSeparator `进行样式设置 通常仅影响非原生菜单栏。当 `MenuBar ` 作为原生菜单栏实现时，其委托不会用于渲染，因此 StyleKit 样式属性可能不会产生视觉效果。详情请参阅“原生菜单栏”。

menuBar {
    background {
        radius: 0
        border.width: 0
    }
}

用于在MenuBar 中设置菜单项样式的分组属性。

未设置的属性将回退至control 。

注意：在 Qt Quick Controls中 ，MenuBarItem 继承自AbstractButton 。但在StyleKit中，menuBarItem 是一个独立的控件类型，其默认样式为control ，而非abstractButton ，因为菜单栏项的样式通常与普通按钮截然不同（扁平化设计、无边框或阴影等）。

menuBarItem {
    text.alignment: Qt.AlignLeft | Qt.AlignVCenter
    background {
        radius: 0
        color: "transparent"
        border.width: 0
    }
    hovered.background.color: "#c0c0c0"
}

用于样式设置的分组属性MenuItem 。

未设置的属性将回退到control 。

注意：在 Qt Quick Controls中 ，MenuItem 继承自AbstractButton 。但在StyleKit中，menuItem 会回退到control ，而不是abstractButton ，因为菜单项的样式通常与普通按钮截然不同（扁平化、无边框或阴影等）。

menuItem {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        width: 200
        border.width: 0
    }
    indicator {
        color: "transparent"
        border.width: 0
        foreground {
            image.color: palette.accent
            alignment: Qt.AlignCenter
        }
        first {
            alignment: Qt.AlignLeft
            foreground.image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/check.png"
        }
        second {
            alignment: Qt.AlignRight
            foreground.image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
        }
    }
    hovered.background.color: "#c0c0c0"
}

用于样式设置的分组属性MenuSeparator 。

未设置的属性将回退到control 。

menuSeparator {
    background.visible: false
    indicator {
        width: 188
        height: 1
        border.width: 0
        color: "#c0c0c0"
        foreground.visible: false
    }
}

page : ControlStyle

用于样式设置的分组属性Page 。

未设置的属性将回退到pane 。

请注意，Page 的header 和footer 通常由应用程序设置为ToolBar 或TabBar ，且这些控件的样式是单独设置的。若要在Page 中使用ToolBar 时为其指定替代样式，请使用StyleVariation ：

page {
    background {
        color: "white"
        border.width: 0
    }
    variations: StyleVariation {
        toolBar.background.color: "cornflowerblue"
        toolButton.background.color: "skyblue"
        toolButton.background.border.color: "aliceblue"
    }
}

pageIndicator : ControlStyle

用于样式设置的分组属性PageIndicator 。

未设置的属性将回退为control 。

pageIndicator {
    background.visible: false
    indicator {
        width: 5
        height: 5
        radius: 255
        border.width: 0
        color: "black"
        opacity: 0.45
        foreground.visible: false
    }

    hovered.indicator {
        width: 6
        height: 6
        opacity: 0.7
    }

    pressed.indicator {
        width: 4
        height: 4
    }

    checked.indicator {
        width: 7
        height: 7
    }

    checked.hovered.indicator {
        width: 8
        height: 8
        opacity: 0.7
    }
}

pane : ControlStyle

用于样式设置的分组属性Pane 。

未设置的属性将回退到control 。

pane {
    background {
        width: 200
        height: 200
        color: "white"
    }
}

用于样式设置的分组属性Popup 。

未设置的属性将回退到control 。

popup {
    background {
        color: "white"
        border.width: 1
        border.color: "darkslategray"
        radius: 4
    }
}

progressBar : ControlStyle

用于样式设置的分组属性：ProgressBar 。对于进度条，凹槽的样式通过指示器设置，而进度轨迹的样式则通过指示器的前景色设置。

未设置的属性将回退到control 。

progressBar {
    // Hide the background; show only the progress bar
    background.visible: false
    indicator {
        width: 150
        height: 8
        radius: 4
        color: "#e0e0e0"
        foreground {
            // Set margins to add some space between the progress track and the groove
            margins: 2
            color: palette.accent
            radius: 4
        }
    }
}

StyleKit 未提供专门的属性来设置进度条的不确定动画样式。若要更改动画，您需要实现自定义指示器前景色 `delegate `：

progressBar {
    indicator {
        width: 150
        height: 8
        foreground {
            delegate: StyledItem {
                // Draw a pulsating progress track when in indeterminate mode, and a normal track otherwise
                width: control.indeterminate ? parent.width : parent.width * control.visualPosition
                height: parent.height
                opacity: control.indeterminate ? 0.1 : 1.0
                SequentialAnimation on opacity {
                    running: control.indeterminate
                    loops: Animation.Infinite
                    NumberAnimation { from: 0.1; to: 1.0; duration: 500; easing.type: Easing.InOutQuad }
                    NumberAnimation { from: 1.0; to: 0.1; duration: 500; easing.type: Easing.InOutQuad }
                }
            }
        }
    }
}

radioButton : ControlStyle

用于样式设置的分组属性RadioButton 。

未设置的属性将回退到abstractButton 。

radioButton {
    // Hide the button background; show only the indicator and text
    background.visible: false

    indicator {
        // Make the indicator circular
        radius: 255
        foreground {
            // The foreground circle is what shows the checked state, so we make
            // it a bit smaller than the outer circle by setting margins
            margins: 4
            radius: 255
            // Hide the foreground circle when the radio button is not checked
            visible: false
        }
    }

    // Show the foreground circle when the radio button is checked
    checked.indicator.foreground.visible: true
}

radioDelegate : ControlStyle

用于样式设置的分组属性RadioDelegate 。

未设置的属性将回退为itemDelegate 。

radioDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }

    indicator {
        radius: 255
        foreground {
            margins: 4
            visible: false
            radius: 255
            color: palette.accent
        }
    }

    hovered.background.color: "#f0f0f0"
    checked.indicator.foreground.visible: true
}

roundButton : ControlStyle

用于样式设置的分组属性RoundButton 。

未设置的属性将回退到abstractButton 。

roundButton {
    background.radius: 255
    text.alignment: Qt.AlignVCenter | Qt.AlignHCenter
}

scrollBar : ControlStyle

用于样式设置的分组属性ScrollBar 。凹槽的样式通过background 设置，而手柄的样式则通过indicator 设置。

未设置的属性将回退到control 。

scrollBar {
    padding: 0
    background {
        // Set the groove size and color
        width: 10
        height: 10
        color: "white"
    }
    indicator {
        radius: 255
        fillWidth: true
        width: 10
        height: 10
        color: "#c0c0c0"
        // The indicator is so simple that it doesn't need a foreground
        foreground.visible: false
    }
    vertical {
        indicator {
            // In vertical mode, the indicator should stretch vertically
            // to fill the available height rather than the available width.
            fillWidth: false
            fillHeight: true
        }
    }
}

scrollIndicator : ControlStyle

用于样式设置的分组属性ScrollIndicator 。凹槽的样式通过background 设置，而手柄的样式则通过indicator 设置。

未设置的属性将回退到control 。

scrollIndicator {
    // A scroll indicator typically has no groove, just a sliding
    // indicator. So hide the background, since it represents the groove.
    background.visible: false
    indicator {
        fillWidth: true
        width: 5
        height: 5
        border.width: 0
        color: "cornflowerblue"
        // The indicator is so simple that it doesn't need a foreground
        foreground.visible: false
    }
    vertical {
        indicator {
            // In vertical mode, the indicator should stretch vertically
            // to fill the available height rather than the available width.
            fillWidth: false
            fillHeight: true
        }
    }
}

scrollView : ControlStyle

用于设置ScrollView 样式的一组属性。

ScrollView 该控件本身没有可供设置样式的视觉委托。其滚动条可通过scrollBar 属性单独设置样式。但您可以使用padding 来控制滚动条与内容区域之间的间距。

未设置的属性将回退到 `control` 的默认值。

scrollView {
    // Add some space between the scroll bars and the content area
    padding: 2
    // For the sake of the example, style the scroll bars in a ScrollView
    // differently from the default scroll bars by using a StyleVariation.
    variations: StyleVariation {
        scrollBar.indicator.color: "cornflowerblue"
    }
}

searchField : ControlStyle

用于样式设置的分组属性SearchField 。

未设置的属性将回退到control 。

searchField {
    // Center the text between the buttons
    text.padding: 5
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    text.color: "black"
    background.width: 200

    indicator {
        color: "transparent"
        border.width: 0

        foreground{
            alignment: Qt.AlignCenter
        }

        // Place the search and clear buttons on the left and right side of the control
        // search button
        first {
            alignment: Qt.AlignLeft
            image.color: "black"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/search-magnifier.png"
        }

        // clear button
        second {
            alignment: Qt.AlignRight
            image.color: "black"
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/close_circle.png"
        }
    }
}

slider : ControlStyle

用于样式设置的分组属性Slider 。对于滑块，凹槽的样式通过指示器设置，而进度轨道的样式则通过指示器的前景色设置。

未设置的属性将回退到control 。

对于垂直滑块，请交换相关委托的 `width ` 和 `height `，使控件的高度大于宽度，如下面的代码片段所示。

slider {
    background {
        // The background is hidden, but its implicit size still
        // determines the overall implicit size of the control.
        visible: false
        width: 150
        height: 50
    }

    indicator {
        // The groove of the slider should fill out the entire width of the control
        fillWidth: true
        height: 8
        radius: 255
        color: "#e0e0e0"
        foreground {
            radius: 255
            color: palette.accent
        }
    }

    handle {
        width: 24
        height: 24
        radius: 255
        color: "white"
        border.color: "#c0c0c0"
    }

    vertical {
        // Transpose relevant geometry
        background {
            width: 50
            height: 150
        }

        indicator {
            fillWidth: false
            fillHeight: true
            width: 8
        }
    }
}

spinBox : ControlStyle

用于样式设置的分组属性SpinBox 。

未设置的属性将回退为control 。

spinBox {
    // Center the text between the up/down buttons
    text.alignment: Qt.AlignHCenter | Qt.AlignVCenter

    indicator {
        color: "transparent"
        border.width: 0
        foreground {
            image.source: "qrc:/qt-project.org/imports/QtQuick/Controls/Basic/images/arrow-indicator.png"
            image.color: "black"
            alignment: Qt.AlignCenter
        }
        // Place the down and up buttons on the left and right side of the control
        // up button
        first {
            alignment: Qt.AlignRight
            foreground.rotation: -90
        }
        // down button
        second {
            alignment: Qt.AlignLeft
            foreground.rotation: 90
        }
    }
}

注意： 目前仅支持 将“上”和“下”按钮定位在控件的左侧或右侧，但不能将它们重叠放置。

swipeDelegate : ControlStyle

用于样式设置的分组属性SwipeDelegate 。

未设置的属性将回退到itemDelegate 。

swipeDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }
    hovered.background.color: "#f0f0f0"
}

switchControl : ControlStyle

用于样式设置的分组属性Switch 。

未设置的属性将回退到abstractButton 。

switchControl {
    // For a switch control, we typically don't want a background, only an indicator with a handle
    background.visible: false
    indicator {
        radius: 12
        foreground {
            // Add some space between the indicator and the foreground track
            margins: 2
            radius: 12
            // The foreground track should only be visible when the switch is checked
            visible: false
        }
    }
    checked.indicator.foreground.visible: true
    handle {
        // Add some space between the handle and the indicator
        leftMargin: 2
        rightMargin: 2
        width: 20
        height: 20
        radius: 255
        color: "white"
    }
}

switchDelegate : ControlStyle

用于样式设置的分组属性SwitchDelegate 。

未设置的属性将回退到itemDelegate 。

switchDelegate {
    text.alignment: Qt.AlignVCenter | Qt.AlignLeft
    background {
        radius: 0
        color: "white"
        border.width: 0
    }

    indicator {
        radius: 12
        foreground {
            // Add some space between the indicator and the foreground track
            margins: 2
            radius: 12
            // The foreground track should only be visible when the switch is checked
            visible: false
        }
    }

    handle {
        // Add some space between the handle and the indicator
        leftMargin: 2
        rightMargin: 2
        width: 20
        height: 20
        radius: 255
        color: "white"
    }

    hovered.background.color: "#f0f0f0"
    checked.indicator.foreground.visible: true
}

tabBar : ControlStyle

用于样式设置的分组属性TabBar 。

未设置的属性将回退到pane 。

tabBar {
    padding: 0
    spacing: -1 // let tab buttons overlap slightly
    background {
        color: "white"
        border.width: 0
    }
}

tabButton : ControlStyle

用于样式设置的分组属性TabButton 。

未设置的属性将回退到abstractButton 。

tabButton {
    background {
        radius: 0
        topLeftRadius: 4
        topRightRadius: 4
        color: "#e8e8e8"
    }
    checked.background.color: "white"
}

textArea : ControlStyle

用于样式设置的分组属性TextArea 。

未设置的属性将回退为textInput 。

textArea {
    // Add some space between the text and the border of the text area
    padding: 8
    text.color: "black"
    background {
        color: "white"
        border.color: "#c0c0c0"
    }
    focused.background.border.color: palette.accent
}

textField : ControlStyle

用于样式设置的分组属性TextField 。

未设置的属性将回退到textInput 。

textField {
    // Add some space between the text and the border of the text field
    padding: 8
    text.alignment: Qt.AlignVCenter
    background {
        width: 150
        color: "white"
        border.color: "#c0c0c0"
    }
    focused.background.border.color: palette.accent
}

textInput : ControlStyle

用于设置所有文本输入控件样式的一组属性，包括TextField 和TextArea 。

未设置的属性将回退为control 。

textInput {
    // Add some space between the text and the border of the text input
    padding: 8
    text.color: "black"
    background {
        color: "white"
        border.width: 1
        border.color: "#c0c0c0"
    }
}

toolBar : ControlStyle

用于样式设置的分组属性ToolBar 。

未设置的属性将回退到pane 。

toolBar {
    spacing: 2
    background {
        radius: 0
        height: 40
        border.width: 1
    }
}

toolButton : ControlStyle

用于样式设置的分组属性ToolButton 。

未设置的属性将回退到abstractButton 。

toolButton {
    background.radius: 0
}

toolSeparator : ControlStyle

用于样式设置的分组属性ToolSeparator 。

未设置的属性将回退为control 。

对于垂直分隔符，请交换相关委托的 `width ` 和 `height `，使控件的高度大于宽度，如下面的代码片段所示。

toolSeparator {
    background {
        // The background is hidden, but its implicit size still
        // determines the overall implicit size of the control.
        visible: false
        width: 10
        height: 10
    }
    indicator {
        width: 30
        height: 1
        border.width: 0
        color: "#c0c0c0"
        alignment: Qt.AlignCenter
        foreground.visible: false
    }
    vertical {
        indicator {
            width: 1
            height: 30
        }
    }
}

方法文档

ControlStyle getControlStyle(controlType)

返回给定controlType 的ControlStyle ，如果该类型未定义ControlStyle ，则返回null 。

controlType 可以是StyleReader.controlType 中记录的内置类型之一，也可以是CustomControl 的controlType 。

例如，该函数可用于在运行时读取或写入CustomControl 的样式属性：

Style {
    id: myStyle
    property int customButtonType: 0

    CustomControl {
        controlType: myStyle.customButtonType
        background.color: "green"
    }
}
function changeButtonColor() {
    let customControlStyle = myStyle.getControlStyle(style.customButtonType)
    customControlStyle.background.color = "yellowgreen"

    // You can also access the style definition in the theme, if it has one
    // myStyle.theme.getControlStyle(StyleReader.Button).padding = 10
}

如果 `controlType ` 是一个内置类型（例如 `StyleReader.Button`），那么使用 `myStyle.button ` 或 `myStyle.getControlStyle(StyleReader.Button) ` 来获取 `ControlStyle `几乎是等效的。区别在于：前者会在 `ControlStyle ` 尚未定义时懒加载地创建它，而后者则会返回 `null`。这意味着，例如 `myStyle.button.padding = 10 ` 总是安全的，而如果 `myStyle.button ` 尚未在 `Style` 中定义，则 `myStyle.getControlStyle(StyleReader.Button).padding = 10 ` 将会失败。

另请参阅 CustomControl 和StyleReader 。

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.