QML之TabBar

TabBar的切换效果

import QtQuick 2.0import QtQuick.Window 2.2import QtQuick.Controls 2.0import QtQuick.Layouts 1.3Window{    id:window    visible:true    width:400    height:400    TabBar{        id:bar;        width:parent.width;        TabButton{            text:qsTr("Home");        }        TabButton{            text:qsTr("Discover");        }        TabButton{            text:qsTr("Activity");        }    }    StackLayout{        width:parent.width;        currentIndex:bar.currentIndex;        Item{            id:homeTab        }        Item{            id:discoverTab        }        Item{            id:activityTab        }    }}

如果TabBar的宽度超过可用宽度，会自动形成flickable

TabBar{    id:bar    width:parent.width    Repeater{        model:["First","Second","Third","Fourth","Fifth"]        TabButton{            text:modelData;            width:Math.max(100,bar.width/5);        }    }}

flickable形成的效果是：当点击第4个按钮的时候，第1个按钮隐藏一半，第5个按钮露出一半，当点击第5个按钮的时候，第1个按钮隐藏了。