前言
在平时工作中,对QML的使用还是非常多的,但是经常有一些小问题值得记录和思考,本篇文章持续更新,来记录这些细节问题和踩坑记录。
正文
包含一些自己的理解,以及一些使用问题,方便后续查找。
1. clip
属性
表示裁剪属性,在我们的固定思维中,或许觉得把一个控件定义在父控件内,其子控件就不会超过父控件,其实不然。比如下面代码:
Rectangle {
width: 100
height: 100
border.width: 3
border.color: "black"
//裁剪属性为false
clip: false
Rectangle {
width: 70
height: 70
color: "red"
}
Rectangle {
x: 50
y: 50
width: 70
height: 70
color: "yellow"
}
}
Rectangle
的clip
默认属性为false,上面代码效果是:
可以发现虽然黄色的矩形框定义在父控件内,但是其仍然可以在父控件外绘制,如果我们把父控件的clip
属性设置为true,效果如下:
在这种情况下,父控件就像是一个有边界的容器,子控件是无法在其范围外绘制,这就是clip
的作用和效果。
2.Flickable
控件
这是一个在触摸屏上使用非常广泛的一个控件,当我们想在有限的屏幕上显示更多的内容,最佳的方案就是使用滚动。但是传统的用户界面中,可以使用ScrollView
来滚动视图,用户可以拖动滚动条来滚动视图显示,下面是使用ScrollView
的效果:
在这种情况下,一般都是通过拖拽来完成视图滚动。
但是在基于触摸的用户界面中,就不仅仅是拖拽了,还有轻扫的动作,即像手机浏览内容一样,在手指轻轻滑动离开手机后,视图可以继续滚动,在这种情况下就需要使用Flickable
控件了,对于嵌入式设备来说,可以像手机一样浏览内容是非常好的交互效果。
其实对于Flickable
控件,很多就直接翻译为滚动控件,其实我个人觉得还是其英文原来的意思最好。因为在UI交互中,drag
和flick
是2种不同的手势操作:
drag
:翻译为拖动,是指用户按住某个对象,将其移动到新的位置,在交互中常用来移动控件的位置。flick
:翻译为轻扫,是指用户迅速用手指在触摸屏上划过的动作,在交互中常用来实现快速滚动、切换页面或者浏览内容等操作。
当进行浏览内容时,用户在flick
之后,内容依旧会有一个惯性效果,不会立马停止滚动,这种交互也更符合习惯。下面就来简单介绍一下Flickable
控件的使用:
- 属性
contentWidth
和contentHeight
,用来定义Flickable
中内容的实际尺寸。这就要注意了,在使用Flickable
时不仅仅要设置自己的宽高,也需要设置内容的宽高,当内容宽高大于自身的尺寸,就可以通过滚动来查看超出部分的内容。 - 属性
flickableDirection
,用来定义可以滚动的方向,正常情况下是不需要设置的,当Flickable
的内容宽高大于自身宽高时便可以滚动。 - 属性
boundsBehavior
用来定义边界行为。当拖动或者轻扫时,且Flickable
内容小于自身控件时,我们可以设置为Flickable.StopAtBounds
来让其在边界时静止滚动;当Flickable
可以滚动时,且内容滚动到边界时,默认会有惯性效果,会超过边界的效果,同样可以静止这种效果。 Flickable
的clip
属性默认为false,在使用时建议设置为true。
简单使用代码:
Flickable {
id: flickable
width: 300
height: 400
contentWidth: 300
contentHeight: rec.height
clip: true
boundsBehavior: Flickable.StopAtBounds
Rectangle {
id: rec
width: 300
height: repeater.model * 50
color: "lightblue"
ColumnLayout {
anchors.fill: parent
Repeater {
id: repeater
model: 20
delegate: Text {
text: "Item " + index
width: parent.width
height: 50
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: "black"
font.pixelSize: 20
}
}
}
}
}
代码效果如下:
使用Flickable
的主要注意点就是正确设置其内容的宽高。
3. ChartView
的gridLinePen
属性
在使用ChartView
绘制折线图时,我们通常有个不太关注的需求点,就是设置其背景网格的样式,这里我们是使用ValuesAxis
来设置X、Y轴的样式,以及背景网格线的颜色等,比如下面代码:
ChartView {
id: line
Layout.rightMargin: 0
Layout.preferredHeight: enLargedMode ? 693 : 400
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
legend.visible: false
antialiasing: true
MouseArea {
anchors.fill: parent
onClicked: chartClick()
}
//重点看这里
ValuesAxis{
id: axisX
min: 0
max: chartTotalTime
labelsFont.pixelSize: 20
color: "#000000"
gridLinePen: gcDataResolve.qmlPen()
}
ValuesAxis{
id: axisY
min: 0
max: chartMaxTemperature
labelsFont.pixelSize: 20
color: "#000000"
gridLinePen: gcDataResolve.qmlPen()
}
...省略
在上面注释的地方,我们对X轴以及水平方向的网格线做了处理,比如设置了颜色,但是却没有设置其宽度的属性,可以看见:
这里有颜色可以设置,如果想设置宽度要如何做呢?只有使用gridLinePen
属性,当使用它时,却发现QML语法并不支持也没有QPen
控件,对于这种情况我们可以使用C++代码来创建一个QPen
对象,然后调用它,如上面代码中的qmlPen()
方法:
QPen GCDataResolve::qmlPen()
{
QPen pen;
pen.setWidthF(1.5);
return pen;
}
只需要注册该类进入QML系统,便可以调用该方法获取一个QPen
对象了。
总结
本篇文章持续更新,记录QML中控件的使用细节。