Qt Quick 底部导航+路径动画

来源：互联网发布：神雕侠侣源码编辑：程序博客网时间：2024/06/08 06:12

写一百次底部导航,有100次不同的写法,我也醉了 ,因此在此记录各种不同的写法

FooterItem.Qml:import QtQuick 2.7import QtQuick.Controls 2.0import QtQuick.Layouts 1.0import QtQuick.Controls.Material 2.0import  "./GoogleColor.js"   as  GColorRectangle{    signal  click();    property string mtxt: ""    width: parent.width/4    height: parent.height    border.width: 1    border.color: "#cccccc"    Behavior on color{        PropertyAnimation{duration: 1000}    }    Text{        text:mtxt        anchors.centerIn: parent        font.pixelSize: 18        color:"#ffffff"        font.bold: true    }    MouseArea{        anchors.fill: parent        onClicked: {            click();        }    }}

MyFooterItem.qml:import QtQuick 2.7import QtQuick.Controls 2.0import QtQuick.Layouts 1.0import QtQuick.Controls.Material 2.0import  "./GoogleColor.js"   as  GColorItem {    property int  curindex: 0    property int mw: 0    property int mh: 0    property int mx: 0    property int my: 0    Component.onCompleted: {        curindex=0    }    Rectangle{        id:bks        width: mw        height: mh        color: GColor.浅绿色["700"]        z:parent.z+1        opacity: 0.21    }    PathAnimation{        id:p        loops: 1        target:bks        duration: 555        path: Path{                PathLine{                    x:mx                    y:my                }        }    }    function  setorg(it)    {        mw=it.width        mh=it.height        mx=it.x        my=it.y        p.restart()    }    Row{        anchors.fill: parent        FooterItem{            mtxt: "首页"            color:curindex==0?GColor.浅绿色["500"]:GColor.浅蓝色["500"]            onClick: {                curindex=0                setorg(this)            }        }        FooterItem{            mtxt: "附近"            color:curindex==1?GColor.浅绿色["500"]:GColor.浅蓝色["500"]            onClick: {                curindex=1                 setorg(this)            }        }        FooterItem{            mtxt: "消息"            color:curindex==2?GColor.浅绿色["500"]:GColor.浅蓝色["500"]            onClick: {                curindex=2                 setorg(this)            }        }        FooterItem{            mtxt: "个人中心"            color:curindex==3?GColor.浅绿色["500"]:GColor.浅蓝色["500"]            onClick: {                curindex=3                 setorg(this)            }        }    }}

MAIN.QML:import QtQuick 2.7import QtQuick.Controls 2.0import QtQuick.Layouts 1.0import QtQuick.Controls.Material 2.0import  "./GoogleColor.js"   as  GColorApplicationWindow {    visible: true    width: 640    height: 480    title: qsTr("Hello World")    footer:MyFooter{        width: parent.width        height: 60        onCurindexChanged: {            console.log(curindex)        }    }}

这里写图片描述

0 0