Results 1 to 5 of 5

Thread: Sliding effect of widgets created using QQuickWidget.

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Join Date
    Mar 2016
    Posts
    6
    Qt products
    Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Symbian S60

    Default Sliding effect of widgets created using QQuickWidget.

    hi all,

    I have to achieve sliding effect on widgets. I have created two widget using QQuickWidget.
    widget 1: is created using a static qml
    widget 2 : is a dynamic widget created using javascript embedded in a qml.

    now when I show/hide either of the widgets its behaving fine. but I want a sliding effect like widget 1 moves up and widget 2 slowing enters from below the window.
    I am very new to QT started programming in this language last week itself. please help me I am a little stuck. I am using qt 5.5 on windows platform IDE : qtcreator 3.5.1

    below are the topic I am referring to and trying to code to achieve my aim, but still unable to achieve my result
    1. qt widget positioning
    2. QPropertyAnimation (but to show/hid my widget I am using QTimer::singleShot)

    code:
    Qt Code:
    1. //mainwindow.cpp
    2.  
    3. #include "mainwindow.h"
    4. #include "ui_mainwindow.h"
    5. #include <QQuickView>
    6. #include <QObject>
    7. #include <QThread>
    8. #include <QTimer>
    9. #include <QPropertyAnimation>
    10.  
    11. MainWindow::MainWindow(QQuickWidget *parent) :
    12. QMainWindow(parent),
    13. ui(new Ui::MainWindow)
    14. {
    15. ui->setupUi(this);
    16. mQQuickWidget = new QQuickWidget();
    17. mQQuickWidget->setSource(QUrl("qrc:/qml/res/layouts/homescreen.qml"));
    18. mQQuickWidget->rootContext()->setContextProperty("myModel", 500);
    19. ui->verticalLayout->addWidget(mQQuickWidget);
    20.  
    21. QTimer::singleShot(2000, this, SLOT(addNewImage()));
    22.  
    23. }
    24.  
    25. void MainWindow ::addNewImage()
    26. {
    27.  
    28. QQuickWidget *mQQuickWidget1 = new QQuickWidget();
    29. mQQuickWidget1->setSource(QUrl("qrc:/qml/res/layouts/AndroidDelegate.qml"));
    30. ui->verticalLayout->addWidget(mQQuickWidget1);
    31.  
    32. mQQuickWidget->hide();
    33. }
    34.  
    35. MainWindow::~MainWindow()
    36. {
    37. delete ui;
    38. }
    To copy to clipboard, switch view to plain text mode 
    Qt Code:
    1. //mainwindow.h
    2.  
    3. #ifndef MAINWINDOW_H
    4. #define MAINWINDOW_H
    5.  
    6. #include <QMainWindow>
    7. #include <QQuickItem>
    8. #include <QQmlContext>
    9. #include <QQuickWidget>
    10.  
    11.  
    12. namespace Ui {
    13. class MainWindow;
    14. }
    15.  
    16. class MainWindow : public QMainWindow
    17. {
    18. Q_OBJECT
    19.  
    20. public:
    21. explicit MainWindow(QQuickWidget *parent = 0);
    22. ~MainWindow();
    23.  
    24. public slots:
    25. void addNewImage();
    26.  
    27. private:
    28. Ui::MainWindow *ui;
    29. QQuickWidget *mQQuickWidget;
    30. };
    To copy to clipboard, switch view to plain text mode 
    Qt Code:
    1. //homescreen.qml
    2.  
    3. import QtQuick 2.0
    4. import QtQml.Models 2.1
    5. import "qrc:/componentCreation.js" as MyScript
    6.  
    7. Rectangle {
    8. id: root
    9. color: "lightgray"
    10. width: 800
    11. height: 480
    12. property bool printDestruction: false
    13.  
    14. //! [0]
    15. ObjectModel {
    16. id: itemModel
    17.  
    18. Rectangle {
    19. width: view.width; height: view.height
    20. color: "#000000"
    21. Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent ;}
    22.  
    23. Image {
    24. id: image1
    25. width: 100
    26. height: 100
    27. x: myModel
    28. y:100
    29. fillMode: Image.PreserveAspectFit
    30. smooth: true
    31. source: "qrc:/images/res/images/navigation_next_item.png"
    32.  
    33.  
    34. }
    35. Component.onCompleted: MyScript.createSpriteObjects();
    36.  
    37. Component.onDestruction: if (printDestruction) print("destroyed 1")
    38. }
    39. Rectangle {
    40. width: view.width; height: view.height
    41. color: "#F0FFF7"
    42. Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
    43.  
    44. Component.onDestruction: if (printDestruction) print("destroyed 2")
    45. }
    46. Rectangle {
    47. width: view.width; height: view.height
    48. color: "#F4F0FF"
    49. Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
    50.  
    51. Component.onDestruction: if (printDestruction) print("destroyed 3")
    52. }
    53. }
    54.  
    55. ListView {
    56. id: view
    57. anchors { fill: parent; bottomMargin: 30 }
    58. model: itemModel
    59. preferredHighlightBegin: 0; preferredHighlightEnd: 0
    60. highlightRangeMode: ListView.StrictlyEnforceRange
    61. orientation: ListView.Horizontal
    62. snapMode: ListView.SnapOneItem; flickDeceleration: 2000
    63. cacheBuffer: 200
    64. }
    65. //! [0]
    66. Rectangle {
    67. width: root.width; height: 30
    68. anchors { top: view.bottom; bottom: parent.bottom }
    69. color: "gray"
    70.  
    71. Row {
    72. anchors.centerIn: parent
    73. spacing: 20
    74.  
    75. Repeater {
    76. model: itemModel.count
    77.  
    78. Rectangle {
    79. width: 5; height: 5
    80. radius: 3
    81. color: view.currentIndex == index ? "blue" : "white"
    82.  
    83. MouseArea {
    84. width: 20; height: 20
    85. anchors.centerIn: parent
    86. onClicked: view.currentIndex = index
    87. }
    88. }
    89. }
    90. }
    91. }
    92. }
    To copy to clipboard, switch view to plain text mode 
    Qt Code:
    1. //AndroidDelegate.qml /*dynamic widget*/
    2.  
    3. import QtQuick 2.0
    4. import "qrc:/componentCreation.js" as MyScript
    5.  
    6. Rectangle {
    7. id: appWindow
    8. width: 300; height: 300
    9. color: "#000000"
    10. Component.onCompleted: MyScript.createSpriteObjects();
    11. }
    12.  
    13. //componentCreation.js
    14.  
    15. var component;
    16. var sprite;
    17. function createSpriteObjects() {
    18. component = Qt.createComponent("qrc:/qml/res/layouts/ListPage.qml");
    19. if (component.status == Component.Ready)
    20. finishCreation();
    21. else
    22. component.statusChanged.connect(finishCreation);
    23. }
    24. function finishCreation() {
    25. if (component.status == Component.Ready) {
    26. sprite = component.createObject(appWindow, {"x": 100, "y": 100});
    27. if (sprite == null) {
    28. // Error Handling
    29. console.log("Error creating object");
    30. }
    31. } else if (component.status == Component.Error) {
    32. // Error Handling
    33. console.log("Error loading component:", component.errorString());
    34. }
    35. }
    To copy to clipboard, switch view to plain text mode 

    I have not included the animation code as I am trying to understand it and use it, above code compiles and runs.
    any help and direction will be really helpful.
    thanks
    Last edited by anda_skoa; 7th March 2016 at 22:39. Reason: missing [code] tags

Similar Threads

  1. Widgets must be created in the GUI thread.
    By Thành Viên Mới in forum Qt Programming
    Replies: 10
    Last Post: 8th November 2011, 16:53
  2. Replies: 2
    Last Post: 22nd April 2011, 13:38
  3. How to access Widgets created in Tab View
    By kapoorsudhish in forum Newbie
    Replies: 5
    Last Post: 23rd October 2009, 13:12
  4. Zooming effect by scaling widgets
    By Cruz in forum Qt Programming
    Replies: 3
    Last Post: 1st February 2009, 09:43
  5. is it possible to animate sliding widgets on show/hide
    By discostu in forum Qt Programming
    Replies: 2
    Last Post: 4th March 2007, 08:59

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Qt is a trademark of The Qt Company.