Quick.Controls 1.4 新增组件
import QtQuick.Extras 1.4 //扩展库
-
CircularGauge
-
一个类似仪表盘的圆形控件,用指针指示刻度;
-
CircularGauge
有个CircularGaugeStyle
来控制控件样式; -
举个例子:
CircularGauge { value: accelerating ? maximumValue : 0 property bool accelerating: false Keys.onSpacePressed: { accelerating = true //表示加速状态 } Keys.onReleased: (event)=> { if (event.key === Qt.Key_Space) { accelerating = false; event.accepted = true; //以防止事件沿项目层次结构向上传播 } } Component.onCompleted: forceActiveFocus() Behavior on value { NumberAnimation { duration: 1000 easing.type: Easing.Linear } } style: CircularGaugeStyle { id: style function degreesToRadians(degrees) { return degrees * (Math.PI / 180); } //自己绘制刻度样式 background: Canvas { onPaint: { var ctx = getContext("2d"); ctx.reset(); ctx.beginPath(); ctx.strokeStyle = "yellow"; ctx.lineWidth = outerRadius * 0.02; ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2, degreesToRadians(valueToAngle(80) - 90), degreesToRadians(valueToAngle(100) - 90)); ctx.stroke(); } } //大刻度 tickmark: Rectangle { visible: styleData.value < 80 || styleData.value % 10 == 0 implicitWidth: outerRadius * 0.02 antialiasing: true implicitHeight: outerRadius * 0.06 color: styleData.value >= 80 ? "#e34c22" : "cadetblue" } //小刻度 minorTickmark: Rectangle { visible: styleData.value < 80 implicitWidth: outerRadius * 0.01 antialiasing: true implicitHeight: outerRadius * 0.03 color: "cadetblue" } //刻度下的文字 tickmarkLabel: Text { font.pixelSize: Math.max(6, outerRadius * 0.1) text: styleData.value color: styleData.value >= 80 ? "#e34c22" : "cadetblue" antialiasing: true } //指针 needle: Rectangle { y: outerRadius * 0.15 implicitWidth: outerRadius * 0.03 implicitHeight: outerRadius * 0.9 antialiasing: true color: "cadetblue" } //中心的圆心组件 foreground: Item { Rectangle { width: outerRadius * 0.2 height: width radius: width / 2 color: "darkslategray" anchors.centerIn: parent } } } }
-
左边是自定义样式的表盘,右边则是默认的;
-
-
DelayButton
-
延时按钮,可设置从按下开始到真正执行的时间延迟;
-
释放按钮外圈有一层指示器,可直观的表示时间延迟;
-
提供
DelayButtonStyle
来控制该组件样式;
-
Dial
- 仪表盘调节器,类似
CircularGauge
的传统风格旋钮; - 提供
DialStyle
来控制该组件的样式;
- 仪表盘调节器,类似
-
Gauge
-
显示一定数值范围的垂直或水平刻度器;
-
提供
GaugeStyle
来控制该组件的样式;
-
-
Picture
- 以矢量格式显示图标图片,可以用
color
属性给图标上色; - 使用
source
属性指定路径或QPicture
数据;例如:source : "mypicture.dat"
- 该组件无样式控制
Style
;
- 以矢量格式显示图标图片,可以用
-
PieMenu
-
饼状菜单:
-
提供
PieMenuStyle
自定义该控件样式;
-
-
StatusIndicator
-
状态指示器:
-
提供
StatusIndicatorStyle
来控制该组件样式;
-
-
ToggleButton
-
两种状态的切换按钮:
-
提供
ToggleButtonStyle
来控制该控件样式;
-
-
Tumbler
-
用上下滚动的方式选择一个值,每一列都可以上下拖动:
-
提供
TumblerStyle
来控制该控件样式; -
每一列通过
TumblerColumn
组件来设置具体数值;
-