How to make ListElement a button in Drawer ?

Qjay

I want to add a button to my drawer ( that actually blends with my UI and looks good ) . I do have created a button for my drawer but it looks shit !!

https://s31.postimg.org/52o4t8onv/shit.png

I want that button to look like the other 2 ListElements ( Home and manage pages )

code snippet :

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


        ColumnLayout {
            anchors.fill: parent
            Rectangle {
                id: search_field
                width: drawer.width
                height: 50

                TextField{
                    id: search_text
                    placeholderText: " Search WikiToLearn"
                    width: drawer.width
                    onAccepted: {
                        listView.currentIndex = -1
                        searchterm=text

                        if(stackView.currentItem!==searchview)
                       { stackView.push(searchview)
                            webview.visible=true

                        }
                        else{webview.visible=true}
                        drawer.close();
                        parsing();
                    }



                    Image {
                        id: search_button
                        anchors.right: search_text.right
                        anchors.verticalCenter: search_text.verticalCenter
                        source: "qrc:/images/search.png"
                        MouseArea{
                            anchors.fill: search_button
                            onClicked: {
                                searchterm=search_text.text

                                if(stackView.currentItem!==searchview)
                               { stackView.push(searchview)
                                 webview.visible=true
                                }
                                else{webview.visible=true}

                                drawer.close();
                                listView.currentIndex = -1
                                parsing();

                            }



                        }
                    }

                }
            }
            Item{
                visible: false
                Text{
                    visible: false
                    id: responsetext
                    text:""
                }
            }

            Button{
                width: drawer.width
                height: 40

                text:"save offline"
                onClicked: {
                    responsetext.text = dbman.add(current_title);
                    drawer.close();

                }
            }






            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: "Home"; source:""}
                    ListElement { title: "Manage Pages"; source: "qrc:/pages/manage_pages.qml" }

                }

                ScrollIndicator.vertical: ScrollIndicator { }
                onCurrentIndexChanged: {
                    if(currentIndex===0)stackView.push(pane)
                }
            }
        }

    }

ekkescorner

you should use a Flat Button to do this

here's an example how you can do this.

import QtQuick 2.6
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
// Flat Button
Button {
    id: button
    property alias textColor: buttonText.color
    focusPolicy: Qt.NoFocus
    Layout.fillWidth: true
    Layout.preferredWidth : 1
    leftPadding: 6
    rightPadding: 6
    contentItem: Text {
        id: buttonText
        text: button.text
        opacity: enabled ? 1.0 : 0.3
        color: Material.primaryColor
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
        font.capitalization: Font.AllUppercase
        font.weight: Font.Medium
    }
    background:
        Rectangle {
        id: buttonBackground
        implicitHeight: 48
        Layout.minimumWidth: 88
        color: button.pressed ? buttonText.color : "transparent"
        radius: 2
        opacity: button.pressed ? 0.12 : 1.0
    } // background
} // button

feel free to modify the Button to fit into your UI
in my blog series about Qt 5.7 QtQuickControls2 you'll find more infos: http://j.mp/qt-x