why ToolButton have a tail



  • Thank you for your patience to read my code !

    Here i want to put "Text"+"ToolButton" in a row, and make them recognizable with a line(a "Rectangle") between them.

    what shape of the "ToolButton" i want is a square, so i make the "Height" the same as the "Width".

    At last, what i see is a "Rectangle" but not a "Square", and when i click the "ToolButton", the sink area of the "ToolButton" is a "Square" with deep color, at the same time, a light area appear at the right of the white parting line.

    So, what can i do to remove the tail ? And why it appear there ?

    win10 + Qt5.10

    Thanks for your help !

    import QtQuick 2.9
    import QtQuick.Controls 1.4
    import QtQuick.Controls 2.3
    import QtQuick.Controls 2.0 as MyCombo
    import QtQuick.Layouts 1.3
    import QtQuick.Controls.Material 2.1
    import QtQuick.Controls.Universal 2.1
    import Qt.labs.settings 1.0
    import QtQuick.Controls.Styles 1.4
    
            ListView {
                focus: true
                anchors.fill: parent
                anchors.margins: 5
                currentIndex: -1
                model: listModel
                delegate: listDelaget
    
                section.property: "type"
                section.delegate: Rectangle {
                    height: 35
                    width: parent.width
                    color: "#E0E0E0"
                    RowLayout {
                        anchors.fill: parent
                        Text {
                            text: section
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            font.pixelSize: 15
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                        }
                        Rectangle {
                            color: "white"
                            Layout.fillHeight: true
                            implicitWidth: 2
                            opacity: 0.6
                        }
                        ToolButton {//HERE NEED your help !
                            implicitHeight: parent.height
                            implicitWidth: parent.height
                            text: "+"
                        }
                    }
                }
            }
    
        ListModel {
            id: listModel
            ListElement { type: "TLS"; remarks: "ItemDelegate" }
            ListElement { type: "TLS"; remarks: "ItemDelegate" }
            ListElement { type: "TLS"; remarks: "ItemDelegate" }
            ListElement { type: "TLS"; remarks: "SwipeDelegate" }
            ListElement { type: "TLS"; remarks: "SwipeDelegate" }
            ListElement { type: "TLS"; remarks: "SwipeDelegate" }
            ListElement { type: "TLS"; remarks: "CheckDelegate" }
            ListElement { type: "SSH"; remarks: "CheckDelegate" }
            ListElement { type: "SSH"; remarks: "RadioDelegate" }
            ListElement { type: "SSH"; remarks: "RadioDelegate" }
            ListElement { type: "SSH"; remarks: "RadioDelegate" }
            ListElement { type: "SSH"; remarks: "SwitchDelegate" }
            ListElement { type: "SSH"; remarks: "SwitchDelegate" }
        }
    
        Component {
            id: listDelaget
            ItemDelegate {
                height: 30
                width: parent.width
                spacing: 30
                highlighted: ListView.isCurrentItem
                text: model.remarks
            }
        }
    


  • here is the picture, the area as the arrow points to
    0_1521205451527_20180316210315.png



  • Hi @JoyBin,

    try the folloqing:

                     RowLayout {
                          id:rowLayout
                         anchors.fill: parent
                         Text {
                             text: section
                             Layout.fillWidth: true
                             Layout.fillHeight: true
                             font.pixelSize: 15
                             horizontalAlignment: Text.AlignHCenter
                             verticalAlignment: Text.AlignVCenter
                         }
                         Rectangle {
                             color: "white"
                             Layout.fillHeight: true
                             implicitWidth: 2
                             opacity: 0.6
                         }
                         Item{
                             implicitHeight: parent.height
                             implicitWidth: parent.height
                             ToolButton {
                                 height: rowLayout.height
                                 width: rowLayout.height
                                 anchors.centerIn: parent
                                 text: "+"
                            }
                      }
                     }
    

Log in to reply
 

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