如何使用 QStatemachine 影响 ListView？

Question

我有这个 Projekt，它使用 QStatemachine 来管理 UI，我想在其中添加自定义列表。 UI 应该只由关键事件操纵。据我了解，我需要在 qml 端有一个 ListView。

ListView的delegate只对鼠标输入或直接按键输入有反应。但我使用 C++ 中的 QStatemachine 来操作它，因为它正在处理 UI 的所有关键事件。当我按下右箭头键时，我想要发生的是将列表向左移动。
（currentItem 总是在屏幕中间。）

所以我的 ListView 目前看起来像这样。

Component {
            id:myDelegation
            Item {
               x: 50
               width: 80
               height: 60
               Rectangle {
                  width: 60
                  height: 60

                  Text {
                    text: name
                    anchors.centerIn: parent
                  }

                  color: parent.ListView.isCurrentItem ? "red" : "steelblue";
                  scale: parent.ListView.isCurrentItem ? 1.5 : 1;
              }

          }
        }


        ListView {
            id: listView1
            x: 0
            y: 50
            width: 1920
            height: 214
            orientation: ListView.Horizontal
            spacing: 4
            model: TileList{}
            delegate: myDelegation
            preferredHighlightBegin: width / 2 - 10
            preferredHighlightEnd: width / 2 + 10
            highlightRangeMode: ListView.StrictlyEnforceRange
        }

C++ Statemachine 是一个 QStatemachine，它向 qml 发送信号。

如何将信号绑定到 Listview 的委托？

Answer 1

第一步 - 将状态机公开为上下文属性以便它对 qml 可见：

engine.rootContext()->setContextProperty("SM", stateMachinePtr);

第二步 - 使用 Connections 元素建立连接：

Connections {
  target: SM
  onSomeSignal: doSomeStuff()
}

Answer 2

最简单的方法是让状态机设置 "currentIndex"

一个常见的模式是在 QML 和 QStateMachine 之间建立一个接口对象

class StateInterface : public QObject
{
    Q_OBJECT
    Q_PROPERTY(int currentIndex MEMBER m_currentIndex NOTIFY currentIndexChanged)

public:
    explicit StateInterface(QObject *parent = 0);

signals:
    void currentIndexChanged() const;

private:
    int m_currentIndex;
};

该对象的实例通过 "context property" 机制

暴露给 QML

StateInterface stateInterface;
qmlEngine->rootContext()->setContextProperty("_stateInterface", &stateInterface);

并根据需要在 QML 中使用

ListView {
    currentIndex: _stateInterface.currentIndex
}

QStateMachine 使用相同的 stateInterface 对象作为状态属性赋值的目标

QState *beginState = new QState(stateMachine);
beginState->assignProperty(&stateInterface, "currentIndex", 0);
// and so on.

StateInterface 对象还可以提供槽，供 QML 使用以影响状态变化。例如

public slots:
    void triggerReset() { emit trigger reset(); }

signals:
    void reset();

并且 QStateMachine 可以，例如，然后通过信号转换到 beginState

对这些信号做出反应

总结此技术：

QStateMachine 控制应用程序状态
QML 感兴趣的所有状态数据都通过一个或多个接口对象公开
QML 端以一种漂亮的声明方式使用状态数据，就像它自己处理状态一样

如何使用 QStatemachine 影响 ListView？

How to use QStatemachine to influence a ListView?

c++

qt

listview

qstatemachine

qml