(顶部/底部)导航方案(1)TabBar+StackLayout

ApplicationWindow{ visible: true id:window width:320 height:480 TabBar { id: bar width: parent.width //当前选中项下划线色 Material.accent:"#ffffff" //背景色 Material.background: "#157CA1" //没被选中的字体颜色 Material.foreground: "#cccccc" font.bold: true font.pixelSize: 18 TabButton { text: qsTr("社区") }
        TabButton { text: qsTr("茶聊馆") }
        TabButton { text: qsTr("朋友圈") }
    }

    Flickable{ height:parent.height - bar.height width: parent.width contentHeight: stack.height anchors.top: bar.bottom clip: true ScrollBar.vertical: ScrollBar{}
        StackLayout { id:stack width: parent.width currentIndex: bar.currentIndex Rectangle{ id: homeTab width: 100 height: 2000 color: "#b54040" gradient: Gradient { GradientStop { position: 0.02; color: "#ff0000"; }
                    GradientStop { position: 0.75; color: "#ffffff"; }
                }
            }
            Rectangle { id: discoverTab width: 100 color: "yellow" }
            Rectangle { id: activityTab width: 100 color: "blue" }
        }
    }



}

用此实现一个类似新闻的界面:

Item {

    TabBar {
        id: bar
        width: parent.width
        //当前选中项下划线色
        Material.accent:"#ffffff"

        //背景色
        Material.background: "#157CA1"
        //没被选中的字体颜色
        Material.foreground: "#cccccc"
        font.bold: true
        font.pixelSize: 18
        TabButton {
            text: qsTr("社区")
        }
        TabButton {
            text: qsTr("茶聊馆")
        }
        TabButton {
            text: qsTr("朋友圈")
        }
    }

      property var pics:[
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图1.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图2.jpg"},
         {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图3.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图1.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图2.jpg"},
         {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图3.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图1.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图2.jpg"},
         {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图3.jpg"},
    ]
    Flickable{
        id:flick

        height:parent.height - bar.height
        width: parent.width
        contentHeight: stack.height
        anchors.top: bar.bottom
        clip: true
        ScrollBar.vertical: ScrollBar{}
        StackLayout {
            id:stack
            width: parent.width
            height: homeTab.height
            currentIndex: bar.currentIndex
            Rectangle{
                id: homeTab
                width: parent.width //可以不指定 col会冲出尺寸限制
                height: col.height
                color: "#034963"
                Column{
                    id:col
                    Loader{
                        id:lunboItem
                        width: flick.width
                        height: width*0.5
                        sourceComponent: lunbo
                    }

                    ListView{
                        id:newsView
                        width: flick.width
                        spacing: 1 //间隔1 间隔颜色将会被 homeTab的背景色填充
                        height: contentHeight
                        model: pics
                        delegate: BorderImage {
                            source: pics[index].pic
                            width: parent.width
                            height: sourceSize.height/sourceSize.width*width
                        }

                    }

                }



            }
            Rectangle {
                id: discoverTab
                width: 100
                color: "yellow"
            }
            Rectangle {
                id: activityTab
                width: 100
                color: "blue"
            }
        }
    }


    Component{
        id:lunbo;
        Item {
            SwipeView{
                id:sw;
                clip: true
                width: parent.width
                anchors.horizontalCenter: parent.horizontalCenter
                height: parent.height;
                currentIndex:pageit.currentIndex;

                Item {
                    id:item1;
                    Rectangle{
                        anchors.fill: parent

                        BorderImage {
                            anchors.fill: parent
                            id: name
                            source: "qrc:/PageManger/SheQuPage/res/社区轮播1.png"
                            border.left: 5; border.top: 5
                            border.right: 5; border.bottom: 5

                        }
                        //点击后发生的事情。。。
                        MouseArea{
                            anchors.fill: parent;
                            onClicked: {
                            }
                        }
                    }
                }

                Item {
                    id:item2;
                    Rectangle{
                        anchors.fill: parent

                        BorderImage {
                            anchors.fill: parent
                            source: "qrc:/image/2.jpg"
                            border.left: 5; border.top: 5
                            border.right: 5; border.bottom: 5

                        }
                    }
                }

                Item {
                    id:item3;
                    Rectangle{
                        anchors.fill: parent

                        BorderImage {
                            anchors.fill: parent
                            source: "qrc:/image/3.jpg"
                            border.left: 5; border.top: 5
                            border.right: 5; border.bottom: 5

                        }


                    }
                }


            }
            PageIndicator{
                id:pageit;
                anchors.bottom: sw.bottom;
                anchors.bottomMargin: 10;
                anchors.horizontalCenter: sw.horizontalCenter
                count: 3;
                currentIndex: sw.currentIndex;
            }
            Timer{
                running: true;
                repeat: true
                id:time;
                interval: 1500;
                onTriggered: {
                    var  Tmp = pageit.currentIndex;
                    Tmp++;
                    if(Tmp>2)
                    {
                        Tmp=0;
                    }

                    pageit.currentIndex = Tmp;
                }
            }
        }

    }
}