From a9c3856015a0d205404b0fd8234c552327ff0281 Mon Sep 17 00:00:00 2001 From: jared Date: Thu, 16 Jul 2020 23:03:37 +0800 Subject: [PATCH] update CompDetail --- examples/TaoQuickShow/Qml.qrc | 1 + .../TaoQuickShow/Qml/Page/Biz/CloseBtn.qml | 10 ++ .../TaoQuickShow/Qml/Page/Biz/CompDetail.qml | 93 +++++----------- .../TaoQuickShow/Qml/Page/ContentPage.qml | 101 ++++++++++++++---- examples/TaoQuickShow/Qml/Page/TitlePage.qml | 5 +- 5 files changed, 121 insertions(+), 89 deletions(-) create mode 100644 examples/TaoQuickShow/Qml/Page/Biz/CloseBtn.qml diff --git a/examples/TaoQuickShow/Qml.qrc b/examples/TaoQuickShow/Qml.qrc index 3d968f5..4a5ee9c 100644 --- a/examples/TaoQuickShow/Qml.qrc +++ b/examples/TaoQuickShow/Qml.qrc @@ -17,5 +17,6 @@ Qml/Page/Biz/CompCard.qml Qml/Page/Biz/TText.qml Qml/Page/Biz/CircleText.qml + Qml/Page/Biz/CloseBtn.qml diff --git a/examples/TaoQuickShow/Qml/Page/Biz/CloseBtn.qml b/examples/TaoQuickShow/Qml/Page/Biz/CloseBtn.qml new file mode 100644 index 0000000..7f016f6 --- /dev/null +++ b/examples/TaoQuickShow/Qml/Page/Biz/CloseBtn.qml @@ -0,0 +1,10 @@ +import QtQuick 2.12 + +import TaoQuick 1.0 +import "qrc:/TaoQuick" +TImageBtn { + width: 20 + height: 20 + + imageUrl: imgPath + (containsMouse ? "Window/close_white.png" : "Window/close_gray.png") +} diff --git a/examples/TaoQuickShow/Qml/Page/Biz/CompDetail.qml b/examples/TaoQuickShow/Qml/Page/Biz/CompDetail.qml index 618c559..fd409e0 100644 --- a/examples/TaoQuickShow/Qml/Page/Biz/CompDetail.qml +++ b/examples/TaoQuickShow/Qml/Page/Biz/CompDetail.qml @@ -4,93 +4,54 @@ import TaoQuick 1.0 import "qrc:/TaoQuick" Rectangle { id: root - width: 200 - height: 80 - radius: 10 + radius: 4 color: gConfig.themeColor - property alias name: t.text property int count: 0 property alias icon: img.source property var compNames: [] + property var comps: [] property bool raised: false - signal clicked() signal closed() - MouseArea { - id: area - anchors.fill: parent - onClicked: { - rise(true); - root.clicked() - } - } - Row { + Image { + id: img + width: sourceSize.width + height: sourceSize.height anchors { - verticalCenter: parent.verticalCenter left: parent.left - leftMargin: 20 + top: parent.top + leftMargin: 4 + topMargin: 4 } - spacing: 12 - Image { - id: img - width: sourceSize.width - height: sourceSize.height + } + ListView { + id: listView + model: compNames + anchors { + top: img.bottom + bottom: parent.bottom + left: parent.left + right: parent.right + margins: 8 + } + delegate: Item { + width: listView.width + height: 100 } - TText { - id: t - anchors{ - verticalCenter: parent.verticalCenter - } - } } - TTextBtn { - anchors{ + CloseBtn { + anchors { right: parent.right top: parent.top + rightMargin: 4 + topMargin: 4 } - width: 30 - height: 24 - text: "X" onClicked: { - rise(false); root.closed(); } - visible: raised - } - - ARiseSet { - id: ani - targetItem: targetParent - Component.onCompleted: { - setX = root.x; - setY = root.y; - setW = root.width; - setH = root.height; - riseW = 400; - riseH = 300; - riseX = (targetParent.width - riseW ) / 2; - riseY = (targetParent.height - riseH ) / 2; - let o = root.mapFromItem(targetParent, riseX, riseY) - riseX = o.x - riseY = o.y - console.log("ARiseSet", targetParent.width, targetParent.width, riseX, riseY) - } - } - function rise(value) { - if (value) { - if (!raised) { - raised = true; - ani.riseAnimation.start(); - } - } else { - if (raised) { - raised = false; - ani.setAnimation.start() - } - } } } diff --git a/examples/TaoQuickShow/Qml/Page/ContentPage.qml b/examples/TaoQuickShow/Qml/Page/ContentPage.qml index 87928af..b91b5b8 100644 --- a/examples/TaoQuickShow/Qml/Page/ContentPage.qml +++ b/examples/TaoQuickShow/Qml/Page/ContentPage.qml @@ -13,18 +13,23 @@ Background { top: parent.top topMargin: 60 } - text: trans.trans("Component List") + trans.transString + property string title: gridView.currentIndex === -1 ? + "Component List" : + componentsMgr.comps[gridView.currentIndex]["name"] + text: trans.trans(title) + trans.transString } GridView { id: gridView anchors.centerIn: background width: cellWidth * 4 height: cellHeight * 4 - model: componentsMgr.comps - currentIndex: -1 cellWidth: 220 cellHeight: 100 + model: componentsMgr.comps + currentIndex: -1 + opacity: 1 visible: opacity > 0 + delegate: Item { width: 220 height: 100 @@ -34,25 +39,83 @@ Background { count: modelData.count icon: modelData.icon onClicked: { - gridView.currentIndex = index + showDetail(index) } } } } + CompDetail { + id: compDetail + readonly property int initOpacity: 0 + readonly property real initScale: 0.5 + width: 400 + height: 600 + anchors.centerIn: parent -// CompBtn { -// anchors.centerIn: parent -// targetParent: background -// name: modelData.name -// count: modelData.count -// icon: modelData.icon -// compNames: modelData.compNames -// visible: gridView.currentIndex === -1 || gridView.currentIndex === index -// // onClicked: { -// // gridView.currentIndex = index -// // } -// // onClosed: { -// // gridView.currentIndex = -1 -// // } -// } + scale: initScale + opacity: initOpacity + visible: opacity > 0 + comps: gridView.currentIndex=== -1 ? [] : componentsMgr.comps[gridView.currentIndex]["comps"] + compNames: gridView.currentIndex=== -1 ? [] : componentsMgr.comps[gridView.currentIndex]["compNames"] + count: gridView.currentIndex=== -1 ? "" : componentsMgr.comps[gridView.currentIndex]["count"] + icon: gridView.currentIndex=== -1 ? "" : componentsMgr.comps[gridView.currentIndex]["icon"] + onClosed: { + hideDetail() + } + } + SequentialAnimation { + id: showDetailAni + NumberAnimation { + target: gridView + property : "opacity" + to: 0 + duration: 240 + } + ParallelAnimation { + NumberAnimation { + target: compDetail + property: "opacity" + to: 1.0 + duration: 260 + } + NumberAnimation { + target: compDetail + property: "scale" + to: 1.0 + duration: 260 + } + } + } + SequentialAnimation { + id: hideDetailAni + ParallelAnimation { + NumberAnimation { + target: compDetail + property: "opacity" + to: compDetail.initOpacity + duration: 260 + } + NumberAnimation { + target: compDetail + property: "scale" + to: compDetail.initScale + duration: 260 + } + } + NumberAnimation { + target: gridView + property : "opacity" + to: 1 + duration: 240 + } + + } + function showDetail(index) { + gridView.currentIndex = index + showDetailAni.start() + } + function hideDetail() { + gridView.currentIndex = -1 + hideDetailAni.start() + } } diff --git a/examples/TaoQuickShow/Qml/Page/TitlePage.qml b/examples/TaoQuickShow/Qml/Page/TitlePage.qml index 8ca4256..2022430 100644 --- a/examples/TaoQuickShow/Qml/Page/TitlePage.qml +++ b/examples/TaoQuickShow/Qml/Page/TitlePage.qml @@ -53,10 +53,7 @@ Rectangle { view.showNormal() } } - TImageBtn { - width: 20 - height: 20 - imageUrl: imgPath + (containsMouse ? "Window/close_white.png" : "Window/close_gray.png") + CloseBtn { onClicked: { view.close() }