在 QML 中自定义按钮

Posted 2023-02-23

【中文标题】在 QML 中自定义按钮

【英文标题】：Customizing Buttons in QML

【发布时间】：2019-11-27 13:37:22

【问题描述】：

我是 QML 开发的新手。我想根据我们的要求自定义 QML 按钮。在一些 QML 示例项目中，自定义是由

完成的 Button.QML

绘制一个矩形并实现鼠标区域 onclick() 事件。例如，

import QtQuick 2.5

Rectangle 
    id: button
    signal clicked
    property alias text: text.text
    border.width: 1
    border.color: "white"
    property real textHeight: height - 2
    property real fontHeight: 0.3
    property bool pressed: mouse.pressed
    property real implicitMargin: (width - text.implicitWidth) / 2

    Text 
        id: text
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        height: parent.textHeight
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: height * fontHeight
        color: "#1b1c1d"
        font.family: "Open Sans Regular"
    

    MouseArea 
        id: mouse
        anchors.fill: parent
        onClicked: button.clicked()
    

此代码对我有用。但我看到另一个 QT 示例为

import QtQuick 2.12
import QtQuick.Controls 2.0

Button 
    id: controlBt
    text: qsTr("Test")
    font.pixelSize: 32

    contentItem: Text 
        text: controlBt.text
        font: controlBt.font
        opacity: enabled ? 1.0 : 0.3
        color: controlBt.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    

    background: Rectangle 
        implicitWidth: 550
        implicitHeight: 66
        opacity: enabled ? 1 : 0.3
        border.color: controlBt.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 2
    

但是通过使用此代码进行自定义，焦点和键事件不适用于按钮。

谁能为我提供自定义 QML 按钮的最佳和正确方法。

谢谢

【问题讨论】：

自定义 Button 的最佳方法是按照 Qt 文档所述：Customizing Button。至于焦点，您始终可以使用activeFocus 属性处理它。或者以default implementation为模板，改一下。

代码对我来说看起来是正确的。您需要提供一个重现问题的最小示例。

AFAIR 出于某种奇怪的原因 Qt Quick 按钮对空格键做出反应，而不是 Enter。

我们所需的按钮将对焦点输入和输出事件产生渐变效果，根据按钮的各种状态（不仅是焦点输入和焦点状态）更改边框和文本颜色。状态将是没有焦点的启用按钮、有焦点的启用按钮、没有焦点的禁用按钮、有焦点的禁用按钮等。在这种情况下，哪种方法更适合自定义，1) 绘制矩形，如 ``` item Rectangle ...... mouseArea.... ``` 或 2) 从 QML 按钮派生为``` 按钮 contentItem.... 背景.....```.任何人都可以请为此提供您的建议

【参考方案1】：

我已使用以下代码进行自定义

UiButton.qml

import QtQuick 2.12
import QtQuick.Controls 2.0

Button 
    id: controlBt
    text: qsTr("Test")
    font.pixelSize: 32

    contentItem: Text 
        text: controlBt.text
        font: controlBt.font
        opacity: enabled ? 1.0 : 0.3
        color: controlBt.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    

    background: Rectangle 
        implicitWidth: 550
        implicitHeight: 66
        opacity: enabled ? 1 : 0.3
        border.color: controlBt.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 2
    

在 test.qml 中我使用了上面的按钮

    UiButton
    
        id: idTestButton
        x: 250
        y: 512
        focus: true
        visible: false
        KeyNavigation.down:
        
            console.log(">>>>>>>>>>>>>>>>>>>>idTestButton:  down")
        
        Keys.onLeftPressed:
        
            console.log(">>>>>>>>>>>>>>>>>>>>idTestButton:  onLeftPressed")
        
        onClicked: 
             console.log(">>>>>>>>>>>>>>>>>>>>idTestButton:  onClicked")
        
    

在应用程序中，我有一个 listView，在从 listView 的最后一项按下时，我需要将焦点设置在测试按钮上。

在 listView Keys.onDownPressed:

 Keys.onDownPressed:
 
    // on pressing down from last item, I set focus to button as
    idTestButton.forceActiveFocus() 
 

在使用 forceActiveFocus() 时，一切都对我有用。谢谢大家的支持

谢谢你