ToolButton as Delegate



  • Hi all,

    I am using a list view to display the contacts as a list, in that list view i am using an item as a delegate, my question is can i use toolbutton instead of item as a delegate ?

    I tried using toolbutton as deleagte, i didn't get any errors. but the actual problem i am facing is, i am using a Menu in toolbutton to popup based on onClicked property which is not happening.

    But when i separately try using toolbutton and Menu it is working fine and the menu is poping up with menu items.

    what may be the problem with list view ? Please help me if anyone knows the best solution. Thanks



  • Can you paste what you tried ?



  • @Naveen_D Is it controls 1 or 2?



  • @dheerendra

    Can you paste what you tried ?

    Sir here is the code which i tried

    Pane {
            id: root
            anchors.fill: parent
            implicitHeight: 850
            ColumnLayout {
                //            spacing: 100
                anchors.right: parent.right
                anchors.left: parent.left
                LabelHeadline {
                    leftPadding: 10
                    text: qsTr("All Contacts")
                }
                HorizontalDivider{}
                RowLayout {
                    ListView {
                        id: listView
                        anchors.fill: parent
                        implicitHeight: root.height
                        focus: true
                        delegate:
                            ToolButton {
                            id: contacttoolbuttonDelegate
                            width: parent.width
                            implicitHeight: 48
                            Row {
                                spacing: 0
                                leftPadding: 10
                                //                            Rectangle {
                                //                                visible: selectAccentColor
                                //                                anchors.verticalCenter: parent.verticalCenter
                                //                                implicitHeight: 32
                                //                                implicitWidth: 48
                                //                                color: primaryColor
                                //                            }
                                Rectangle {
    
                                    anchors.verticalCenter: parent.verticalCenter
                                    implicitHeight: 32
                                    implicitWidth: 32
                                    color: primaryColor
                                    radius: width/2
                                }
                                LabelBody {
                                    leftPadding: 10
                                    anchors.verticalCenter: parent.verticalCenter
                                    text: model.title
                                }
                                LabelBody {
                                    leftPadding: 30
                                    anchors.verticalCenter: parent.verticalCenter
                                    text: model.num
                                }
                            } // end Row
                            onClicked: {
                                contactoptionsmenu.open()
                            }
    
                            Menu{
                                id: contactoptionsmenu
                                x: parent.width - width
                                transformOrigin: Menu.Center
                                MenuItem {
                                    text: qsTr("Send Maessage")
                                }
                                MenuItem {
                                    text: qsTr("Details")
                                }
                            }// menu
                        }// delegateToolbutton
                        model: ListModel {
                            ListElement { title: qsTr("Anoop"); num: "9556482322" }
                            ListElement { title: qsTr("Arushi"); num: "9556482322" }
                            ListElement { title: qsTr("Akshay"); num: "9556482322" }
                            ListElement { title: qsTr("Babu"); num: "9556482322" }
                            ListElement { title: qsTr("Bhima"); num: "9556482322" }
                            ListElement { title: qsTr("Chaitu"); num: "9556482322" }
                            ListElement { title: qsTr("Chitra"); num: "9556482322" }
                            ListElement { title: qsTr("Chaya "); num: "9556482322" }
                            ListElement { title: qsTr("Daksh"); num: "9556482322" }
                            ListElement { title: qsTr("Devashish"); num: "9556482322" }
                            ListElement { title: qsTr("Danish"); num: "9556482322" }
                            ListElement { title: qsTr("Ganesh"); num: "9556482322" }
                            ListElement { title: qsTr("Lahari"); num: "9556482322" }
                            ListElement { title: qsTr("Megha"); num: "9556482322" }
                            ListElement { title: qsTr("Madhav"); num: "9556482322" }
                            ListElement { title: qsTr("Nilima"); num: "9556482322" }
                            ListElement { title: qsTr("Kiran"); num: "9556482322" }
                            ListElement { title: qsTr("Sid"); num: "9556482322" }
                            ListElement { title: qsTr("Satya"); num: "9556482322" }
                        }
                    }// end of list view
                }// RowLayout
            }// ColumnLayout
        }// Pane
    

    @Eeli-K

    Is it controls 1 or 2?

    Sir i am using controls 2.1



  • Hello @Naveen_D ,

    It seems your ToolButton has a width of 0.

    Try using this instead it works for me with your code.

    
    ToolButton {
        id: contacttoolbuttonDelegate
        width: root.width //instead of parent.width
        
        // To help see the problem
        Component.onCompleted: {
            console.log("contacttoolbuttonDelegate.width: "+ contacttoolbuttonDelegate.width)
            console.log("contacttoolbuttonDelegate.height: "+ contacttoolbuttonDelegate.height)
        }
        
        ...
        
    }
    


  • in addition what @Julien-B, delegates are parented to contentitem. This has the width zero. Hence tool button width is zero. Due to this you are not able to see the tool button area. As he suggested either change to root.width or hard-code the width of tool button. It should solve it.



  • @Julien-B @dheerendra

    Thanks, i changed to root.width, it worked. \o/

    but when i move the cursor on the tab button i am getting an circle type shadow in between the tab button...what may be the mistake ?


Log in to reply
 

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