QT QUICK程序写动态标签页面

1.利用SwipeView和TabBar控件的CurrentIndex属性，使两者关联起来，实现改变标签，SwipeView的视图也切换到相应的页面

    SwipeView {

        id: swipeView

        anchors.fill: parent

        currentIndex: tabBar1.currentIndex//和TabBar的currentindex关联

        Repeater{

            id:pageRepeater

            model:ListModel{

                id:pageModel

            }

            TextEdit{

                id:pageMain

                text:pageNumber//页面序号

                wrapMode: Text.Wrap//自动换行

            }

        }

    }

通过Repeater来动态的向SwipeView视图内添加控件，接下来添加标签

    header:Row{

        id:rowTab

        TabBar {

                id: tabBar1

                currentIndex: swipeView.currentIndex

                width: parent.width-newTabButton.width

                background: Rectangle{

                    anchors.fill: parent

                    color: "lightgrey"

                }

                Repeater{

                    model:ListModel{

                        id:buttonModel

                    }

                    TabButton{

                        id:tabbutton

                        text: "未命名"+tabNumber//用Model的值tabNumber来显示标签按钮

                        onDoubleClicked: {

                            buttonModel.remove(tabBar1.currentIndex)

                            MyScript.deletePage()

                                   //通过JS来删除主页面，否则会出现pageModel not define错误，import "createTabJS.js" as MyScript导入添加的JS文件以调用函数

                        }

                    }

                }

        }

        Button{

            id:newTabButton

            text: "+"

            onClicked: {

                pageCount++//页面的数量

                buttonModel.append({"tabNumber":pageCount})

                pageModel.append({"pageNumber":pageCount})

                tabBar1.setCurrentIndex(tabBar1.count-1)//点击“+”后，自动跳转到最新的标签

                windowsText.opacity=0//设置背景文本的不透明度

            }

        }

    }