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

How add mouse/cursor to QML app for non-touch phone?

本文关键字：手机 触摸 QML 应用程序 鼠标 添加 光标      更新时间：2023-10-16

这是一个简单的基于Qt/QML的web浏览器"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/"

你能告诉我如何添加一个可以通过joystik（）移动的光标吗◀，▲，▼，▶），并且可以通过点击joystik中心按钮来点击链接吗？

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

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

您可以实现一个伪光标，类似于以下内容：

#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。

相关文章：