[Solved] Question regarding making a custom Pop Up window



  • Hello,

    As the title points out, I'm trying to make a pop up window such that originally the mousearea is a small square rectangle object and when it is clicked upon, the rectangle object will resize to fit a list of 'settings'.
    This is what I have so far:
    @//HomeScreen.qml
    import QtQuick 2.0

    Rectangle {
    id: settingsButton
    height: parent.height0.05; width: parent.height0.05
    x: parent.height0.01; y: bar.height1.2
    radius: 10
    gradient: Gradient {
    GradientStop {position: 0.5; color: "black"}
    GradientStop {position: 1.0; color: "gray" }
    }
    Image {
    id: svg
    x: bgImage.width0.0001; y: bgImage.height0.001
    width: bar.height1.7; height: bar.height1.7
    source: "../../layout/buttons/settings.svg"
    }
    MouseArea {
    anchors.fill: parent
    onClicked: {
    settingsButton.width = bar.width0.2
    settingsButton.height = bar.width
    0.2
    }
    }
    }@

    I have also created a seperate QML file for the menu list:

    @//SettingsMenu.qml
    import QtQuick 2.0

    Column {
    anchors.centerIn: parent
    spacing: 2
    Rectangle {
    Text {
    text: "Reset";font.pointSize:10; anchors.centerIn: parent;
    MouseArea {anchors.fill: parent; onClicked: console.log("Resetting")}
    }
    }
    Rectangle {
    Text { text: "Hi";font.pointSize:10; anchors.centerIn: parent }
    }
    }
    @

    The problem I'm having is how to make the MouseArea within my Rectangle in HomeScreen.qml create the QML file SettingsMenu.qml and resize the Rectangle to fit the contents of SettingsMenu.qml



  • [quote author="mozeni" date="1394910894"]
    The problem I'm having is how to make the MouseArea within my Rectangle in HomeScreen.qml create the QML file SettingsMenu.qml and resize the Rectangle to fit the contents of SettingsMenu.qml
    [/quote]

    Hi,

    As I understand you want to load SettingsMenu.qml in HomeScreen.qml and resize it, right? If so, you can use "Loader":http://qt-project.org/doc/qt-5/qml-qtquick-loader.html to do this.

    In you case MouseArea in HomeScreen.qml can looks like:
    @
    import QtQuick 2.0

    Rectangle {
    id: settingsButton
    height: parent.height0.05; width: parent.height0.05
    x: parent.height0.01; y: bar.height1.2
    radius: 10
    gradient: Gradient {
    GradientStop {position: 0.5; color: "black"}
    GradientStop {position: 1.0; color: "gray" }
    }
    Image {
    id: svg
    x: bgImage.width0.0001; y: bgImage.height0.001
    width: bar.height1.7; height: bar.height1.7
    source: "../../layout/buttons/settings.svg"
    }
    MouseArea {
    anchors.fill: parent
    onClicked: {
    settingsButton.width = bar.width0.2
    settingsButton.height = bar.width
    0.2
    loadSettings.setSource("SettingsMenu.qml");
    }
    }

        Loader {
                id: loadSettings
                anchors.fill: parent
        }
    }
    

    @

    The loader create and load SettingsMenu.qml as part of HomeScreen.qml.



  • Not exactly but, I have figured it out xD

    Thanks for trying to help out :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.