why ToolButton have a tail

[JoyBin]

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

[JoyBin]

here is the picture, the area as the arrow points to

[J.Hilk]

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: "+"
                        }
                  }
                 }