QT Demo 之 threading(2) Spinner

在QT Demo 之 threading一章中我們使用到了Spinner，但是由於Spinner本身和thread部分關係不大，而是作爲一個獨立的自定義組件，因此我們在這一章中單獨講解。

Spinner定義在threading/workerscript/Spinner.qml文件中，由一個Text和Rectangle組成：

Rectangle {
    width: 64
    height: 64
    property alias value: list.currentIndex
    property alias label: caption.text

    Text {...}

    Rectangle {...}
}

Text就是Spinner上面的標籤，如在threading示例中使用到的兩個Spinner，其標籤分別是Row和Column：

而Rectangle部分則是下面的具體數據部分，包括了一個ListView和一個子Rectangle：

    Rectangle {
        anchors.top: caption.bottom
        anchors.topMargin: 4
        anchors.horizontalCenter: parent.horizontalCenter
        height: 48
        width: 32
        color: "black"
        ListView {...}
        Rectangle {...}
    }

ListView部分

在這個示例中，我們遇到了ListView的幾個新的屬性和使用方法，先看代碼如下：

        ListView {
            id: list
            anchors.fill: parent
            highlightRangeMode: ListView.StrictlyEnforceRange
            preferredHighlightBegin: height/3
            preferredHighlightEnd: height/3
            clip: true
            model: 64
            delegate: Text {
                font.pixelSize: 18;
                color: "white";
                text: index;
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }

其中highlightRangeMode以及preferredHighlightBegin和preferredHighlightEnd這三個屬性描述了ListView的高亮部分，以及高亮部分的顯示屬性。

這裏，preferredHighlightBegin和preferredHighlightEnd的值都是height/3，實際上描述的是一個線，然後在配合highlightRangeMode的值是StrictlyEnforceRange，那麼也就意味着，顯示的Item在ListView中不可以上下移動，只要鼠標上下拖到，就會切換到另外一個item上。

假如把preferredHighlightBegin的值設置爲0、把preferredHighlightEnd的值設置爲height，那麼運行的效果就是可以在整個顯示區域內拖動，而不改變item的值，只有當item完全越界後纔會切換到下一個item(用語言比較不好描述，讀者可以自己改變這幾個屬性的值來看一下具體的效果)。

model部分

這裏的model比較奇怪，只是一個數值64，實際運行效果ListView可顯示的數值是從0-63(^_^看來從0開始計數的影響甚廣啊~)。
通過幫助文檔我們瞭解到，這是一種Integers as Models的方式，官方文檔中如下的解釋：
An integer can be used as a model that contains a certain number of types. In this case, the model does not have any data roles.
但是如何顯示model中的數據呢，那麼就看下面的delegate部分。

delegate部分

還是從幫助文檔入手，我們找到下面的說明：

Views need a delegate to visually represent an item in a list. A view will visualize each item list according to the template defined by the delegate. Items in a model are accessible through the index property as well as the item's properties.

以及

A special index role containing the index of the item in the model is also available to the delegate.

這裏面提到，我們可以使用內置變量index來訪問當前Item的index，如果model是Integers as Models的方式，那麼Item和index就一一對應了。

Rectangle部分

在最後代碼中的Rectangle部分則是定義了整個ListView的漸變色效果，代碼如下：

        Rectangle {
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#FF000000" }
                GradientStop { position: 0.2; color: "#00000000" }
                GradientStop { position: 0.8; color: "#00000000" }
                GradientStop { position: 1.0; color: "#FF000000" }
            }
        }

這裏定義了中間0.2-0.8的部分是全透明，上下分別0.2的部分是黑色漸變，整體的效果如下：

注意其中的6和8以及3和5的顯示效果。

這裏爲什麼設置上下兩邊是黑色，中間是全透明的原因，是gradient生效的是一個完全獨立的Rectangle，大小和外面的Rectangle一致，相當於在外面的Rectangle上面覆蓋一個具有漸變效果的蒙板。如果直接對外面的Rectangle進行漸變處理，由於又涉及到顯示文字，比較難實現，不如直接進行一個蒙板處理。

關於gradient漸變，幫助文檔中的一個例子則更加直觀：

Rectangle {
    width: 100; height: 100
    gradient: Gradient {
        GradientStop { position: 0.0; color: "red" }
        GradientStop { position: 0.33; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

效果如下：

總結

本節學到的知識點：

1. 如何通過自定義組件完成滑動列表的效果
2. 如何使用Integers as Models的方式在ListView中顯示數據
   
3. 學習Rectangle的漸變色效果處理

在這一章中，我們可以看到結合Rectangle和ListView就可以實現一個滑動列表，並且通過漸變處理使得顯示效果比較人性化。

//FIXME:這裏留下一下疑問，就是如何通過限定條件，可以完成滑動列表中的循環，即當鼠標滑動到最後一個Item時，如何使得下面緊接的回到第一個item？