[Solved] Making a swipeable panel with buttons on top
-
oh, I just find that MouseArea has "drag.filterChildren" property. That is prefect. Your solution works! Thank you!
-
@benlau
If you don't mind can you please post the working piece of code? Thanks -
Take a look to this sample code
http://www.4shared.com/zip/FcvUAuCVba/SideMenu.html -
@BlackDal
Thanks a lot Man!!! But it is littlebit different from the requirement
.
In your example 1)It is not hiding completely. 2) It is based on the button pressed events. How can i make them based on swipe events? thanks a lot. @benlau Please post the piece of code if you don'T mind Thanks. -
-
-
@vishnu That's an uncompleted project and has so much dirty codes (Excuse me)
This sample has a right to left swipe menu, You can convert to left-to-right. and extract required code and classes from sample. -
@BlackDal
Thanks a lot for the quick reply.
It says error atToojQmlHelper::registerQmlTypes(&engine);
and ended with 422 issues.
like this
Any idea how to solve this? I tried with Qt5.5, 5.4, 5.2. Everythings resulted the same. -
Checkout this. Include path problem fixed.
Download:
https://drive.google.com/file/d/0B5E1thzUK4mJd0huVmJwM1p3S3M/view?usp=sharing -
@BlackDal
Sorry to say this but same errors at
ToojQmlHelper::registerQmlTypes(&engine);
ToojQmlHelper::initFonts(&engine);
should i add something to pro file or some settings ? -
You are right. There was a problem in the MSVC compiling that was solved.
I'm so sorry for this fail.
https://drive.google.com/open?id=0B5E1thzUK4mJTmt6QmJRTlk1TkE -
@BlackDal
perfect. Thanks a lot but small error i found.qrc:/Page1.qml:14:19: Unable to assign [undefined] to QString qrc:/main.qml:46: TypeError: Property 't' of object Units_QMLTYPE_0(0x2a94b238) is not a function QSGThreadedRenderLoop: expose event received for window MainWindow_QMLTYPE_86(0x29f0ab28) with invalid geometry: QRect(1920,332 640x360) on QScreen(0x265deac8) qrc:///tooj/qml/Tooj/App/MainWindow.qml:122:16: Unable to assign [undefined] to QString
Also, for some reason its work perfect on windows but on android the swipe function is little bit draggy and needs 2 or 3 time to swipe. just to inform you. Thanks a lot.
-
Thanks for bug reporting.
As I said this is a little and incomplete source. As you can see this sample has menu button, fontawesome and some small components. This is part of a library for mobile-first QtQuick applications and games. I will release this library in next months. I guess drag bug relate to dpi calculation (Units components has some unfinished tasks).You might be interested to this project:
http://papyros.io/ -
@vishnu said:
@benlau
Thanks a lot. What i didn't understand is
what isActivity{
I can see a qml file here. Can you please describe me what it does? I mean its purpose.
*BottomSheet {
I didn't find any qml file. so no idea what it does. thanks
Please switch to "DEV" branch. BottomSheet is not available at master branch yet.
Activity is a page of UI. You may just ignore it.
There also has a daily build for Android, you may try if you have an Android device.
Downloads | quickandroid -
Here is another very simple example with a nice animation that works how of the box:
import QtQuick 2.4 Rectangle { id: root width: 400 height: 380 color: "yellow" Rectangle { id: panel width: parent.width * 0.8 height: parent.height * 0.8 radius: 20 color: "orange" MouseArea { id: mouseArea anchors.fill: parent drag.target: panel drag.minimumY: 0 drag.maximumY: 0 drag.minimumX: -panel.width drag.maximumX: 0 onReleased: { //if the panel is swiped more than 30% it will hide //else it will go back to the original position //this makes a pretty nice effect :) if (panel.x < -panel.width * 0.3) { //we need to make sure that a state change happens to //fire the transition animation root.state = "show" root.state = "hide" } else { root.state = "hide" root.state = "show" } } } onXChanged: { console.log(x) } } Rectangle { id: button width: 45 height: width radius: 5 color: "lightblue" anchors.bottom: parent.bottom anchors.left: parent.left MouseArea { anchors.fill: parent onClicked: { root.state = root.state === "show" ? "hide" : "show" } } } state: "show" states: [ State { name: "hide" PropertyChanges { target: panel; x: -panel.width } }, State { name: "show" PropertyChanges { target: panel; x: 0 } } ] transitions: Transition { NumberAnimation { target: panel property: "x" duration: 1000 easing.type: Easing.OutCubic } } }