How to make ListElement a button in Drawer ?



  • 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)
                    }
                }
            }
    
        }
    

  • Qt Champions 2016

    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



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