c++ - 如何将鼠标/光标添加到非触摸手机的 QML 应用程序？

Question

这是一个简单的基于 Qt/QML 的网络浏览器“MeeBro”(Qt 4.7 &QtWebKit 1.0)，它由几个 qml 文件和一个 javascript 文件组成:

github.com/anssiko/webbrowser/blob/master/qml/content/WebBrowser.qml

它有一个 Rectangle 元素，其中设置了 URL:

property string urlString: "http://anssiko.github.com/"

你能告诉我如何添加一个可以通过操纵杆移动的光标吗(◀, ▲, ▼, ▶) 并且可以通过单击操纵杆中心按钮来单击链接？

MeeBro 基于Qt/QML 演示:doc.qt.io/qt–4.8/qt–demos–declarative–webbrowser–example.html

此外，我认为此链接可能会有帮助:doc.qt.io/qt-4.8/qml-webview.html

Answer 1

你可以实现一个假游标，像这样:

#include <QTest>
#include <QGuiApplication>

    class FakeCursor : public QObject {
      Q_OBJECT
      Q_PROPERTY(QPoint pos READ pos WRITE setPos NOTIFY posChanged)
      Q_PROPERTY(bool visible READ visible NOTIFY visibleChanged)
      enum Direction { Up = 0, Down, Left, Right };
      QPoint _pos;
      qreal step;
      bool _visible;
    signals:
      void posChanged();
      void visibleChanged();
    public:
      FakeCursor() : step(1), _visible(true) {}

      void setPos(QPoint p) {
        if (p != _pos) {
            _pos = p;
            emit posChanged();
          }
      }
      bool visible() const { return _visible; }
      QPoint pos() const { return _pos; }

    public slots:
      void move(int d) {
        switch (d) {
          case Up: _pos.ry() -= step; break;
          case Down: _pos.ry() += step; break;
          case Left: _pos.rx() -= step; break;
          case Right: _pos.rx() += step; break;
          }
        emit posChanged();
      }
      void setStep(qreal s) { if (s) step = s; }
      void toggleVisible() { _visible = !_visible; emit visibleChanged(); }
      void click() {
        QWindow * w = QGuiApplication::allWindows()[0];
        QTest::touchEvent(w, 0).press(0, _pos, w).release(0, _pos, w);
        // try this instead if the touchevent doesn't work
        // QTest::mouseClick(QGuiApplication::allWindows()[0], Qt::LeftButton, Qt::NoModifier, _pos);
      }
    };

然后在main()中实例化并注册到QML:

  FakeCursor cur;
  engine.rootContext()->setContextProperty("Cursor", &cur);

然后您可以在 QML 中的所有内容之上创建一个游标元素:

Rectangle {
    width: 4
    height: 4
    radius: 2
    color: "red"
    x: Cursor.pos.x
    y: Cursor.pos.y
    visible: Cursor.visible
}

您可以使用 Keys 附加属性进行控制。在下面的示例中，它设置为使用键盘箭头和空格键，您将它们更改为手机的控件:

Item {
    focus: true
    Keys.onPressed: {
        switch (event.key) {
        case Qt.Key_Up: Cursor.move(0); break;
        case Qt.Key_Down : Cursor.move(1); break;
        case Qt.Key_Left: Cursor.move(2); break;
        case Qt.Key_Right: Cursor.move(3); break;
        case Qt.Key_Space : Cursor.click(); break;
        }
    }
    Component.onCompleted: {
        Cursor.setStep(2) // to set the speed
        // Cursor.toggleVisible() // to show/hide it
        // Cursor.pos = Qt.point(50,50) // to move it quickly to a needed position
    }
}

您还需要将QT += teSTLib 添加到您的项目文件中。如果模拟触摸事件不起作用，请尝试将其注释掉并使用注释的鼠标单击事件。您可能还需要更改一些 QtQuick 类，因为这个示例是使用 Qt5，我没有 Qt4。