setting QML Drawer properties in another QML file



  • I have a main.qml file that has a drawer in it .

    // some imports
    //Some code
    Drawer {
            id: drawer
            width: Math.min(window.width, window.height) / 3 * 2
            height: window.height
            onOpened:
                webview.visible = false
    
            onClosed:
                webview.visible = true
    
            ColumnLayout {
                anchors.fill: parent
                Rectangle {
                    id: search_field
                    width: drawer.width
                    height: 50
     // some code
    

    2nd qml file

    import QtQuick 2.6
    import QtQuick.Layouts 1.1
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    import QtQuick.Layouts 1.1
    import QtQuick.Controls 2.0
    import en.wtl.org 1.0
    import en.wtl.model 1.0
    import QtWebView 1.1
    
    Pane{
    
        id: view
        property string local_url : ""
        property string pid : ""
    
    
        ListView {
            width: 200; height: 250
    
            model: myModel
            delegate: Component{
                RowLayout{
                    Button {
                        id: name
                        text: title
                        visible: true
                        Layout.fillWidth: true
                        onClicked: {
    
                            local_url = path+"/WTL_appdata/"+id+"/"+id+".html"
                            console.log(local_url);
                            pid = id;
                            //webview.url = local_url
                            webview.visible  = true
                        }
    
                        }
                    }
    
                }
            }
    
    
    
    
    WebView{
        id: webview
        url: "file:///"+path+"/WTL_appdata/"+pid+"/"+pid+".html"
        visible: false
        anchors.fill: parent
    
        }
    
    }
    
    
    

    what i want to do is set the "webview.visible = true only when drawer onclosed property is true and set it to invisible when drawer onopened property is true .

    so question is how can i access this

    onOpened:
                webview.visible = false
    
            onClosed:
                webview.visible = true
    

    in my 2nd qml file .



  • Hi! Access to items works only from top ("parent") to the bottom ("child") in the file inclusion hierarchy. What you can do is add some kind of proxy signal. The following code demonstates that and also shows how to use a property in the same way:

    MyRect.qml

    import QtQuick 2.0
    
    Rectangle {
        width: 200
        height: 200
    
        signal signal_myrect()
        property bool property_myrect: false
    
        onSignal_myrect: console.log("opened")
        color: property_myrect ? "green" : "red"
    }
    

    main.qml

    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Layouts 1.3
    
    ApplicationWindow {
        visible: true
        width: 640
        height: 480
    
        property bool property_main: false
        signal signal_main()
    
        MyRect {
            property_myrect: property_main
            Component.onCompleted: onSignal_main.connect(signal_myrect)
        }
    
        Row {
            anchors.bottom: parent.bottom
            spacing: 10
            Button {
                text: "Change property"
                onClicked: property_main = !property_main
            }
            Button {
                text: "Emit signal"
                onClicked: signal_main()
            }
        }
    }
    


  • @Wieland does the firstname of the file needs to be capital ?

    if possible can you do this with my example code above ? that woul be really helpful !!

    if you are curious full code of those 2 files are here
    main.qml : https://github.com/hackertron/WikiDesktopClient/blob/master/main.qml
    offline_pages.qml : https://github.com/hackertron/WikiDesktopClient/blob/master/pages/offline_pages.qml



    1. First letter of the component name should be capital letter
    2. You can use the property alias for the same.

    main.qml

    ApplicationWindow {
        id: window
        visible: true
        width: 300;height: 400
          OffLine_Pages{
               id : we
           }
    
        Drawer {
            id: drawer
            width: 0.66 * window.width
            height: window.height
            onOpened: {
                console.log("Open the browser")
                we.vis=false
            }
            onClosed: {
                console.log("Close the browser")
                we.vis=true
            }
        }
    }
    ====  OffLine_Page.qml====
    Pane{
    
       id: view
       property string local_url : ""
       property string pid : ""
       property alias vis: webview.visible
    
       WebView{
           id: webview
           url: "file:///"+path+"/WTL_appdata/"+pid+"/"+pid+".html"
           visible: false
           anchors.fill: parent
       }
    
    }
    


  • @dheerendra Hello thanks for the answer but i am getting this error

    qrc:/main.qml:18 Offline_Pages is not a type
    

    I renamed my file to Offline_Pages and changed qml.qrc too still not working . Where am i wrong ?



  • It should work. Just clean your build. Ensure the file name matches.



  • yup it worked !! but still it is not able to solve my purpose .

    When i am in OffLine_Pages and opens the drawer the webview don't hide . so still same issue



  • ok. Let us look at like this. Instead of web view, put the Rectangle{}
    Try to show & hide the rectangle instead of web-view. Till me whether it works or not.
    Try something like this
    OffLine_Pages.qml

    Pane{
    
        id: view
        property string local_url : ""
        property string pid : ""
        property alias vis: web.visible
        Rectangle{
            id : web
            width: 200;height: 200;color: "red"
            visible: false
        }
    }
    


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