Hands-On Mobile and Embedded Development with Qt 5 学习笔记 - PathView

PathView 在 Path 中显示模型数据。 它的委托是用于显示模型数据的视图。 它可以是一条简单的画线，也可以是带有文本的图像。 这可以产生流动的轮式数据呈现。 路径可以由以下一个或多个路径段构成：

PathAngleArc：带有半径和中心的弧
PathArc：带半径的圆弧
PathCurve：通过一组点的路径
PathCubic：Bézier 曲线上的路径
PathLine：一条直线
PathQuad：二次贝塞尔曲线
在这里，我们使用 PathArc 来显示一个类似轮子的物品模型，使用我们的 carModel：

有几个特殊的路径段可以增加和改变路径的属性：

PathAttribute：允许在路径上的某些点指定属性
PathMove：将路径移动到新位置

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.fill: parent

     GridView {
         id: gridView
         anchors.fill: parent
         anchors.margins: 30

         model: myListModel

         delegate:  Rectangle {
             id: theDelegate
             Text {
                 text: carModel
             }
             Image {
                 source: "/icons8-sedan-64.png"
             }
         }
         flow: GridView.FlowTopToBottom //FlowLeftToRight //FlowTopToBottom
         layoutDirection: Qt.LeftToRight // RightToLeft // LeftToRight
         verticalLayoutDirection: GridView.BottomToTop //  BottomToTop // TopToBottom
     }
     ListModel {
         id: myListModel
         ListElement { carModel: "Tesla" }
         ListElement { carModel: "Ford Sync 3" }
         ListElement { carModel: "Unknown" }
         ListElement { carModel: "Tesla" }
         ListElement { carModel: "Ford Sync 3" }
         ListElement { carModel: "Unknown" }
         ListElement { carModel: "Tesla" }
         ListElement { carModel: "Ford Sync 3" }
         ListElement { carModel: "Unknown" }
        }

    }
}

 flow: GridView.FlowLeftToRight //FlowTopToBottom  //FlowTopToBottom
         layoutDirection: Qt.LeftToRight // RightToLeft // LeftToRight
         verticalLayoutDirection: GridView.BottomToTop //  BottomToTop // TopToBottom

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        anchors.fill: parent

     PathView {
         id: pathView
         anchors.fill: parent
         anchors.margins: 30

         model: myListModel

         delegate:  Rectangle {
             id: theDelegate
             Text {
                 text: carModel
             }
             Image {
                 source: "/icons8-sedan-64.png"
             }
         }
         path: Path {
             startX: 0; startY: 40
             PathArc { x: 0; y: 400; radiusX:5; radiusY: 5 }
         }

     }

     ListModel {
         id: myListModel
         ListElement { carModel: "Tesla" }
         ListElement { carModel: "Ford Sync 3" }
         ListElement { carModel: "Unknown" }
         ListElement { carModel: "Tesla" }
         ListElement { carModel: "Ford Sync 3" }
         ListElement { carModel: "Unknown" }
         ListElement { carModel: "Tesla" }
         ListElement { carModel: "Ford Sync 3" }
         ListElement { carModel: "Unknown" }
     }
    }
}