本文介绍如何使用Qml的Switch控件，通过自定义样式代码创建一款具有Flat风格的开关按钮。详细展示了从基本的Switch按钮代码到不同颜色样式的实现，适用于Qt Quick应用程序中的界面设计。
可以打开或关闭的开关按钮，使用Qml的Switch控件修改而成。
0x00 Switch按钮代码
import QtQuick 2.0
import QtQuick.Controls 2.0
Switch {
id: root
property color checkedColor: "#0ACF97"
indicator: Rectangle {
width: 54
height: 34
radius: height / 2
color: root.checked ? checkedColor : "white"
border.width: 2
border.color: root.checked ? checkedColor : "#E5E5E5"
Rectangle {
x: root.checked ? parent.width - width - 2 : 1
width: root.checked ? parent.height - 4 : parent.height - 2
height: width
radius: width / 2
anchors.verticalCenter: parent.verticalCenter
color: "white"
border.color: "#D5D5D5"
Behavior on x {
NumberAnimation { duration: 200 }
}
}
}
}
0x01 Switch样式代码
GridLayout {
width: root.width
rows: switchRepeater.count
Repeater {
id: switchRepeater
model: ["#727CF5", "#0ACF97", "#F9375E", "#FFBC00", "#2B99B9"]
Column {
spacing: 15
Switch {
checkedColor: modelData
checked: true
}
Switch {
checkedColor: modelData
}
Switch {
checkedColor: modelData
checked: true
}
}
}
}
更多请关注公众号Qt君
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
