How to add Search Bar to a drawer ?



  • I have this simple Drawer design

    https://s31.postimg.org/3pnr5bicb/search.png

    I want to add a search bar/box above Get New pages . Is there any qml component or control for search box ? if not how can i implement it ??

    Code :

    import QtQuick 2.6
    import QtQuick.Layouts 1.3
    import QtQuick.Controls 2.0
    import QtQuick.Controls.Material 2.0
    import QtQuick.Controls.Universal 2.0
    import Qt.labs.settings 1.0
    
    
    ApplicationWindow {
        id: window
        width: 360
        height: 520
        visible: true
        title: "WikiToLearn"
    
    
        Settings {
            id: settings
            property string style: "Material"
        }
    
        header: ToolBar {
            Material.foreground: "white"
    
    
            RowLayout {
                spacing: 20
                anchors.fill: parent
    
                ToolButton {
                    contentItem: Image {
                        fillMode: Image.Pad
                        horizontalAlignment: Image.AlignHCenter
                        verticalAlignment: Image.AlignVCenter
                        source: "qrc:/images/drawer.png"
                    }
                    onClicked: drawer.open()
                }
    
                Label {
                    id: titleLabel
                    text: "WikiToLearn"
                    font.pixelSize: 20
                    elide: Label.ElideRight
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                    Layout.fillWidth: true
                }
    
                ToolButton {
                    contentItem: Image {
                        fillMode: Image.Pad
                        horizontalAlignment: Image.AlignHCenter
                        verticalAlignment: Image.AlignVCenter
                        source: "qrc:/images/menu.png"
                    }
                    onClicked: optionsMenu.open()
    
                    Menu {
                        id: optionsMenu
                        x: parent.width - width
                        transformOrigin: Menu.TopRight
    
                        MenuItem {
                            text: "Settings"
                            onTriggered: settingsPopup.open()
                        }
                        MenuItem {
                            text: "About"
                            onTriggered: aboutDialog.open()
                        }
                    }
                }
            }
        }
    
        Drawer {
            id: drawer
            width: Math.min(window.width, window.height) / 3 * 2
            height: window.height
    
            ListView {
                id: listView
                currentIndex: -1
                anchors.fill: parent
    
                delegate: ItemDelegate {
                    width: parent.width
                    text: model.title
                    highlighted: ListView.isCurrentItem
                    onClicked: {
                        if (listView.currentIndex != index) {
                            listView.currentIndex = index
                            titleLabel.text = model.title
                            stackView.replace(model.source)
                        }
                        drawer.close()
                    }
                }
    
                model: ListModel {
                    ListElement { title: "Get New Pages"; source: "qrc:/pages/get_new_pages.qml" }
                    ListElement { title: "Manage Pages"; source: "qrc:/pages/manage_pages.qml" }
    
    
                }
    
                ScrollIndicator.vertical: ScrollIndicator { }
            }
        }
    
        StackView {
            id: stackView
            anchors.fill: parent
    
            initialItem: Pane {
                id: pane
    
                Image {
                    id: logo
                    width: pane.availableWidth / 2
                    height: pane.availableHeight / 2
                    anchors.centerIn: parent
                    anchors.verticalCenterOffset: -50
                    fillMode: Image.PreserveAspectFit
                    source: "qrc:/images/wtl-logo.png"
                }
    
                Label {
                    text: "WikiToLearn wants to provide free, collaborative and accessible text books to the whole world \“knowledge only grows if shared\""
                    anchors.margins: 20
                    anchors.top: logo.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    horizontalAlignment: Label.AlignHCenter
                    verticalAlignment: Label.AlignVCenter
                    wrapMode: Label.Wrap
                }
    
    
            }
        }
    
        Popup {
            id: settingsPopup
            x: (window.width - width) / 2
            y: window.height / 6
            width: Math.min(window.width, window.height) / 3 * 2
            height: settingsColumn.implicitHeight + topPadding + bottomPadding
            modal: true
            focus: true
    
            contentItem: ColumnLayout {
                id: settingsColumn
                spacing: 20
    
                Label {
                    text: "Settings"
                    font.bold: true
                }
    
                RowLayout {
                    spacing: 10
    
                    Label {
                        text: "Style:"
                    }
    
                    ComboBox {
                        id: styleBox
                        property int styleIndex: -1
                        model: ["Default", "Material", "Universal"]
                        Component.onCompleted: {
                            styleIndex = find(settings.style, Qt.MatchFixedString)
                            if (styleIndex !== -1)
                                currentIndex = styleIndex
                        }
                        Layout.fillWidth: true
                    }
                }
    
                Label {
                    text: "Restart required"
                    color: "#e41e25"
                    opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0
                    horizontalAlignment: Label.AlignHCenter
                    verticalAlignment: Label.AlignVCenter
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                }
    
                RowLayout {
                    spacing: 10
    
                    Button {
                        id: okButton
                        text: "Ok"
                        onClicked: {
                            settings.style = styleBox.displayText
                            settingsPopup.close()
                        }
    
                        Material.foreground: Material.primary
                        Material.background: "transparent"
                        Material.elevation: 0
    
                        Layout.preferredWidth: 0
                        Layout.fillWidth: true
                    }
    
                    Button {
                        id: cancelButton
                        text: "Cancel"
                        onClicked: {
                            styleBox.currentIndex = styleBox.styleIndex
                            settingsPopup.close()
                        }
    
                        Material.background: "transparent"
                        Material.elevation: 0
    
                        Layout.preferredWidth: 0
                        Layout.fillWidth: true
                    }
                }
            }
        }
    
        Popup {
            id: aboutDialog
            modal: true
            focus: true
            x: (window.width - width) / 2
            y: window.height / 6
            width: Math.min(window.width, window.height) / 3 * 2
            contentHeight: aboutColumn.height
    
            Column {
                id: aboutColumn
                spacing: 20
    
                Label {
                    text: "About"
                    font.bold: true
                }
    
                Label {
                    width: aboutDialog.availableWidth
                    text: "WikiToLearn wants to provide free, collaborative and accessible text books to the whole world.
    Our philosophy is synthetized in the sentence: “knowledge only grows if shared”"
                    wrapMode: Label.Wrap
                    font.pixelSize: 12
                }
    
                Label {
                    width: aboutDialog.availableWidth
                    text: "We provide a platform where learners and teachers can together complete,"
                        + "refine and re-assemble notes, lecture notes in order to create text books, "
                        + "tailored precisely to their needs, so that you can “stand on the shoulders of giants”"
                    wrapMode: Label.Wrap
                    font.pixelSize: 12
                }
            }
        }
    }
    
    


  • See this, is very simple. I put a ColumnLayout in a drawer and modified the content to have a space to a header in the drawer and your actions list.

    Drawer {
    id: drawer
    width: Math.min(window.width, window.height) / 3 * 2
    height: window.height

    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            width: drawer.width
            height: 100
            
            Label {
                text: "Change this pane as you desire"
                anchors.centerIn: parent
                wrapMode: Text.WordWrap
            }
        }
        
        ListView {
            id: listView
            currentIndex: -1
            Layout.fillWidth: true
            Layout.fillHeight: true
            
            delegate: ItemDelegate {
                width: parent.width
                text: model.title
                highlighted: ListView.isCurrentItem
                onClicked: {
                    if (listView.currentIndex != index) {
                        listView.currentIndex = index
                        titleLabel.text = model.title
                        stackView.replace(model.source)
                    }
                    drawer.close()
                }
            }
            
            model: ListModel {
                ListElement { title: "Get New Pages"; source: "qrc:/pages/get_new_pages.qml" }
                ListElement { title: "Manage Pages"; source: "qrc:/pages/manage_pages.qml" }
                
                
            }
            
            ScrollIndicator.vertical: ScrollIndicator { }
        }
    }
    

    }