QT QUICK 프로그램 쓰기 동적 탭 페이지

8964 단어
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//           
            }
        }
    }

좋은 웹페이지 즐겨찾기