赞
踩
分隔工具栏ToolSeparator、工具提示ToolTip和旋转轮Tumbler
分隔工具栏 ToolSeparator
属性
horizontal : [只读],保存方向是否等于Qt.Horizontal
vertical : [只读],保存方向是否等于Qt.Vertical
orientation : 保留工具分隔符的方向
没有特殊设置的话我们只需要定义ToolSeparator元素就可以了,如果想要设置颜色的话,一定为其配置大小。要不然ToolSeparator是默认最小的,这样就显示不出来分隔了。
ToolBar {
id:toolbar
anchors.centerIn: parent
RowLayout {
anchors.fill: parent
ToolButton {
text: qsTr("Action 1")
}
ToolSeparator {
contentItem: Rectangle {
implicitWidth: 3
implicitHeight: toolbar.height - 20
color: "orange"
}
}
ToolButton {
text: qsTr("Action 2")
}
}
}
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Menu")
color: "lightgray"
Button {
anchors.centerIn: parent
text: "打开左侧菜单"
onClicked: {
if (drawer.visible) {
drawer.close()
} else {
drawer.open()
}
}
}
Drawer {
id: drawer
width: 0.3 * root.width
height: root.height
dragMargin: parent.width / 3
Column {
ToolButton {
width: drawer.width
text: "New file"
}
ToolSeparator {
width: drawer.width
orientation: Qt.Horizontal
}
ToolButton {
width: drawer.width
text: "save"
}
ToolSeparator {
width: drawer.width
orientation: Qt.Horizontal
}
ToolButton {
width: drawer.width
text: "save as..."
}
}
}
}
工具提示 ToolTip
有的时候,当我们的鼠标悬停在某个控件的下方时,会出现一段提示,这就是用到了提示栏。ToolTip是一小段文本,它通知用户控件的功能。通常将其放置在父控件的上方或下方。提示文本可以是任何富文本格式的字符串。
属性
delay : 保留共享工具提示的延迟(毫秒)
text : 保存共享工具提示的文本
timeout : 保存共享工具提示的超时(毫秒)
toolTip : 保存共享工具提示实例
visible : 保存共享工具提示是否可见
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Menu")
color: "lightgray"
Row {
anchors.centerIn: parent
spacing: 30
Button {
text: qsTr("Button")
hoverEnabled: true
ToolTip.delay: 100
ToolTip.timeout: 2000
ToolTip.visible: hovered
ToolTip.text: qsTr("这是提示")
}
Slider {
id: slider
value: 0.5
ToolTip {
parent: slider.handle
visible: slider.pressed
text: slider.value.toFixed(1)
}
}
}
}
旋转轮 Tumbler
属性
count : 保存模型中的项目数
currentIndex : 保存当前项目的索引
currentItem : 设置项目保留在当前索引处
delegate : 委托
model : 模型
moving : 描述由于用户拖动或轻弹而导致的Tumbler当前是否正在移动
visibleItemCount : 保存翻转开关中可见项目的数量
wrap : 确定当Tumbler到达顶部或底部时是否回绕
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Menu")
color: "lightgray"
Frame {
id: frame
padding: 0
anchors.centerIn: parent
Row {
id: row
Tumbler {
id: hoursTumbler
model: 24
}
Tumbler {
id: minutesTumbler
model: 60
}
Tumbler {
id: amPmTumbler
model: 60
}
}
}
}
因为我们平常见到的时间例如23:00:03,时分秒都是两位的且时间并没有0这个选项。所以为了实现日常生活中的效果,我们需要为Tumbler实现委托。将Tumbler的内容设置成我们想要的格式。
设置Tumbler的委托为delegateComponent,Label里面主要是内容和透明度理解起来有点难度,首先来看这个内容,肯定还是Tumbler的模型数据,但是需要对内容物做一些处理。这里用到了Qml中的自定义函数,当Tumbler的模型中的选型总数为12时,代表是时钟模型,所以里面的每个选项的内容需要加1,而分钟和秒钟就不需要加1了。另外,我们将模型数据转成字符串,如果位数不是两位,就为其补0。
再看透明度,我们还是需要对当前选项和非当前选项做一个区分的,涉及到了Tumbler的附件属性displacement,此附加属性为只读属性,表示该项目与当前项目之间的距离(当前项目的话距离为0)。Tumbler有上下两个方向,所以这个距离是由正负的,计算与当前项的距离是需要用到Math.abs()函数,此函数是取绝对值的函数。
Window {
id: root
visible: true
width: 640
height: 480
title: qsTr("Menu")
color: "lightgray"
Rectangle {
id: rect
anchors.centerIn: parent
width: frame.implicitWidth + 10
height: frame.implicitHeight + 10
function formatText(count, modelData) {
var data = count === 12 ? modelData + 1 : modelData
return data.toString().length < 2 ? "0" + data : data
}
Component {
id: delegateComponent
Label {
text: rect.formatText(Tumbler.tumbler.count, modelData)
opacity: 0.4 + (1 - Math.abs(Tumbler.displacement)) * 0.6
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 20
}
}
Frame {
id: frame
padding: 0
anchors.centerIn: parent
Row {
id: row
Tumbler {
id: hoursTumbler
model: 24
delegate: delegateComponent
}
Tumbler {
id: minutesTumbler
model: 60
delegate: delegateComponent
}
Tumbler {
id: amPmTumbler
model: 60
delegate: delegateComponent
}
}
}
}
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。