Qt之QWidget自定义控件与qml界面互相调用 原

Qt中的`QWidget`和QML（Quick Markup Language）可以协同工作，创建混合用户界面，其中`QWidget`作为C++部分，而QML提供了一种声明式的方式来设计UI。如果你想要在两者之间建立交互，可以按照以下步骤进行：

1. **信号与槽（Signal and Slot）**：在`QWidget`中，你可以通过`emit`发出一个信号，然后在QML中的相应组件上绑定一个槽（Slot）。例如，当按钮点击事件发生时，可以在C++里发射一个信号，QML中的Button元件可以连接这个信号并响应。

// QWidget 中的 C++ 类
class MyWidget : public QWidget {
public:
    void onButtonClick() {
        emit buttonClicked();
    }
};

// QML 中绑定槽
MyWidget *myWidget = new MyWidget(this);
QObject::connect(myWidget, &MyWidget::buttonClicked, myQmlObject, "onButtonClicked()");

2. **Q_INVOKABLE 函数**：如果你想从QML直接调用`QWidget`的函数，可以使用`Q_INVOKABLE`修饰符，使得该函数可以从QML可见并调用。

// QWidget 中的 C++ 类
void MyWidget::handleQmlCall(const QString& arg) {
    // 对arg处理...
}

// QML 中的调用
myButton.onClicked.connect(QUrl(QStringLiteral("qt://myFunction?arg=yourValue")).toString());

3. **信号与属性绑定**：对于简单的数据交换，也可以通过将`QWidget`的属性设置为`Q_PROPERTY`，并在QML中读取或修改。

@property int value;

MyWidget {
    property alias myInt: value
    onMyIntChanged: console.log("Value changed to:", myInt)
}