QML学习笔记(一)

本篇文章是对来自🤝BiliBili-清晨与猫鱼的QML教程的学习笔记，原视频链接👇
https://www.bilibili.com/video/BV1Ay4y1W7xd?spm_id_from=..search-card.all.click&vd_source=4079f59f2068471b4d379822052e0270

---

创建一个QML工程

　　创建QML工程时，选择创建Qt Quick项目

可视与不可视元素

　　使用控件前需要导入对应的模块，例如：需要使用 Controls 控件在手册内寻找其对应模块，并引入模块

　　可视元素为可以看到的元素，如：Button、Label
　　不可视元素为不可以看到的元素，如：Layout、RowLayout

RowLayout {                           //不可视元素,竖排列
      Button {                        //定义一个按钮
          text: "Ok"                  //定义按钮的文字
          onClicked: model.submit()   //定义按钮点击后触发效果
      }
      Button {                        //定义一个按钮
          text: "Cancel"              //定义按钮的文字
          onClicked: model.revert()   //定义按钮点击后触发效果
      }
  }
  ColumnLayout{                       //不可视元素,横排列
       x: 150                         //设置横排列的坐标
       
       Button {
          text: "Ok"
          onClicked: model.submit()
      }
       Button {
          text: "Cancel"
          onClicked: model.revert()
      }
  }

子元素列表

Item {
    anchors.fill: parent
    id:root

   Column {
       id:cloumn

       Rectangle{
           width: 30
           height: 30
           color: "red"
           property string name: 'rect1'
       }
       Rectangle{
           width: 30
           height: 30
           color: "blue"
           property string name: 'rect2'

           Label{               //此项不属于column的子元素
               text: 'label'
           }
       }
       Component.onCompleted: {
           console.log(cloumn.children.length)//取cloumn下的子元素个数
           for(let i=0;i<cloumn.children.length;i++)    
           {
               console.log(cloumn.children[i].name)//遍历cloumn下的子元素的name项
               console.log(cloumn.children[i].color)//遍历cloumn下的子元素的color项
           }
       }
   }
}