QT QML初体验随笔之QQuickView(14)

手机下方换页指示器

1.依赖

QT QML初体验随笔之QQuickView(13)

2.要点

• 索引
• 切换状态：利用opacity实现
• 更改当前索引的状态，复原其他指示器状态

3.代码

单个指示器

import QtQuick 2.0Circle_Kingmei {    id: indicator;    // 索引值    property int index: 0;    // 半径    circleRadius: 5;    // 颜色//    color: "transparent";   // 透明    // 透明度//    opacity: 0.5;    state: "opacity_half";    states: [        State {            name: "opacity_half";            PropertyChanges {                target: indicator                opacity: 0.5;            }        },        State {            name: "opacity_all";            PropertyChanges {                target: indicator                opacity: 1.0;            }        }    ]}

指示器切换控件

import QtQuick 2.0import "../Base"Row {    id: indicatorCtrl;    // 分隔符    spacing: 12;    // 设置当前索引    function setCurIndex(index)    {        for(var i = 0; i < indicatorCtrl.children.length; ++i)        {            indicatorCtrl.children[i].state = (indicatorCtrl.children[i].index === index? "opacity_all": "opacity_half");        }    }    CircleExtend_Kingmei {        id: indicator0;        index: 0;        state: "opacity_all";    }    CircleExtend_Kingmei {        id: indicator1;        index: 1;    }    CircleExtend_Kingmei {        id: indicator2;        index: 2;    }    CircleExtend_Kingmei {        id: indicator3;        index: 3;    }}