QML控件样式设计
import QtQuick 2.7
import QtQuick.Controls 2.2
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3
import QtQuick.Extras 1.4
ApplicationWindow {
visible: true
width: 720
height: 480
title: qsTr("Qml Qss")
color: "lightgray"
Grid {
id: qssStyleGrid
columns: 2
spacing: 20
RadioButton {
id: radioButton
text: qsTr("RadioButton")
font.pixelSize: 13
indicator: Rectangle {
implicitWidth: 26
implicitHeight: 26
x: radioButton.leftPadding
y: parent.height / 2 - height / 2
radius: 13
border.color: radioButton.checked ? "#38a1ec" : "#666"
Rectangle {
color: "red"
width: 14
height: 14
x: 6
y: 6
radius: 7
visible: radioButton.checked
}
}
}
ComboBox {
id: deviceChoose
currentIndex: 0
font.pixelSize: 13
width: 100
model: ListModel {
id: cbItems
ListElement {
text: qsTr("Device1")
}
ListElement {
text: qsTr("Device2")
}
}
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
color: "gray"
radius: 2
}
contentItem: Text {
leftPadding: 5
//rightPadding: deviceChoose.indicator.width + deviceChoose.spacing
text: deviceChoose.displayText
font: deviceChoose.font
color: "#fff"
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
}
Slider {
id: sliderBrightness
Layout.fillWidth: true
from: 0
value: 25
to: 100
stepSize : 1
background: Rectangle {
x: sliderBrightness.leftPadding
y: sliderBrightness.topPadding + sliderBrightness.availableHeight / 2 - height / 2
implicitWidth: 200
implicitHeight: 4
width: sliderBrightness.availableWidth
height: implicitHeight
radius: 2
color: "#ddd"
Rectangle {
width: sliderBrightness.visualPosition * parent.width
height: parent.height
color: "#38a1ec"
radius: 2
}
}
handle: Rectangle {
x: sliderBrightness.leftPadding + sliderBrightness.visualPosition
* (sliderBrightness.availableWidth - width)
y: sliderBrightness.topPadding + sliderBrightness.availableHeight / 2 - height / 2
implicitWidth: 26
implicitHeight: 26
radius: 13
color: "#38a1ec"
Label {
id: sliderBrightnessValue
text: sliderBrightness.value.toFixed(0)
font.pointSize: 10
color: "#000"
anchors.centerIn: parent
}
}
}
Button {
id: reset
width: 80
height: 40
text: qsTr("Button")
font.pointSize: 13
contentItem: Text {
text: reset.text
font: reset.font
opacity: enabled ? 1.0 : 0.3
color: "#fff"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
background: Rectangle {
implicitWidth: 140
implicitHeight: 40
color: reset.down ? "lightgray" : "#38a1ec"
opacity: enabled ? 1 : 0.3
border.color: reset.down ? "#38a1ec" : "lightgray"
border.width: 1
radius: 5
}
}
Switch {
id: darkStyleSwitch
text: qsTr("Switch")
font.pointSize: 13
indicator: Rectangle {
implicitWidth: 50
implicitHeight: 24
x: darkStyleSwitch.leftPadding
y: parent.height / 2 - height / 2
radius: 12
color: darkStyleSwitch.checked ? "#38a1ec" : "#ccc"
border.color: darkStyleSwitch.checked ? "#38a1ec" : "gray"
Rectangle {
x: darkStyleSwitch.checked ? parent.width - width - 2 : 2
width: 20
height: 20
anchors.verticalCenter: parent.verticalCenter
radius: 10
color: darkStyleSwitch.checked ? "#ffffff" : "gray"
}
}
contentItem: Text {
text: darkStyleSwitch.text
font: darkStyleSwitch.font
opacity: enabled ? 1.0 : 0.3
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
leftPadding: 60
}
}
DelayButton {
id: delayButtonStartScan
text: qsTr("Start")
delay: 1000
Layout.maximumHeight: 96
Layout.maximumWidth: 96
height: 96
width: 96
style: DelayButtonStyle {
label: Text {
text: delayButtonStartScan.text
font.pixelSize: 24
opacity: enabled ? 1.0 : 0.3
color: "#fff"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
foreground: Rectangle {
implicitWidth: 96
implicitHeight: 96
border.width: 5
border.color: delayButtonStartScan.text === qsTr(
"Start") ? "lightgreen" : "pink"
opacity: enabled ? 1 : 0.3
color: delayButtonStartScan.text === qsTr(
"Start") ? "green" : "#ea3030"
radius: size / 2
readonly property real size: Math.min(
delayButtonStartScan.width,
delayButtonStartScan.height)
width: size
height: size
anchors.centerIn: parent
Canvas {
id: canvas
anchors.fill: parent
Connections {
target: delayButtonStartScan
onProgressChanged: canvas.requestPaint()
}
onPaint: {
var ctx = getContext("2d")
ctx.clearRect(0, 0, width, height)
ctx.strokeStyle = delayButtonStartScan.text === qsTr(
"Start") ? "green" : "red"
ctx.lineWidth = parent.size / 18
ctx.beginPath()
var startAngle = Math.PI / 2
var endAngle = startAngle + delayButtonStartScan.progress * Math.PI * 2
ctx.arc(width / 2, height / 2,
width / 2 - ctx.lineWidth / 2,
startAngle, endAngle)
ctx.stroke()
}
}
}
}
}
}
}