自定义面包屑导航

1、代码

import QtQuick 2.0
import QtQuick.Controls 2.0

Rectangle {
    id:root;
    color: "#19192C";
    property int rect_width: 80;
    property int rect_height: 20;
    property int line_width: 20;
    property int line_height: 2;
    property color bkcolor: "white";   //默认颜色
    property color pick_color: "#E5F012";//选中颜色
    property int index: 0;//地记录radio
    signal up_low_check(int info);//点击主页或者上一页 0:主页 1:上一页

    //设置
    function exec(info)
    {
        console.log(info);
        console.log(txt.text);
        var r = "";
        for(var i=0;i<info.length;i++)
        {
            r += info[i];
            if(i<info.length-1)
            {
                r += ">>";
            }
        }
        txt.text = r;
    }
    //最上面的分界线
    Rectangle{
        width: parent.width;
        height: 1;
        color:"grey";
        anchors.top: parent.top;
    }
    //主页图标
    Image {
        width: parent.height-10;
        height: width;
        id: zhuye;
        //        source: "qrc:/image/ICON/zhuye.png";
        source: "file:./ICON/zhuye.png";
        anchors.verticalCenter: parent.verticalCenter;
        smooth: true;
        visible: true;
        MouseArea{
            anchors.fill: parent;
            onEntered: {

            }
        }
    }

    Text {
        id: line_1;
        width: rect_height;
        height: width;
        color: bkcolor;
        anchors.verticalCenter: parent.verticalCenter;
        anchors.left: zhuye.right;
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignVCenter;
        font.pixelSize: 16;
        text: ">>"
    }

    Text {
        id: txt;
        horizontalAlignment: Text.AlignHCenter;
        verticalAlignment: Text.AlignVCenter;
        anchors.verticalCenter: line_1.verticalCenter;
        anchors.left: line_1.right;
        color: bkcolor;
        font.pixelSize: 16;
        text: "实时数据"
    }
}

2、效果