QML TabView动态添加tab和赋初值

Posted 2022-12-01 jingsichen

通过调用TabView的addTab  动态添加新的选项卡：Tab addTab(string title, Component component)，其中title为选项卡标题，component为选项卡内的组件（var component = Qt.createComponent("souces.qml")。

动态添加完成后，返回一个Tab，通过引用Tab的item可以访问component内的方法和属性

动态添加Tab和给Tab内的component赋初值源码：

              　var component = Qt.createComponent("souces.qml")
                if(component.status===Component.Ready)
                    var tab=tabView.addTab("sdfasdf",component)
                    tabView.currentIndex=(tabView.count-1)//当前选中项
                    tab.item.tableModel.clear()
                    tab.item.tableModel.append(
                                                 a: 122222,
                                                 b: 2,
                                                 c:"Bit",
                                                 d: 4,
                                                 remark: "备注"
                                             )
                    

TabView源码：

 1     TabView  
 2         id:tabView
 3         anchors.top: functionButton.bottom
 4         anchors.bottom: parent.bottom
 5         anchors.right: parent.right
 6         anchors.left: parent.left
 7         style: TabViewStyle 
 8             frameOverlap: 1
 9             tab: Rectangle 
10                 color: styleData.selected ? "#dcdada" :"white"
11                 border.color:  "steelblue"
12                 implicitWidth: Math.max(text1.width + 4, 80)
13                 implicitHeight: 30
14                 radius: 2
15                 Text 
16                     id: text1
17                     anchors.centerIn: parent
18                     text: styleData.title
19                     color: styleData.selected ? "white" : "black"
20                 
21             
22             frame: Rectangle  color: "white" 
23             rightCorner:Rectangle
24                 anchors.right: parent.right
25                 Text 
26                     id: text2
27                     text: "+++"
28     //                    color: styleData.selected ? "white" : "orange"
29                 
30             
31         
32     

 souces.qml源码：

  1     property alias tableModel:configModel//属性别名    
  2     ListModel
  3           id: configModel
  4           ListElement
  5               a: 1;
  6               b: 2;
  7               c:"Bit"
  8               d: 4
  9               remark: "备注"
 10           
 11     
 12     TableView
 13       id: configTable
 14       alternatingRowColors:true//交替行颜色
 15       anchors.bottom: table.bottom
 16       anchors.top: functionButton.bottom
 17       anchors.left: table.left
 18       anchors.right: table.right
 19       model: configModel
 20 //      width:table.width
 21       TableViewColumn
 22           id:byteOffset
 23           role:"byteOffset"
 24           title:"字偏移"
 25           width: columnWidth
 26       
 27       TableViewColumn
 28           id:bitOffset
 29           role:"bitOffset"
 30           title:"位偏移"
 31           width: columnWidth
 32       
 33       TableViewColumn
 34           id:fieldLenType
 35           role:"fieldLenType"
 36           title:"字段长度类型"
 37           width: columnWidth
 38       
 39       TableViewColumn
 40           id:fieldLen
 41           role:"fieldLen"
 42           title:"字段长度"
 43           width: columnWidth
 44       
 45       TableViewColumn
 46           id:fieldType
 47           role:"fieldType"
 48           title:"字段类型"
 49           width: columnWidth
 50       
 51       TableViewColumn
 52           id:fieldShowType
 53           role:"fieldShowType"
 54           title:"字段显示类型"
 55           width: columnWidth
 56       
 57       TableViewColumn
 58           id:fieldName
 59           role:"fieldName"
 60           title:"字段名称"
 61           width: columnWidth
 62       
 63       TableViewColumn
 64           id:fieldValue
 65           role:"fieldValue"
 66           title:"字段值"
 67           width: columnWidth
 68       
 69 
 70       TableViewColumn
 71           id:remark
 72           role:"remark"
 73           title:"备注"
 74           width: columnWidth
 75           elideMode: Text.ElideRight
 76       
 77 
 78 
 79       headerDelegate :Rectangle//设置表头的样式
 80 //          implicitWidth: 10
 81 //          implicitHeight: 30
 82           height: 30
 83           border.color: "#b9b8b8"
 84           Text
 85               anchors.centerIn : parent//居中
 86               anchors.verticalCenter: parent.verticalCenter
 87               text: styleData.value
 88 //              color:
 89               font.bold: true
 90           
 91           MouseArea //自定义左击/右击功能  左击被屏蔽
 92               anchors.fill:parent
 93               acceptedButtons: Qt.RightButton|Qt.LeftButton
 94               onClicked: 
 95                   tableHeader_menu.popup()
 96               
 97           
163 
164       
165       //行代理可以修改行高等信息
166       rowDelegate: Rectangle 
167             height: 20
168             MouseArea //自定义左击/右击功能
169                 anchors.fill:parent
170                 acceptedButtons: Qt.RightButton|Qt.LeftButton
171                 onClicked: 
172                     if(mouse.button === Qt.RightButton)
173 //                        console.log(styleData.row )
174                         if(styleData.row!==undefined)
175                             configTable.selection.clear()//取消所有选择
176                             currrrRow=styleData.row
177                             configTable.selection.select(styleData.row)//选择行
178                             insertRowUp.visible=true
179                             deletRow.visible=true
180                             content_menu.popup()
181                         else
182                             currrrRow=configTable.rowCount-1
183                             configTable.selection.clear()//取消所有选择
184                             insertRowUp.visible=false
185                             deletRow.visible=false
186                             content_menu.popup()
187                         
188 
189                     else if(mouse.button === Qt.LeftButton)
190                         if(styleData.row!==undefined)
191                             currrrRow=styleData.row
192                             configTable.selection.clear()//取消所有选择
193                             configTable.selection.select(styleData.row)//选择行
194                         else
195                             currrrRow=-1
196                             configTable.selection.clear()//取消所有选择
197                         
198                      
199                 
200                 onDoubleClicked: 
201                     if(styleData.row!==undefined)
202                         dataFormatEidt.visible=true
203                         dataFormatEidt.linedata=configModel.get(currrrRow)
204                     
205                 
206             
207         
208