add: Draw graphics(Rectangle+Triangle+Circle+Ellipse) and use SequentialAnimation

examples/TaoQuickShow/Contents.qrc

@@ -51,5 +51,11 @@
         <file>Contents/General/Tables.qml</file>
         <file>Trans/language_zh.json</file>
         <file>Contents/Effect/EditJoggle.qml</file>
+	<file>Contents/General/RoundRects.qml</file>
+        <file>Contents/General/Shapes.qml</file>
+        <file>Contents/ShapeGallery/ShapeRectrangle.qml</file>
+        <file>Contents/ShapeGallery/ShapeCircle.qml</file>
+        <file>Contents/ShapeGallery/ShapeEllipse.qml</file>
+        <file>Contents/ShapeGallery/ShapeTriangle.qml</file>
     </qresource>
 </RCC>

examples/TaoQuickShow/Contents/General/RoundRects.qml

@@ -0,0 +1,74 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import TaoQuick 1.0
+
+Item {
+    anchors.fill: parent
+    Rectangle { //背景红色，衬托一下
+        x: 10
+        width: 100
+        height: 160
+        color: "red"
+    }
+
+    RoundRectangle {
+        id: roundRect
+        x: 40
+        y: 10
+        width: 200
+        height: 160
+        radius: 40
+        leftTopRound: lt.checked
+        rightTopRound: rt.checked
+        leftBottomRound: lb.checked
+        rightBottomRound: rb.checked
+        color: "#333666"      //半透明色
+    }
+    Rectangle { //背景红色，衬托一下
+        x: 10
+        y: 300
+        width: 100
+        height: 160
+        color: "red"
+    }
+    RoundRectangleShape{
+        x: 40
+        y: 340
+        width: 200
+        height: 160
+        radius: 40
+        leftTopRound: lt.checked
+        rightTopRound: rt.checked
+        leftBottomRound: lb.checked
+        rightBottomRound: rb.checked
+        color: "#A0333666"      //半透明色
+
+    }
+    Grid {
+        x: 300
+        y: 10
+        columns: 2
+        spacing: 10
+
+        CheckBox {
+            id: lt
+            text: "LeftTop"
+            checked: true
+        }
+        CheckBox {
+            id: rt
+            text: "RightTop"
+            checked: true
+        }
+        CheckBox {
+            id: lb
+            text: "LeftBottom"
+            checked: true
+        }
+        CheckBox {
+            id: rb
+            text: "rightBottom"
+            checked: true
+        }
+    }
+}

examples/TaoQuickShow/Contents/General/Shapes.qml

@@ -0,0 +1,76 @@
+import QtQuick 2.9
+import QtQuick.Shapes 1.0
+
+Rectangle {
+    id: root
+    width: 1024
+    height: 768
+
+    property color col: "lightsteelblue"
+
+    ListModel {
+        id: pathGalleryModel
+        ListElement {
+            name: "Rectrangle"
+            shapeUrl: "../ShapeGallery/ShapeRectrangle.qml"
+        }
+        ListElement {
+            name: "Triangle"
+            shapeUrl: "../ShapeGallery/ShapeTriangle.qml"
+        }
+        ListElement {
+            name: "Circle"
+            shapeUrl: "../ShapeGallery/ShapeCircle.qml"
+        }
+        ListElement {
+            name: "Ellipse"
+            shapeUrl: "../ShapeGallery/ShapeEllipse.qml"
+        }
+    }
+
+    property int gridSpacing: 10
+
+    Component {
+        id: pathGalleryDelegate
+        Rectangle {
+            border.color: "purple"
+            width: grid.cellWidth - root.gridSpacing
+            height: grid.cellHeight - root.gridSpacing
+            Column {
+                anchors.fill: parent
+                anchors.margins: 4
+                Item {
+                    width: parent.width
+                    height: parent.height - delegText.height
+                    Loader {
+                        source: Qt.resolvedUrl(shapeUrl)
+                        anchors.fill: parent
+                    }
+                }
+                Text {
+                    id: delegText
+                    text: model.name
+                    font.pointSize: 16
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.margins: 10
+        color: "transparent"
+        clip: true
+
+        GridView {
+            id: grid
+            anchors.fill: parent
+            anchors.margins: root.gridSpacing
+            cellWidth: 300
+            cellHeight: 300
+            delegate: pathGalleryDelegate
+            model: pathGalleryModel
+        }
+    }
+}

examples/TaoQuickShow/Contents/ShapeGallery/ShapeCircle.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.12
+import QtQuick.Shapes 1.12
+
+
+Rectangle {
+    width: 120
+    height: 120
+    color: th.pressed ? "steelBlue" : "lightGray"
+    containmentMask: ctr
+
+    TapHandler { id: th }
+
+    Shape {
+        id: circ
+        anchors.fill: parent
+
+        SequentialAnimation on opacity {
+            loops: Animation.Infinite
+            NumberAnimation { from: 1.0; to: 0.0; duration: 5000 }
+            NumberAnimation { from: 0.0; to: 1.0; duration: 5000 }
+        }
+
+        ShapePath {
+            id: shapePath
+            strokeWidth: 3
+            strokeColor: "black"
+            fillColor: "white"
+
+            property real r: 40
+            startX: circ.width / 2 - r
+            startY: circ.height / 2 - r
+            PathArc {
+                x: circ.width / 2 + shapePath.r
+                y: circ.height / 2 + shapePath.r
+                radiusX: shapePath.r; radiusY: shapePath.r
+                useLargeArc: true
+            }
+            PathArc {
+                x: circ.width / 2 - shapePath.r
+                y: circ.height / 2 - shapePath.r
+                radiusX: shapePath.r; radiusY: shapePath.r
+                useLargeArc: true
+            }
+        }
+    }
+}

examples/TaoQuickShow/Contents/ShapeGallery/ShapeEllipse.qml

@@ -0,0 +1,41 @@
+import QtQuick 2.12
+import QtQuick.Shapes 1.12
+
+
+Rectangle {
+    width: 120
+    height: 120
+    color: th.pressed ? "steelBlue" : "lightGray"
+    containmentMask: ctr
+
+    TapHandler { id: th }
+
+    Shape {
+        id: shape
+        anchors.fill: parent
+
+        ShapePath {
+            id: p
+            strokeWidth: 3
+            strokeColor: "black"
+            fillColor: "white"
+
+            property real xr: 70
+            property real yr: 30
+            startX: shape.width / 2 - xr
+            startY: shape.height / 2 - yr
+            PathArc {
+                x: shape.width / 2 + p.xr
+                y: shape.height / 2 + p.yr
+                radiusX: p.xr; radiusY: p.yr
+                useLargeArc: true
+            }
+            PathArc {
+                x: shape.width / 2 - p.xr
+                y: shape.height / 2 - p.yr
+                radiusX: p.xr; radiusY: p.yr
+                useLargeArc: true
+            }
+        }
+    }
+}

examples/TaoQuickShow/Contents/ShapeGallery/ShapeRectrangle.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.12
+import QtQuick.Shapes 1.12
+
+
+Rectangle {
+    id:root
+    width: 120
+    height: 120
+    color: th.pressed ? "steelBlue" : "lightGray"
+    containmentMask: ctr
+
+    TapHandler { id: th }
+
+    Shape {
+        id: ctr
+        anchors.fill: parent
+        containsMode: Shape.FillContains
+
+        ShapePath {
+            strokeColor: "white"
+            fillColor: "white"
+            strokeWidth: 3
+
+            startX: 90; startY: 90
+            PathLine { x: 180; y: 90 }
+            PathLine { x: 180; y: 180}
+            PathLine { x: 90; y: 180 }
+            PathLine { x: 90; y: 90 }
+        }
+
+        NumberAnimation on rotation {
+            from: 0
+            to: 360
+            duration: 5000
+            loops: Animation.Infinite
+        }
+    }
+}

examples/TaoQuickShow/Contents/ShapeGallery/ShapeTriangle.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.12
+import QtQuick.Shapes 1.12
+
+
+Rectangle {
+    width: 120
+    height: 120
+    color: th.pressed ? "steelBlue" : "lightGray"
+    containmentMask: ctr
+
+    TapHandler { id: th }
+
+    Shape {
+        id: ctr
+        anchors.fill: parent
+        containsMode: Shape.FillContains
+
+        ShapePath {
+            strokeColor: "black"
+            fillColor: "white"
+            strokeWidth: 3
+
+            SequentialAnimation on strokeColor {
+                loops: Animation.Infinite
+                ColorAnimation {
+                    from: "black"
+                    to: "green"
+                    duration: 5000
+                }
+                ColorAnimation {
+                    from: "green"
+                    to: "yellow"
+                    duration: 5000
+                }
+                ColorAnimation {
+                    from: "yellow"
+                    to: "black"
+                    duration: 5000
+                }
+            }
+
+            startX: ctr.width/2; startY: 80
+            PathLine { x: ctr.width/2 + 50; y: 80 + 100 }
+            PathLine { x: ctr.width/2 - 50; y: 80 + 100 }
+            PathLine { x: ctr.width/2; y: 80 }
+        }
+    }
+}

examples/TaoQuickShow/Qml/Pane/ContentModel.qml

@@ -44,6 +44,21 @@ ListModel {
         group: "General"
         groupOpen: true
     }    
+    ListElement {
+        name: "RoundRect"
+        source: "General/RoundRects.qml"
+        visible: true
+        group: "General"
+        groupOpen: true
+    }
+    
+    ListElement {
+        name: "Shapes"
+        source: "General/Shapes.qml"
+        visible: true
+        group: "General"
+        groupOpen: true
+    }
 
     ListElement {
         name: "Others"

examples/TaoQuickShow/Trans/language_zh.json

@@ -116,6 +116,10 @@
             "key": "IP address",
             "value": "IP地址"
         },
+        {
+            "key": "RoundRect",
+            "value": "圆角矩形"
+        },
         {
             "key": "Home",
             "value": "首页"
@@ -325,6 +329,10 @@
             "key": "Others",
             "value": "其它"
         },
+        {
+            "key": "Shapes",
+            "value": "图形"
+        },
         {
             "key": "Sponsors",
             "value": "赞助"

examples/TaoQuickShow/taoMacro.h

@@ -0,0 +1,7 @@
+#pragma once
+#define TaoQuickImport "file:///E:/00github/TaoQuick/src"
+#define TaoQuickImage "file:///E:/00github/TaoQuick/src/TaoQuick/Images/"
+#define qmlPath "file:///E:/00github/TaoQuick/examples/TaoQuickShow/Qml/"
+#define contentsPath "file:///E:/00github/TaoQuick/examples/TaoQuickShow/Contents/"
+#define imgPath "file:///E:/00github/TaoQuick/examples/TaoQuickShow/Image/"
+#define transDir "E:/00github/TaoQuick/examples/TaoQuickShow/Trans/"

src/TaoQuick/Qml/Basic/CusCallLater.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+Item {
+    Component {
+        id: timerComp
+        Timer {
+            id: timer
+            repeat: false
+            property var _cb: function() {}
+            onTriggered: {
+                _cb()
+                destroy(parent)
+            }
+            function setTimeout(callback, delayTime) {
+                _cb = callback;
+                interval = delayTime;
+                start();
+            }
+        }
+    }
+    function callLate(callback, delayTime) {
+        var timerObj = timerComp.createObject()
+        timerObj.setTimeout(callback, delayTime)
+    }
+
+}

src/TaoQuick/Qml/Basic/RoundRectangle.qml

@@ -0,0 +1,100 @@
+import QtQuick 2.10
+import QtQuick.Controls 2.2
+Rectangle  {
+    id: root
+    implicitWidth: 50
+    implicitHeight: 50
+    radius: 0
+    readonly property int lt: Qt.AlignLeft | Qt.AlignTop
+    readonly property int lb: Qt.AlignLeft | Qt.AlignBottom
+    readonly property int rt: Qt.AlignRight | Qt.AlignTop
+    readonly property int rb: Qt.AlignRight | Qt.AlignBottom
+
+    property bool leftTopRound: false
+    property bool rightTopRound: false
+    property bool leftBottomRound: false
+    property bool rightBottomRound: false
+
+    onLeftTopRoundChanged: {
+        updateCorners()
+    }
+    onLeftBottomRoundChanged: {
+        updateCorners()
+    }
+    onRightBottomRoundChanged: {
+        updateCorners()
+    }
+    onRightTopRoundChanged: {
+        updateCorners()
+    }
+
+    function updateCorners() {
+        var s = []
+        if(leftTopRound) {
+            s.push(lt)
+        }
+        if(rightTopRound) {
+            s.push(rt)
+        }
+        if(leftBottomRound) {
+            s.push(lb)
+        }
+        if(rightBottomRound) {
+            s.push(rb)
+        }
+        corners = s
+    }
+    property var corners: []
+    Repeater {
+        model: [
+            {
+                x: 0,
+                y: 0,
+                visible: internal.aligns(lt),
+                radius: root.radius
+            },
+            {
+                x: root.width - root.radius,
+                y: 0,
+                visible: internal.aligns(rt),
+                radius: root.radius
+            },
+            {
+                x: 0,
+                y: root.height - root.radius,
+                visible: internal.aligns(lb),
+                radius: root.radius
+            },
+            {
+                x: root.width - root.radius,
+                y: root.height - root.radius,
+                visible: internal.aligns(rb),
+                radius: root.radius
+            }
+        ]
+
+        Rectangle {
+            x: modelData.x; y: modelData.y
+            width: modelData.radius; height: width
+            visible: !modelData.visible
+            color: parent.color
+        }
+    }
+    QtObject {
+        id: internal
+
+        function aligns(direction) {
+            if (Array.isArray(root.corners)) {
+                for (var i = 0; i < root.corners.length; i++) {
+                    if ((root.corners[i] & direction) === direction)
+                        return true
+                }
+
+                return false;
+            }
+            else {
+                return (root.corners & direction) === direction
+            }
+        }
+    }
+}

src/TaoQuick/Qml/Basic/RoundRectangleShape.qml

@@ -0,0 +1,77 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.5
+import QtQuick.Shapes 1.12
+Shape {
+    id: root
+    //左上角是否圆角
+    property bool leftTopRound: true
+    //左下角是否圆角
+    property bool leftBottomRound: true
+    //右上角是否圆角
+    property bool rightTopRound: true
+    //右下角是否圆角
+    property bool rightBottomRound: true
+    //圆角半径
+    property real radius
+    //颜色
+    property color color: "red"
+
+    //多重采样抗锯齿
+    layer.enabled: true
+    layer.samples: 8
+
+    //平滑处理
+    smooth: true
+
+    //默认抗锯齿
+    antialiasing: true
+
+    ShapePath {
+        fillColor: color
+        startX: leftTopRound ? radius : 0
+        startY: 0
+//        fillRule: ShapePath.WindingFill
+        PathLine {
+            x: rightTopRound ? root.width - radius : root.width
+            y: 0
+        }
+        PathArc {
+            x: root.width
+            y: rightTopRound ? radius : 0
+            radiusX: rightTopRound ? radius : 0
+            radiusY: rightTopRound ? radius : 0
+        }
+
+        PathLine {
+            x: root.width
+            y: rightBottomRound ? root.height - radius : root.height
+        }
+        PathArc {
+            x: rightBottomRound ? root.width - radius : root.width
+            y: root.height
+            radiusX: rightBottomRound ? radius : 0
+            radiusY: rightBottomRound ? radius : 0
+        }
+        PathLine {
+            x: leftBottomRound ? radius : 0
+            y: root.height
+        }
+        PathArc {
+            x: 0
+            y: leftBottomRound ? root.height - radius : root.height
+            radiusX: leftBottomRound ? radius : 0
+            radiusY: leftBottomRound ? radius : 0
+        }
+
+        PathLine {
+            x: 0
+            y: leftTopRound ? radius : 0
+        }
+        PathArc {
+            x: leftTopRound ? radius : 0
+            y: 0
+            radiusX: leftTopRound ? radius : 0
+            radiusY: leftTopRound ? radius : 0
+        }
+    }
+}

src/TaoQuick/TaoQuick.qrc

@@ -1,13 +1,15 @@
-<RCC>
+<RCC>
     <qresource prefix="/TaoQuick">
         <file>qmldir</file>
         <file>Qml/CusConfig.qml</file>
         <file>Qml/Basic/BasicText.qml</file>
         <file>Qml/Basic/BasicTooltip.qml</file>
+        <file>Qml/Basic/CusCallLater.qml</file>
         <file>Qml/Basic/MoveArea.qml</file>
+        <file>Qml/Basic/RoundRectangle.qml</file>
+        <file>Qml/Basic/RoundRectangleShape.qml</file>
         <file>Qml/Basic/TransArea.qml</file>
         <file>Qml/CusBackground/CusBackground.qml</file>
-        <file>Qml/CusButton/CusButton.qml</file>
         <file>Qml/CusButton/CusButton_Blue.qml</file>
         <file>Qml/CusButton/CusButton_Gradient.qml</file>
         <file>Qml/CusButton/CusButton_Image.qml</file>
@@ -15,32 +17,33 @@
         <file>Qml/CusButton/CusButton_ImageColorOverlay.qml</file>
         <file>Qml/CusButton/CusButton_Red.qml</file>
         <file>Qml/CusButton/CusButton_White.qml</file>
+        <file>Qml/CusButton/CusButton.qml</file>
         <file>Qml/CusButton/CusRadioButton.qml</file>
         <file>Qml/CusButton/CusTextButton.qml</file>
         <file>Qml/CusCheckBox/CusCheckBox.qml</file>
         <file>Qml/CusCheckBox/CusSwitch.qml</file>
         <file>Qml/CusComboBox/CusComboBox.qml</file>
+        <file>Qml/CusImage/CusImage_Tip.qml</file>
         <file>Qml/CusImage/CusImage.qml</file>
         <file>Qml/CusImage/CusImageOverlay.qml</file>
-        <file>Qml/CusImage/CusImage_Tip.qml</file>
         <file>Qml/CusInput/CusIPAddress.qml</file>
-        <file>Qml/CusInput/CusTextField.qml</file>
         <file>Qml/CusInput/CusTextField_Btn.qml</file>
         <file>Qml/CusInput/CusTextField_Search.qml</file>
         <file>Qml/CusInput/CusTextField_Valid.qml</file>
+        <file>Qml/CusInput/CusTextField.qml</file>
         <file>Qml/CusInput/CusTextInput.qml</file>
-        <file>Qml/CusLabel/CusLabel.qml</file>
         <file>Qml/CusLabel/CusLabel_Center.qml</file>
         <file>Qml/CusLabel/CusLabel_Left.qml</file>
+        <file>Qml/CusLabel/CusLabel.qml</file>
         <file>Qml/CusListView/CusListView.qml</file>
         <file>Qml/CusPopup/CusPopup.qml</file>
         <file>Qml/CusPopup/CusToolTip_Triangle.qml</file>
         <file>Qml/CusPopup/CusTriangleTipBorder.qml</file>
         <file>Qml/CusScroll/CusScrollBar.qml</file>
-        <file>Qml/CusSlider/CusSlider.qml</file>
         <file>Qml/CusSlider/CusSlider_Spin.qml</file>
-        <file>Qml/CusSpinBox/CusSpinBox.qml</file>
+        <file>Qml/CusSlider/CusSlider.qml</file>
         <file>Qml/CusSpinBox/CusSpinBox_HourMinute.qml</file>
+        <file>Qml/CusSpinBox/CusSpinBox.qml</file>
         <file>Qml/CusTable/CusTableConstant.qml</file>
         <file>Qml/CusTable/CusTableHeader.qml</file>
         <file>Qml/CusTable/CusTableRow.qml</file>
@@ -103,12 +106,12 @@
         <file>Images/particle.png</file>
         <file>Images/right.png</file>
         <file>Images/rotate.png</file>
-        <file>Images/Search.png</file>
         <file>Images/Search_Clear.png</file>
+        <file>Images/Search.png</file>
         <file>Images/spinner.png</file>
-        <file>Images/Table_Asc.png</file>
         <file>Images/Table_Asc_Hovered.png</file>
-        <file>Images/Table_Desc.png</file>
+        <file>Images/Table_Asc.png</file>
         <file>Images/Table_Desc_Hovered.png</file>
+        <file>Images/Table_Desc.png</file>
     </qresource>
 </RCC>

src/TaoQuick/qmldir

@@ -1,10 +1,12 @@
-module TaoQuick
+module TaoQuick
 BasicText 1.0 Qml/Basic/BasicText.qml
 BasicTooltip 1.0 Qml/Basic/BasicTooltip.qml
+CusCallLater 1.0 Qml/Basic/CusCallLater.qml
 MoveArea 1.0 Qml/Basic/MoveArea.qml
+RoundRectangle 1.0 Qml/Basic/RoundRectangle.qml
+RoundRectangleShape 1.0 Qml/Basic/RoundRectangleShape.qml
 TransArea 1.0 Qml/Basic/TransArea.qml
 CusBackground 1.0 Qml/CusBackground/CusBackground.qml
-CusButton 1.0 Qml/CusButton/CusButton.qml
 CusButton_Blue 1.0 Qml/CusButton/CusButton_Blue.qml
 CusButton_Gradient 1.0 Qml/CusButton/CusButton_Gradient.qml
 CusButton_Image 1.0 Qml/CusButton/CusButton_Image.qml
@@ -12,32 +14,33 @@ CusButton_ImageBackground 1.0 Qml/CusButton/CusButton_ImageBackground.qml
 CusButton_ImageColorOverlay 1.0 Qml/CusButton/CusButton_ImageColorOverlay.qml
 CusButton_Red 1.0 Qml/CusButton/CusButton_Red.qml
 CusButton_White 1.0 Qml/CusButton/CusButton_White.qml
+CusButton 1.0 Qml/CusButton/CusButton.qml
 CusRadioButton 1.0 Qml/CusButton/CusRadioButton.qml
 CusTextButton 1.0 Qml/CusButton/CusTextButton.qml
 CusCheckBox 1.0 Qml/CusCheckBox/CusCheckBox.qml
 CusSwitch 1.0 Qml/CusCheckBox/CusSwitch.qml
 CusComboBox 1.0 Qml/CusComboBox/CusComboBox.qml
+CusImage_Tip 1.0 Qml/CusImage/CusImage_Tip.qml
 CusImage 1.0 Qml/CusImage/CusImage.qml
 CusImageOverlay 1.0 Qml/CusImage/CusImageOverlay.qml
-CusImage_Tip 1.0 Qml/CusImage/CusImage_Tip.qml
 CusIPAddress 1.0 Qml/CusInput/CusIPAddress.qml
-CusTextField 1.0 Qml/CusInput/CusTextField.qml
 CusTextField_Btn 1.0 Qml/CusInput/CusTextField_Btn.qml
 CusTextField_Search 1.0 Qml/CusInput/CusTextField_Search.qml
 CusTextField_Valid 1.0 Qml/CusInput/CusTextField_Valid.qml
+CusTextField 1.0 Qml/CusInput/CusTextField.qml
 CusTextInput 1.0 Qml/CusInput/CusTextInput.qml
-CusLabel 1.0 Qml/CusLabel/CusLabel.qml
 CusLabel_Center 1.0 Qml/CusLabel/CusLabel_Center.qml
 CusLabel_Left 1.0 Qml/CusLabel/CusLabel_Left.qml
+CusLabel 1.0 Qml/CusLabel/CusLabel.qml
 CusListView 1.0 Qml/CusListView/CusListView.qml
 CusPopup 1.0 Qml/CusPopup/CusPopup.qml
 CusToolTip_Triangle 1.0 Qml/CusPopup/CusToolTip_Triangle.qml
 CusTriangleTipBorder 1.0 Qml/CusPopup/CusTriangleTipBorder.qml
 CusScrollBar 1.0 Qml/CusScroll/CusScrollBar.qml
-CusSlider 1.0 Qml/CusSlider/CusSlider.qml
 CusSlider_Spin 1.0 Qml/CusSlider/CusSlider_Spin.qml
-CusSpinBox 1.0 Qml/CusSpinBox/CusSpinBox.qml
+CusSlider 1.0 Qml/CusSlider/CusSlider.qml
 CusSpinBox_HourMinute 1.0 Qml/CusSpinBox/CusSpinBox_HourMinute.qml
+CusSpinBox 1.0 Qml/CusSpinBox/CusSpinBox.qml
 singleton CusTableConstant 1.0 Qml/CusTable/CusTableConstant.qml
 CusTableHeader 1.0 Qml/CusTable/CusTableHeader.qml
 CusTableRow 1.0 Qml/CusTable/CusTableRow.qml