How to control the width of a Drawer?

Question

0

How to control the width of a Drawer?

asked 2019-05-30 22:43:00 +0200

jsommer
3324 ●97 ●142 ●154

updated 2019-05-30 22:50:42 +0200

I want to add a sidebar to my app, that slides in. I have chosen a Drawer element but I don't know how to control the width of this element. Here is a code snipped:

Drawer {
    id: rightMenu

    anchors.fill: rotationItem
    dock: Dock.Right

    background: Rectangle {
        anchors.fill: parent
        color: Theme.highlightDimmerColor

        SilicaListView {
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            ...
        }
    }
}

When the Drawer item opens, the contents of the page are darkened and the sidebar opens with a light background. Therefore I have to insert the Rectangle element with an even darker background color. If I reduce the width on the first layer, the sidebar gets smaller and the page is no longer completely darkened. If I change the width of the second layer, the width of the sidebar remains unchanged.

I played araound with the backgroundSize property. But I don't know an appropriate value. The side wasn't visible at all, if I set any value.

Whatever I try: The width of the drawer is about the half of the screen width.

Any ideas?

edit retag flag offensive close delete

Comments

I don't know for sure, but a quick google lead to a Qt page with an example showing width settings;

https://doc.qt.io/qt-5/qml-qtquick-controls2-drawer.html

Spam Hunter ( 2019-05-30 23:03:18 +0200 )edit

1

@Edz this is Silica Drawer for sure, not Controls.2 https://sailfishos.org/develop/docs/silica/qml-sailfishsilica-sailfish-silica-drawer.html/

coderus ( 2019-05-30 23:29:06 +0200 )edit

noted @coderus, I was grabbing at straws without researching, it was more of an assumption that width might be controlled in the same manner.

Spam Hunter ( 2019-05-30 23:43:40 +0200 )edit

I don't know for sure, but a quick google lead to a Qt page with an example showing width settings;
https://doc.qt.io/qt-5/qml-qtquick-controls2-drawer.html
Spam Hunter ( 2019-05-30 23:03:18 +0200 )edit
@Edz this is Silica Drawer for sure, not Controls.2 https://sailfishos.org/develop/docs/silica/qml-sailfishsilica-sailfish-silica-drawer.html/
coderus ( 2019-05-30 23:29:06 +0200 )edit
noted @coderus, I was grabbing at straws without researching, it was more of an assumption that width might be controlled in the same manner.
Spam Hunter ( 2019-05-30 23:43:40 +0200 )edit

Answer 1

1

answered 2019-05-31 12:24:27 +0200

coderus

22985 ●253 ●337 ●370

https://coderus.openrepos...

import QtQuick 2.1
import Sailfish.Silica 1.0

Page {
    id: page

    Drawer {
        id: drawer

        height: parent.height
        width: parent.width

        dock: Dock.Left
        background: SilicaListView {
            height: parent.height
            width: page.width / 2

            model: 10

            delegate: ListItem {
                Label {
                    text: "Item: " + index
                }
                onClicked:  {
                    drawer.open = false
                }
            }
        }

        SilicaFlickable {
            id: flickable
            height: parent.height
            width: page.width
            contentHeight: content.height

            Column {
                id: content
                width: parent.width

                Repeater {
                    model: 100
                    delegate: ListItem {
                        contentHeight: Theme.itemSizeSmall
                        Label {
                            id: innerLabel
                            x: Theme.horizontalPageMargin
                            anchors.verticalCenter: parent.verticalCenter
                            text: "Item elemento : %1".arg(index)
                        }
                        Label {
                            anchors.right: parent.right
                            anchors.verticalCenter: parent.verticalCenter
                            text: "endo"
                        }

                        onClicked:  {
                            drawer.open = true
                        }
                    }
                }
            }
        }
    }
}

edit flag offensive delete publish link

Comments

Thanks for the code example. Modifying the width of the SilicaListView of the background has no impact. This is what I mean. I can't find a way to control the drawer width:

 background: SilicaListView {
        height: parent.height
        width: page.width * 0.66

jsommer ( 2019-06-01 18:08:13 +0200 )edit

I realized, that width can only be defined for a DockedPanel. An alternative approach is to construct something with a Rectangle and NumberAnimation.

Rectangle {
    id: sidebar
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    width: 0
    height: parent.height
    color: Theme.darkPrimaryColor
    ...
    Behavior on width { NumberAnimation { duration: 500 } }
}

jsommer ( 2019-06-02 12:23:37 +0200 )edit

How to control the width of a Drawer?

Comments

1 Answer

Comments

Question tools

Stats

Related questions

How to control the width of a Drawer?

Comments

1 Answer

Comments

Question tools

Public thread

Stats

Related questions