At the beginning, please vote for my final blog post: Click here to go to the voting page. The voting button is at the bottom of the page. Vote for me. Thank you.
Pathview, as its name implies, displays data in the model along a specific path. Model can be the built-in listmodel and xmllistmodel of qml, or the derived class of qiniactlistmodel implemented in C ++.
Pathview is probably the most complex and flexible Model-View class library provided by QT quick.
To use a pathview, you must set at least three attributes: model, delegate, and path.
Model and delegate. If you have learned listview, you must have already touched it. PATH is a proprietary feature of pathview. It specifies the path where pathview is used to place items. To use pathview, you must first understand path.
All rights reserved foruok, If You Need To reprint please note the Source: Author foruok, blog http://blog.csdn.net/foruok.
Path
Xi'an is the ancient capital of the 13th dynasty. Although the urine smell is very heavy, it is worth a visit. So you set out from Wuling square in Hangzhou to see the Terracotta Warriors and horses. First, take a taxi to Xiaoshan Airport, walk into the terminal, pass the security check, take a plane to Xianyang Airport, exit, take the airport bus to the railway station, and then take a tour of 5 bus to the terracotta warriors ...... In this process, there are many intermediate transfer points, and the two adjacent intermediate points are the path section. The path between the multiple path sections finally forms the path from Wuling square in Hangzhou to the terracotta warriors in linshu, Xi'an; wuling square is the starting point and Terracotta Warriors are the ending point.
In QT, path is literally translated as a path. A path consists of multiple path elements, starting from the start point, ending at the end, and arriving at the end.
The start point of the path in startx and starty. The pathelements attribute is a list and is the default attribute. It stores Multiple Path elements that constitute a path. Common Path elements include pathline, pathquad, pathcubic, patharc, pathcurve, and pathsvg. The end point of the last path element in the path is the end point of the entire path. If the end point overlaps with the start point, the closed attribute of the path is true.
Path elements, except pathsvg, all have the X and Y attributes and specify the end point of the path in the form of absolute coordinates. the start point is the end point of the previous path segment; the starting point of the first path segment is the starting point of the entire path described by startx and starty of path. In addition, there are two attributes: relativex and relativey, which specify the end point in the form of relative coordinates relative to the start point. You can also use both absolute and relative coordinates, such as using X and relativey to determine the end point of the path segment.
Pathline is the simplest path element. It draws a straight line between the path start point or the end point of the previous path and the end point defined in this element. A simplest path example:
Path { startX: 0; startY: 0; PathLine { x: root.width - 1; y: root.height - 1; } }
The above path is a straight line from the upper left corner to the lower right corner of the interface.
Pathquad beiser curve, also known as the Beitz curve or the beizier curve, is a mathematical curve applied to two-dimensional graphics applications. In 1962, the beiser curve was widely published by French engineer Pierre béserz, who used the beiser curve to design the car's main body. The beiser curve was initially developed by Paul de casteljau in 1959 using the de casteljau algorithm and obtained by using a stable numerical method. The common beiser curves include the linear beiser curve, the quadratic beiser curve, and the cubic beiser curve. Of course, there are also the fourth, fifth, or higher order beiser curves. The linear besell curve is actually a straight line between two points. The second-party beiser curve is generated by two endpoints, one control point, and one function. The cubic beiser curve is generated by two endpoints, two control points, and one function.
In the path topic of QT quick, path elements are provided based on the quadratic besell curve and cubic besell curve.
When we use canvas for 2D plotting, The quadraticcurveto (real cpx, real CPY, real X, real y) method of the context2d object can add a quadratic besell curve to the path, beziercurveto (real cp1x, real cp1y, real cp2x, real cp2y, real X, real y) method is used to add a cubic besell curve to the path.
The pathquad element defines a quadratic besell curve as a path segment. The starting point is the end point (or the starting point of the path) of the previous path element. The ending points are defined by X, Y, relativex, relativey, and control points are defined by controlx, controly, relativecontrolx, and relativecontroly.
A simple second-party besell path definition:
Path { startX: 0; startY: 0; PathQuad { x: root.width - 1; y: root.height - 1; controlX: 0; controlY: root.height - 1; } }
In QT quick, although path describes a path, it is invisible and not visualized enough. Here we use canvas to draw the same curve, so that you can have an intuitive impression. The above path definition corresponds to the qml code:
import QtQuick 2.0import QtQuick.Controls 1.1Canvas { width: 320; height: 240; onPaint: { var ctx = getContext("2d"); ctx.lineWidth = 2; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.quadraticCurveTo(0, height - 1, width - 1, height - 1); ctx.stroke(); } Text { anchors.centerIn: parent; font.pixelSize: 20; text: "quadratic Bezier curve"; }}
Run the "qmlscene pathquad_canvas.qml" command to see the effect:
The patharc path element defines an arc. Its starting point is the end point of the previous path element (or the starting point of the path). Its ending points are defined by X, Y, relativex, and relativey. The arc radius is defined by radiusx and radiusy. The direction attribute defines the direction of the drawn arc. The default value is patharc. Clockwise, which draws an arc clockwise. To draw an arc counterclockwise, set the direction value to patharc. counterclockwise. After you have set the starting point, ending point, radius, and drawing direction of the arc, there may still be two arcs that can satisfy the given parameters. In this case, the uselargearc attribute can be used, the default value is false. A smaller arc is used. If it is set to true, a larger arc is used. Is an example of two arcs:
We will not talk about other path elements one by one. If you use them, Please study the QT help and give them a detailed explanation.
Pathattribute defines some attributes. Its declaration syntax is similar to the following:
Pathattribute {name: "zorder"; Value: 0.2 ;}
The name attribute specifies the name of the property to be defined. The value of the real type value attribute is the value of the property to be defined.
Put pathattribute in front of a path segment to specify the attribute value at the beginning of the path segment; pathattribute after the path segment indicates the attribute value at the end of the path segment; and the attribute value on the path segment, the path is automatically calculated based on the start and end values.
We can use pathattribute to define some attributes to control the appearance of items distributed on the path. For example, define the attribute "zorder" to control the Z-order of items distributed along the path.
The following is a simple example:
Path { startX: 10; startY: 100; PathAttribute { name: "zOrder"; value: 0 } PathAttribute { name: "itemAlpha"; value: 0.1 } PathAttribute { name: "itemScale"; value: 0.6 } PathLine { x: root.width/2 - 40; y: 100; } PathAttribute { name: "zOrder"; value: 10 } PathAttribute { name: "itemAlpha"; value: 0.8 } PathAttribute { name: "itemScale"; value: 1.2 } PathLine { relativeX: root.width/2 - 60; relativeY: 0; } PathAttribute { name: "zOrder"; value: 0 } PathAttribute { name: "itemAlpha"; value: 0.1 } PathAttribute { name: "itemScale"; value: 0.6 } }
I divided the path into two sections, starting from (10,100 ). Three attributes are defined for the path: zorder, itemalpha, and itemscale. These attributes are used in the pathview delegate. Take the zorder attribute as an example. The value at the starting point is 0, the middle value is 1, and the end value is 0. For others, the path is automatically generated based on the values at both ends.
The attributes defined by pathattriate are exported as the additional attributes of the top-level item of Delegate and accessed in the form of pathview. $ {name. For example, use pathview. zorder to access the zorder attribute in delegate. Pathpercent is placed after the elements that constitute the path, for example, after pathline, indicating the part of the path before it (usually composed of one or more path elements) the ratio of the number of items to the total number of items in the path.
The Value Attribute of pathpercent is a real value in the range of 0.0 to 1.0. Note that when pathpercent is used in a path, the value of the pathpercent element increases progressively. If a path is between two pathpercent, the ratio of the number of items placed above the path to the total number of items on the path is the difference between the value of the pathpercent following the path and the value of the previous pathpercent.
The following is a simple example:
Path { startX: 10; startY: 100; PathLine { x: root.width/2 - 40; y: 100; } PathPercent { value: 0.28; } PathLine { relativeX: root.width/2 - 60; relativeY: 0; } }
The number of items placed on the first path segment accounts for 28% of the total number of items on the path. Combined with the instance, the left rectangle is sparse and the right side is compact.
Pathview has learned about objects such as path, pathattricent, and pathpercent. Let's take a look at pathview.
Like listview, pathview has a count attribute that stores the total number of items to be displayed in pathview. In addition, pathview also has a pathitemcount attribute, which specifies the number of items visible on the path, which can be different from count.
The values of preferredhighlightbegin and preferredhighlightend attributes are of the real type and range from 0.0 to 1.0. Preferredhighlightbegin specifies the preferred starting position of the current item in the view, and preferredhighlightend specifies the preferred ending position of the current item in the view. There is also a highlightrangemode attribute related to them, which can be pathview. nohighlightrange, pathview. applyrange or pathview. strictlyenforcerange. For example, if you want to strictly restrict the current item to the center of the path, you can set highlightrangemode to pathview. strictlyenforcerange, and set preferredhighlightbegin and preferredhighlightend to 0.5.
The highlight attribute specifies the component that draws the highlight effect for the current item.
The pathview is similar to the flickable one. It has a spring effect when you drag a view. If the interactive attribute is set to true, you can drag the pathview. If a bullet occurs, the value of the function changes to true. The flickdeceleration Property sets the attenuation rate of the spring effect. The default value is 100.
The decrementcurrentindex () and incrementcurrentindex () methods can decrease or increase the index of the current item maintained by pathview. These two functions have a circular effect. If you do not need them, you can modify the currentindex attribute to implement your logic.
Pathview also exports three additional attributes to delegate: iscurrentitem (Boolean value), onpath (Boolean value), and view. Use pathview in the top-level item of delegate. iscurrentitem can be used to determine whether this item is the current item of pathview. onpath indicates whether the item is in the path. pathview. view points to the pathview instance to which the item belongs. You can use it to access the methods, attributes, and signals of the pathview.
For more details about pathview, refer to the pathview documentation in QT help. Now let's take a look at a pathview instance. below is pathview_simple.qml:
import QtQuick 2.0import QtQuick.Controls 1.1Rectangle { width: 480; height: 300; color: "black"; id: root; Component { id: rectDelegate; Item { id: wrapper; z: PathView.zOrder; opacity: PathView.itemAlpha; scale: PathView.itemScale; Rectangle { width: 100; height: 60; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1); border.width: 2; border.color: wrapper.PathView.isCurrentItem ? "red" : "lightgray"; Text { anchors.centerIn: parent; font.pixelSize: 28; text: index; color: Qt.lighter(parent.color, 2); } } } } PathView { id: pathView; anchors.fill: parent; interactive: true; pathItemCount: 7; preferredHighlightBegin: 0.5; preferredHighlightEnd: 0.5; highlightRangeMode: PathView.StrictlyEnforceRange; delegate: rectDelegate; model: 15; path:Path { startX: 10; startY: 100; PathAttribute { name: "zOrder"; value: 0 } PathAttribute { name: "itemAlpha"; value: 0.1 } PathAttribute { name: "itemScale"; value: 0.6 } PathLine { x: root.width/2 - 40; y: 100; } PathAttribute { name: "zOrder"; value: 10 } PathAttribute { name: "itemAlpha"; value: 0.8 } PathAttribute { name: "itemScale"; value: 1.2 } PathLine { relativeX: root.width/2 - 60; relativeY: 0; } PathAttribute { name: "zOrder"; value: 0 } PathAttribute { name: "itemAlpha"; value: 0.1 } PathAttribute { name: "itemScale"; value: 0.6 } } focus: true; Keys.onLeftPressed: decrementCurrentIndex(); Keys.onRightPressed: incrementCurrentIndex(); }}
I defined a very simple delegate: display the item index in a rectangle with a border. The top-level item of delegate uses the zorder, itemalpha, itemscale, and other additional attributes defined by pathattribute in the path to control the size and transparency of the item. The color of the rectangle object is randomly generated. The border is set through the iscurrentitem additional attributes. Note that the additional attributes are only available in the top-level item, that is, they can be directly accessed in wrapper, so wrapper. pathview. iscurrentitem is used in rectangle to access them.
The model is simpler and only a number is given.
The path object has been introduced in the pathattribute section.
Set focus to true to handle key events. You can use the left and right arrow keys to browse items in pathview cyclically.
I set the number of items visible on the path to 7, and the current item remains in the center of the path.
Run the "qmlscene pathview_simple.qml" command. The result is as follows:
Observe the occlusion effect between items: the current item is at the top, the items at both ends of the path are at the bottom, and the items in the middle are recursive. This is to divide the path into two path elements and apply the zorder attribute defined by pathattriate to delegate. You can remove the zorder attribute Declaration and related statements to see the effect. You can also modify the itemalpha and itemscale attributes. If you want to try the pathpercent effect, you can add the code "pathpercent {value: 0.28 ;}" after the first pathline, And then you can see the effect:
It looks a little strange. Let's look at it.
Yes, the selected item and its highlighted box are blocked. Adjust the preferredhighlightbegin attribute and set it to 0.3. Then, let's take a look:
It's okay!
All rights reserved foruok, If You Need To reprint please note the Source: Author foruok, blog http://blog.csdn.net/foruok.
Pathview also has many other attributes. You can use it to study QT help. Review this series of articles:
- Qt quick introduction
- Qml language basics
- Qt Quick's hello World graphic explanation
- Simple QT quick tutorial
- Signal and slot of QT quick event processing
- Qt quick event processing-mouse, keyboard, and Timer
- Qt quick event processing-pinch, zoom, and rotate
- Dynamic Creation of QT quick components and objects
- Introduction to QT quick Layout
- Qml and C ++ mixed programming in QT quick
- Qt quick image processing instance meitu xiuxiu (source code download)
Finally, please vote for my final blog post: Click here to go to the voting page. The voting button is at the bottom of the page to vote for me. Thank you.
Explanation of QT quick pathview
