QML 数据遍历模式

一.子控件遍历

经常有子控件遍历的编历,目前看是静态布局是有效的,动态布局(Repeator,ListView)未法执行.
静态布局是指直接写在qml布局,而非根据model生成形式.

在qml item 有一个基础属性 list children.记录这一Item下属所有子Item的记录.
它实际上一个list 数据结构,因此有如下遍历方式.findItem/findItem2 是结果是等效的

TabBar{
 id:mTab
  TabButton{
   objectName:"1"
    text:"A";
   }
 id:mTab
  TabButton{
   objectName:"2"
    text:"B";
   }
 id:mTab
  TabButton{
   objectName:"3"
    text:"C";
   }
}

function findItem(name){
 for (var i = 0; i < mTab.children.length; i++) {
            if (mTab.children[i].objectName === name) {
                return mTab.children[i];
            }

return null;
}

function findItem2(name){
 for (var i int mTab.children.length; i++) {
            if (mTab.children[i].objectName === name) {
                return mTab.children[i];
            }

return null;
}

二.动态布局遍历模式

Repeator/ListView 根据数据生成对象,可以用ItemAt() 函数来根据下标取得相应对象
缺省是无法按名字访问

Repeator {
  id:mTargets
}
function getTargetByName(targetName){
       var count = mTargets.count;
        for(var i=0;i

三.json对象遍历对象

1.数组数组

property var list[] ;
function getTargetByName(targetName){
    for(int i in list){
      var item = list[i] ;
   } 
}

2.map对象访问

注意qml本身不支持map数据结构,如果访问可以定义一个json对象,把问题转化为对json object 的访问

  property var myMap : {
    "name":null
   } //注意json对象初始化时必须至少有一个值map对象才会创建
//即 property var myMap : {} 是无法创建json对象的

  function findByName(name){
     return myMap[name];
  }

function showMap(){
     for(var it in myMap){
          console.log("name",myMap[item].objectName);
     }
 }

四 qml 中ListModel 数据遍历修改

如果ListView是由ListModel 生成的,则只需要修改ListModel 相关字段,界面可以做相应调整

ListModel提供大量操作方法

append(dict)
clear()
object get(index)
insert(index, jsobject dict)
move(from, int to, int n)
remove(index, int count = 1)
set(index, jsobject dict)
setProperty(index, string property, variant value)

如 setProperty是修改某一行对象指定属性数据,set是完整重设某一行.

  function showMode(){
     for(int i=0; i< model.count;i++){
     console.log("name",model.get(i).objectName);
    }
 }