如何在使用QML ListView和C++時使用過渡動畫QList <QObject*>？

我正在使用QtQuick 2.0和QML ListView，我使用C++（對象的QList）連接到我的模型。連接是通過QQmlContext :: setContextProperty（）完成的。如何在使用QML ListView和C++時使用過渡動畫QList <QObject*>？

現在文檔告訴我沒有直接的方法讓界面知道有關更改，所以我只在每次更改模型時都實現了上下文。然而，當我這樣做時，視圖直接執行而不會觸發任何事件（例如添加或移除事件），這讓我感到有些懊惱，因爲我無法控制過渡。

簡單地說這是我的QML代碼：

ListView { 
id : list 
     boundsBehavior: Flickable.StopAtBounds 

     anchors { 
      top: titleBar.bottom 
      topMargin: -1 
      bottom: mainWindow.bottom 
      bottomMargin: -1 
     } 
     width: mainWindow.width 

     model: episodes 
     delegate: Episode { 
      id: myDelegate 
      onShowClicked: episodes.append(episodes[index]) 
     } 

     ScrollBar { 
      flickable: list; 
     } 
    }

其中情節是我的自定義委託。它包含以下代碼：

ListView.onAdd: SequentialAnimation { 
    PropertyAction { target: episodeDelegate; property: "height"; value: 0 } 
    NumberAnimation { target: episodeDelegate; property: "height"; to: 80; duration: 250; easing.type: Easing.InOutQuad } 
} 

ListView.onRemove: SequentialAnimation { 
    PropertyAction { target: episodeDelegate; property: "ListView.delayRemove"; value: true } 
    NumberAnimation { target: episodeDelegate; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad } 

    // Make sure delayRemove is set back to false so that the item can be destroyed 
    PropertyAction { target: episodeDelegate; property: "ListView.delayRemove"; value: false } 
}

這是從Qt示例直接複製。

總而言之，模型被正確地鏈接和同步，雖然這樣做的方式阻止我瞭解我的QML邏輯中模型更改的本質。

有誰知道任何詭計？

來源

2014-02-26 Gostron

當您重置setContextProperty時，可以使用populate轉換。但是，這同時適用於列表中所有元素的轉換。

如果你想每次添加一個項目都有一個動畫，你可以使用信號來做到這一點。例如：

class SomeList : public QObject 
{ 
    Q_OBJECT 
public: 
    explicit SomeList(QObject *parent = 0); 

    void Add(QString color, QString value) 
    { 
     emit addNew(color,value); 
    } 

signals: 
    void addNew(QString data1,QString data2); 
};

在main.cpp中，你可以有：

int main(int argc, char *argv[]) 
{ 
    QApplication app(argc, argv); 

    QQmlApplicationEngine engine; 
    engine.load(QUrl(QStringLiteral("qrc:/main.qml"))); 

    engine.rootContext()->setContextProperty("cppInstance",new SomeList); 

    return app.exec(); 
}

和QML：

ListModel{ 
    id:someListModel 
} 

Rectangle{ 
    width: 600 
    height: 600 
    ListView{ 
     model:someListModel 
     delegate:Rectangle{ 
      width: parent.width 
      height: parent.height/10 
      color: model.color 
      Text{ 
       text: value 
      } 
     } 
    } 
    Connections{ 
     target: cppInstance 
     onAddNew: { someListModel.insert(0,{"color":data1,"value":data2})} 
    } 
}

在SomeList類，你也可以有一個QList爲成員，它將包含您在QML中插入的字符串。

來源

2015-04-07 11:44:05

我現在真的沒有這個問題了，但我相信你的解決方案在那時確實回答了我的問題。我儘可能多地堅持只用於顯示的QML，這就是爲什麼我沒有C++中的List Item，而只是QML中的視圖。感謝您花時間。 – Gostron

這是一個不錯的解決方案。 – BaCaRoZzo

直到現在還沒有看到你問這個問題的日期......我偶然發現了你的問題，因爲一個星期前我遇到了同樣的問題。希望這個答案能夠幫助像我一樣處於相同情況的人。 –

如何在使用QML ListView和C++時使用過渡動畫QList <QObject*>？

回答

相關問題