Qt Quick实现底部导航

有时候不得不赞叹Qt Quick的界面开发效率。今天就玩一把黑科技。做的是底部导航条,需要在安卓上写一个项目用到,非常容易实现,思路是用一个纵向的布局 固定在底部,加上icon,由于底部导航和其他控件不同:各种分辨率下的拉伸布局,如果屏幕宽度偏离很大,并且有图片,需要算法的.俺这里没写,不精通啊

封装:

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import "./UI.js"  as Mui
Item {
    property real dpScale:  1.5
    readonly property real dp: Math.max(Screen.pixelDensity * 25.4 / 160 * dpScale, 1)
    signal  selchangge(var mindex);
    property var curTab: 0
       //模拟导航栏
       ListView{


           anchors.bottom: parent.bottom
           orientation: ListView.Horizontal;
           width: parent.width;
           height: 72*dp 
           id:myview;
           model:viewmode;
           delegate: listcomponet;
       }

       Component{
           id:listcomponet;
           Rectangle{

               id:re
               border.width: 1;
               border.color: "white"
               //H 4: W3
   // width: myview.width/5;
   // height:getw(width);
               width: myview.width/5;
               height:60*dp;
               anchors.bottom: parent.bottom

                   function  getw(w)
                   {
                       console.log(w+":"+ width*0.75);
                       return  width*0.75;
                   }

               color:  mcolor;
               Behavior on color{

                   ParallelAnimation{

                       ColorAnimation {
                           duration: 888
                       }

                   }


               }

               Item {
                   id: body;
                   anchors.fill: parent
                   Text{

                       id:tabtxxtimg

                      anchors.bottom: tabtxxt.top
                       anchors.horizontalCenter: parent.horizontalCenter
                       color: txtcolor
                       text: ""
                       styleColor: "#332a2a"
                       verticalAlignment: Text.AlignVCenter
                       horizontalAlignment: Text.AlignHCenter
                       anchors.bottomMargin: 4;

                   }
                   Text{

                       id:tabtxxt
                       anchors.bottom: body.bottom
                       anchors.bottomMargin: 10;

                       anchors.horizontalCenter: parent.horizontalCenter
                       color: txtcolor
                       text: title+":"+index;
                       styleColor: "#332a2a"
                       verticalAlignment: Text.AlignVCenter
                       horizontalAlignment: Text.AlignHCenter

                   }
               }
               MouseArea{
                   id:mouse1;
                   anchors.fill: parent;
                   onClicked: {
                       console.log("click");
                       curTab = index;
                        设置选中色(index);
                   }
               }
           }

       }

       ListModel{
           id:viewmode;
           ListElement{mcolor:"#777777";title:"XXX";txtcolor:"white"}
            ListElement{mcolor:"#cccccc";title:"聊天";txtcolor:"white"}
            ListElement{mcolor:"#cccccc";title:"通信录";txtcolor:"white"}
            ListElement{mcolor:"#cccccc";title:"社区";txtcolor:"white"}
            ListElement{mcolor:"#cccccc";title:"我的XXX";txtcolor:"white"}
       }
   function   设置选中色(index)
   {

                selchangge(index);
               for(var x =0;x<viewmode.count;x++)
               {
                    var  obj =  viewmode.get(x);
                   if(index != x)
                   {
                       //非选中色
                       obj.mcolor="#cccccc";

                   }else{
                       //选中色
                       obj.mcolor="#777777";

                   }
                   console.log(  obj.mcolor);
               }
   }
}

调用

import QtQuick.Layouts 1.3
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import "./UI.js"  as Mui

ApplicationWindow {
    visible: true;
     width: 320;
     height: 480;

    Component.onCompleted: {
           Mui.data ++;
        console.log(Mui.data)
    }

    Label{
           text: ".."
    }


        Navtab{
            width: parent.width;
            height: 100;
            anchors.bottom: parent.bottom
            onSelchangge: {
                console.log("myindex:"+mindex);
            }

        }

}