ToolButton as Delegate

[Naveen_D]

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

[dheerendra]

Can you paste what you tried ?

[Eeli K]

@Naveen_D Is it controls 1 or 2?

[Naveen_D]

@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

[Julien B]

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

[dheerendra]

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.

[Naveen_D]

@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 ?