QT/TaoQuick
1
0
Fork 0
mirror of https://github.com/jaredtao/TaoQuick.git synced 2025-01-19 20:22:56 +08:00
Code Issues Projects Releases Wiki Activity

update CompDetail

Browse Source
This commit is contained in:
jared 2020-07-16 23:03:37 +08:00
parent dee3147509
commit a9c3856015
5 changed files with 121 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
examples/TaoQuickShow/Qml.qrc
View File

@ -17,5 +17,6 @@
<file>Qml/Page/Biz/CompCard.qml</file>
<file>Qml/Page/Biz/TText.qml</file>
<file>Qml/Page/Biz/CircleText.qml</file>
<file>Qml/Page/Biz/CloseBtn.qml</file>
</qresource>
</RCC>

10
examples/TaoQuickShow/Qml/Page/Biz/CloseBtn.qml Normal file
View File

@ -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")
}

93
examples/TaoQuickShow/Qml/Page/Biz/CompDetail.qml
View File

@ -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()
}
}
}
}

101
examples/TaoQuickShow/Qml/Page/ContentPage.qml
View File

@ -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()
}
}

5
examples/TaoQuickShow/Qml/Page/TitlePage.qml
View File

@ -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()
}