自定义控件ToolButton

参考文献:QML Text文本换行-QT开发中文网

qml 控件中换行Text换行处理

比较头痛,开始给Text中添加wrapMode: Text.Wrap始终没有效果,结果需要Layout.fillWidth: true的宽度,用width,implicitwidth设置宽度都不可以

然后字体也不居中

Layout.alignment: Qt.AlignHCenter

不能让字体居中,

改为

horizontalAlignment: Text.AlignHCenter

效果如图:

ToolButton {
    id: toolButton
    icon.color: "transparent"
    display: AbstractButton.TextUnderIcon
    palette.buttonText: "#242424"
    background: Rectangle {
        radius: 8
        color: {
            if (toolButton.hovered || toolButton.checked || toolButton.pressed) {
                return "#EBEBEB";
            } else {
                return "transparent";
            }
        }
    }

    contentItem:ColumnLayout{
        implicitWidth: 100

        IconLabel {
            id: toolButtonIconLable
            anchors.top: parent.top
            mirrored: toolButton.mirrored
            display: AbstractButton.IconOnly
            // Layout.fillWidth: true
            Layout.alignment: Qt.AlignHCenter

            icon: toolButton.icon
            text: toolButton.text
            font: toolButton.font
            color: toolButton.palette.buttonText
        }
        Text {
            id: toolButtomText
            text: toolButton.text
            Layout.fillWidth: true
            horizontalAlignment: Text.AlignHCenter
            wrapMode: Text.Wrap
            color: toolButton.palette.buttonText
            font.pixelSize: 12
        }
    }

}

    ColumnLayout {
        Layout.fillWidth: true
        Layout.leftMargin: 4
        Layout.rightMargin: 4
        spacing: 10
        // Layout.preferredWidth: 68
        width:68       
         // 选择
        ClToolButtonText {
            Layout.preferredWidth: 60
            Layout.topMargin: 15
            Layout.fillWidth: true
            action: selectAction
        }
    }

    Action {
        id: selectAction

        text: qsTr("Select")
        icon.source: "qrc:/image/toolbutton/left/select.svg"
        shortcut: "Esc"
        onTriggered: {
            console.debug("select");
            ...
        }
    }