如何實現QML中的pathview

在之前的很多練習及教程中，我們展示了如何在qml語言設計中使用listview及gridview來展示我們所需要的效果．在今天的教程中，我們來深刻體會一下如何使用qml語言中的pathview來展示我們的效果．在pathview中，我們可以用它來顯示旋轉木馬的效果．如果大家有使用我們的ubuntu scope的話，可能大家已經曾經使用carousel顯示模板．在很多的場合中可以實現很炫的顯示效果．

我們只打入如下的**：

import qtquick 2.0
import ubuntu.components 1.1
/*!    \brief mainview with a label and button elements.
*/mainview 
path: path }}
}}

我們只使用了上面一些簡單的**．在這裡，我們沒有使用什麼特別的model，我們只定義了乙個簡單的pathline:

pathline

這是一條從做到右的直線．我們的delegate也相對比較簡單，我們只顯示了每個項的index．執行我們的應用結果如下：

我們可以在

model0.qml

import qtquick 2.0
listmodel 
listelement 
listelement 
listelement 
listelement 
listelement 
listelement 
listelement 
}

同時也把我們的main.qml修改為：

我們可以在上面的中滑動，並可以看見從做到右或從右到左的移動．我們可以使用這個效果來做一些選單等．

專案的原始碼：

在上面的例程中，我們雖然能夠顯示我們所需要的pathview，但是總體來說沒有什麼特效．如果細心的開發者可以看到在我們的ubuntu scope中，carsousel中的有大有小，下面，我們重新改寫我們的例程如下：

main.qml

import qtquick 2.0
import ubuntu.components 1.1
/*!    \brief mainview with a label and button elements.
*/mainview 
delegate: item 
}path: path 
pathline 
pathattribute 
pathline 
pathattribute 
pathline 
pathattribute 
pathline 
pathattribute }}
}}

在上面的例程中，我們多建立了幾個pathline，同時在每個

pathline中，我們同時加入乙個叫做pathattribute的屬性．比如：

整個專案的原始碼在:

我們上面所使用的都是pathline．我們也可以使用pathquad來製作我們特別想要的一些效果：

pathview delegate: mydelegate path: path pathattribute pathattribute pathquad pathattribute pathattribute pathattribute pathquad }}

執行我們的應用：

整個專案的原始碼在：

如何實現QML中的pathview

QML如何實現視窗縮放隱藏

qml可以下拉的按鈕 QML 實現多型

QML中的布局管理

如何實現QML中的pathview

QML如何實現視窗縮放隱藏

qml可以下拉的按鈕 QML 實現多型

QML中的布局管理

相關推薦