QtQuick桌面應用開發指導 3)實現UI和功能_B 4)動態管理Note物件_A
3.2 把Page Item和Marker Item繫結
之前我們實現了PagePanel元件, 使用了三個state來切換Page元件的opacity屬性; 這一步我們會使用Marker和MarkerPanel元件來實現頁面導航;
在原型階段, MarkerPanel元件十分簡單, 沒有任何功能; 它使用了Repeater型別來產生三個QML Item以及Marker元件作為delegate;
MarkerPanel應該儲存當前啟用的marker(標記), 即那個被使用者點選的marker; 基於MarkerPanel中啟用的marker, PagePanel會更新它的state屬性; 我們需要將PagePanel的state屬性和MarkerPanel新的屬性--持有當前啟用marker的屬性繫結起來;
在MarkerPanel中定義一個string屬性--activeMarker;
// MarkerPanel.qml
| 1 2 3 4 5 6 7 |
Item
{
id:
root
width:
150; height: 450
//
a property of type string to hold
//
the value of the current active marker
property
string activeMarker: "personal"//...
|
我們可以把一個markerid值儲存起來, 用來唯一地識別marker item; 這樣, activeMarker會持有使用者所點選的marker item的markerid的值,
根據model, Repeater元素可以產生三個marker item, 因此我們可以使用一個model來儲存markerid值, 然後在Repeater中使用;
// MarkerPanel.qml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
Item
{
id:
root
width:
150; height: 450
//
a property of type string to hold
//
the value of the current active marker
property
string activeMarker: "personal"
//
a list for holding respective data for a Marker item.
property
variant markerData: [
{
markerid: "personal" },
{
markerid: "fun" },
{
markerid: "work" }
]
Column
{
id:
layout
anchors.fill:
parent
spacing:
5
Repeater
{
//
using the defined list as our model
|