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

手机下方换页指示器

1.依赖

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

2.要点

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

3.代码

单个指示器

import QtQuick 2.0

Circle_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.0
import "../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;
    }
}