Component

组件，结合已有元素封装自己需要的控件。

  1. progress : real
  2. status : enumeration
  3. url : url
  1. completed()    //组件构建完成
  2. destruction()     //销毁组件
  1. object createObject(QtObject parent, object properties)
  2. string errorString()
  3. object incubateObject(Item parent, object properties, enumeration mode)

Loader

动态加载组件，继承自Item，通过Loader加载组件后如果需要对组件属性进行修改，可通过item加载组件中元素，然后可对其属性进行修改。

  1. active : bool
  2. asynchronous : bool
  3. item : object        //Loader加载的顶级元素
  4. progress : real
  5. source : url
  6. sourceComponent : Component
  7. status : enumeration
  1. loaded()
  1. object setSource(url source, object properties)

实操：

  1.     Component{
  2.         id:com
  3.         Rectangle{
  4.             id: rect
  5.             width: 100
  6.             height: 100
  7.             color: "lightblue"
  8.             Component.onCompleted: {
  9.                 console.log("onCompleted width: ", width, "height: ", height)
  10.             }
  11.             Component.onDestruction: {
  12.     //            console.log("onDestruction width: ", width, "height: ", height)
  13.             }
  14.         }
  15.     }
  17. Loader{
  18.         id: loader
  19. //        source: "/2.jpg"    //不可加载图片，status会报error
  20. //        source: "rectangle.qml" //可加载qml文件
  21.         asynchronous: true      //异步加载，status从loading到ready
  22.         sourceComponent: com
  23.         onStatusChanged: {
  24.             console.log("status:", status)
  25.         }
  26.     }
  28.     Button{
  29.         width: 50
  30.         height: 50
  31.         x: loader.item.width
  33.         onPressed: {    //按下的时候不会加载的组件
  34.             loader.sourceComponent = null
  35.         }
  36.         onReleased: {   //松开的时候会重新加载组件
  37.             loader.sourceComponent = com
  38.             loader.item.width = 80
  39.             loader.item.height = 80
  40.             loader.item.color = "blue"
  41.         }
  42.     }
  1.     Component{
  2.         id: com
  3. //        Image {
  4. //            id: img
  5. //            source: "/2.jpg"
  6. ////            source: "/th.gif"   //不可加载动画
  7. //            width:200
  8. //            height:200
  9. //        }
  10.         AnimatedImage {    //动图
  11.             id: img
  12. //            source: "/2.jpg"
  13.             source: "/th.gif"   //加载动画与静态图
  14.             speed: 2    //修改动图播放速度
  15.             width:200
  16.             height:200
  17.         }
  18.     }
  20.     Loader{
  21.         id: loader
  22. //        source: "/2.jpg"    //不可加载图片，status会报error
  23. //        source: "rectangle.qml" //可加载qml文件
  24.         asynchronous: true      //异步加载，status从loading到ready
  25.         sourceComponent: com
  26.         onStatusChanged: {
  27.             console.log("status:", status)
  28.         }
  29.     }
  31.     Button{
  32.         width: 50
  33.         height: 50
  34.         x: loader.item.width
  36.         onPressed: {    //暂停动图播放
  37.             loader.item.paused = true    
  38.         }
  39.         onReleased: {   //开始动图播放
  40.             loader.item.paused = false
  41.         }
  42.     }