QML Item Element

最新推荐文章于 2024-04-03 10:40:25 发布
最新推荐文章于 2024-04-03 10:40:25 发布
阅读量2k 收藏
点赞数
分类专栏： QT学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sbisyju/article/details/9202923
版权

QML Item Element

The Item is the most basic of all visual items in QML. More...

在QML中，Item是所有可视化项的基础。

Inherited by BorderImage, Column, Flickable, Flipable, Flow, FocusPanel, FocusScope, GestureArea, Grid, Image, Loader, MouseArea, Particles, PathView,Rectangle, Repeater, Row, Text, TextEdit, TextInput, and WebView.

Item instantiates the C++ class QDeclarativeItem

Item实例化C++类QDeclarativeItem

Properties

Methods

Detailed Description

All visual items in Qt Declarative inherit from Item. Although Item has no visual appearance, it defines all the properties that are common across visual items - such as the x and y position, the width and height, anchoring and key handling.

在Qt Declarative中所有可视元素都继承自Item， Item本身并不可视，只是用它定义了所有可视元素公有的属性。例如像x,y坐标，width宽度，height高度，锚anchoring以及按键处理等。

Item is also useful for grouping items together.

Item还有个用处就是将很多的item组织起来。

 
 

  
  

   
   

    
    [javascript] 
    
    view plain
    
    copy
    
    print
    
    ?
   
   

  
  

  
  
  1. Item {  
  2.     Image {  
  3.         source: "tile.png"  
  4.     }  
  5.     Image {  
  6.         x: 80  
  7.         width: 100  
  8.         height: 100  
  9.         source: "tile.png"  
  10.     }  
  11.     Image {  
  12.         x: 190  
  13.         width: 100  
  14.         height: 100  
  15.         fillMode: Image.Tile  
  16.         source: "tile.png"  
  17.     }  
  18. }  

 
 
 Item {
     Image {
         source: "tile.png"
     }
     Image {
         x: 80
         width: 100
         height: 100
         source: "tile.png"
     }
     Image {
         x: 190
         width: 100
         height: 100
         fillMode: Image.Tile
         source: "tile.png"
     }
 }







Key Handling


Key handling is available to all Item-based visual elements via the Keys attached
 property. The Keys attached property provides basic handlers such as
onPressed and onReleased,
 as well as handlers for specific keys, such as onCancelPressed.
 The example below assigns focus to
 the item and handles the Left key via the general onPressed handler and the Select key via the onSelectPressed handler:


所有继承自Item的可视化元素都可以通过Keys这个附加属性来处理按键。Keys附加属性提供一些基础的按键处理，例如onPressed和onReleased，当然也有一些特定按键的处理，例如onCancelPressed。下面这个例子描述了如何给一个item设置焦点，如何通过onPressed和onSelectPressed来处理左键。




 


 
  
  

   
   

    
    

     
     [javascript] 
     
     view plain
     
     copy
     
     print
     
     ?
    
    

   
   

   
   
  1. Item {  
  2.      focus: true  
  3.      Keys.onPressed: {  
  4.          if (event.key == Qt.Key_Left) {  
  5.              console.log("move left");  
  6.              event.accepted = true;  
  7.          }  
  8.      }  
  9.      Keys.onSelectPressed: console.log("Selected");  
  10.  }  

  
  
Item {
     focus: true
     Keys.onPressed: {
         if (event.key == Qt.Key_Left) {
             console.log("move left");
             event.accepted = true;
         }
     }
     Keys.onSelectPressed: console.log("Selected");
 }





See the Keys attached
 property for detailed documentation.


 


Property Documentation


  
  


   
   


    
    
 
read-onlyactiveFocus : bool
 


   
   


   
   


    
    
This property indicates whether the item has active focus.


    
    
这个属性表明当前的item是否处于焦点状态。


    
    
An item with active focus will receive keyboard input, or is a FocusScope ancestor
 of the item that will receive keyboard input.


    
    
一个item只有在处于焦点的状态或者是一个FocusScope中的一个元素下才能接收键盘输入。


    
    
Usually, activeFocus is gained by setting focus on an item and its enclosing FocusScopes. In the following example input will have activeFocus.


    
    
通常，当对某个item设置焦点以及对包含它的FocusScopes设置焦点时，activeFocus被置为真。在下面的例子中，input将会有一个为真的activeFocus。


    
    
 


    
    


     
     


      
      

       
       [javascript] 

       
       view plain
       
       copy
       
       print
       
       ?
      
      


     
     


     
     
  1. Rectangle {  
  2.     FocusScope {  
  3.         focus: true  
  4.         TextInput {  
  5.             id: input  
  6.             focus: true  
  7.         }  
  8.     }  
  9. }  


    
    


    
    
 Rectangle {
     FocusScope {
         focus: true
         TextInput {
             id: input
             focus: true
         }
     }
 }


    
    


    
    See also 
    
    focus
    
     and 
    
    Keyboard
 Focus
    
    .
   
   


  
  




  
  


   
   


    
    
 
anchors.top : AnchorLine
 
 
anchors.bottom : AnchorLine
 
 
anchors.left : AnchorLine
 
 
anchors.right : AnchorLine
 
 
anchors.horizontalCenter : AnchorLine
 
 
anchors.verticalCenter : AnchorLine
 
 
anchors.baseline : AnchorLine
 
 
anchors.fill : Item
 
 
anchors.centerIn : Item
 
 
anchors.margins : real
 
 
anchors.topMargin : real
 
 
anchors.bottomMargin : real
 
 
anchors.leftMargin : real
 
 
anchors.rightMargin : real
 
 
anchors.horizontalCenterOffset : real
 
 
anchors.verticalCenterOffset : real
 
 
anchors.baselineOffset : real
 


   
   


   
   


    
    
Anchors provide a way to position an item by specifying its relationship with other items.


    
    
Margins apply to top, bottom, left, right, and fill anchors. The anchors.margins property can be used to set all of the various margins at once, to the same value.
 Note that margins are anchor-specific and are not applied if an item does not use anchors.


    
    
Offsets apply for horizontal center, vertical center, and baseline anchors.


    
    
 
 		 Text anchored to Image, horizontally centered and vertically below, with a margin. 
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Image { id: pic; ... }  
  2. Text {  
  3.     id: label  
  4.     anchors.horizontalCenter: pic.horizontalCenter  
  5.     anchors.top: pic.bottom  
  6.     anchors.topMargin: 5  
  7.     ...  
  8. }  

         
         
 Image { id: pic; ... }
 Text {
     id: label
     anchors.horizontalCenter: pic.horizontalCenter
     anchors.top: pic.bottom
     anchors.topMargin: 5
     ...
 }






 
 		 Left of Text anchored to right of Image, with a margin. The y property of both defaults to 0. 
  
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Image { id: pic; ... }  
  2.   Text {  
  3.       id: label  
  4.       anchors.left: pic.right  
  5.       anchors.leftMargin: 5  
  6.       ...  
  7.   }  

         
         
 Image { id: pic; ... }
   Text {
       id: label
       anchors.left: pic.right
       anchors.leftMargin: 5
       ...
   }







    
    
anchors.fill provides a convenient way for one item to have the same geometry as another item, and is equivalent to connecting all four directional anchors.


    
    
To clear an anchor value, set it to undefined.


    
    
Note: You can only anchor an item to siblings or a parent.


    
    
For more information see Anchor Layouts.


   
   


  
  




  
  


   
   


    
    
 
read-onlychildren : list<Item>
 
 
read-onlyresources : list<Object>
 


   
   


   
   


    
    
The children property contains the list of visual children of this item. The resources property contains non-visual resources that you want to reference by name.


    
    
Generally you can rely on Item's default property to handle all this for you, but it can come in handy in some cases.


    
    
children属性包含该item的所有可见子item的一个列表。resources包含了不可见的资源，但我们可以通过资源名来引用这些资源。通常这两个属性无需关心太多，只是在某些情况下会用到。




    
    
 
     
     

      
      

       
       

        
        [javascript] 
        
        view plain
        
        copy
        
        print
        
        ?
       
       

      
      

      
      
  1. Item {  
  2.      children: [  
  3.          Text {},  
  4.          Rectangle {}  
  5.      ]  
  6.      resources: [  
  7.          Component {  
  8.              id: myComponent  
  9.              Text {}  
  10.          }  
  11.      ]  
  12.  }  

     
     
Item {
     children: [
         Text {},
         Rectangle {}
     ]
     resources: [
         Component {
             id: myComponent
             Text {}
         }
     ]
 }


     
     


      
      


       
       

        
        [javascript] 

        
        view plain
        
        copy
        
        print
        
        ?
       
       


      
      


      
      
  1.    


     
     


 





   
   


  
  


  
  


   
   


    
    
 
read-onlychildrenRect.x : real
 
 
read-onlychildrenRect.y : real
 
 
read-onlychildrenRect.width : real
 
 
read-onlychildrenRect.height : real
 


   
   


   
   


    
    
The childrenRect properties allow an item access to the geometry of its children. This property is useful if you have an item that needs to be sized to fit its children.


   
   


  
  

通过childrenRect的属性集，我们可以访问该item的子item的坐标位置大小信息。





  
  


   
   


    
    
 
clip : bool
 


   
   


   
   


    
    
This property holds whether clipping is enabled. The default clip value is false.


    
    
clip属性表明是否允许剪切。默认为false。


    
    
If clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle.


    
    
Non-rectangular clipping regions are not supported for performance reasons.


   
   


  
  




  
  


   
   


    
    
 
read-onlydefaultdata : list<Object>
 


   
   


   
   


    
    
The data property allows you to freely mix visual children and resources in an item. If you assign a visual item to the data list it becomes a child and if you assign any other object type, it is added as a resource.


    
    
data属性允许我们自由组合子item和资源。当向data列表中加入一个可视的item时，它会成为这个item的子item，如果是其他类型，则会作为资源加进来。


    
    
So you can write:


    
    
 


    
    


     
     


      
      

       
       [javascript] 

       
       view plain
       
       copy
       
       print
       
       ?
      
      


     
     


     
     
  1. Item {  
  2.      Text {}  
  3.      Rectangle {}  
  4.      Timer {}  
  5.  }  


    
    


    
    
Item {
     Text {}
     Rectangle {}
     Timer {}
 }


   
   


   
   


    
    


     
     


      
      

       
       [javascript] 

       
       view plain
       
       copy
       
       print
       
       ?
      
      


     
     


     
     
  1. instead of:  


    
    


    
    
instead of:

   
   


   
   


    
    


     
     


      
      

       
       [javascript] 

       
       view plain
       
       copy
       
       print
       
       ?
      
      


     
     


     
     
  1. Item {  
  2.      children: [  
  3.          Text {},  
  4.          Rectangle {}  
  5.      ]  
  6.      resources: [  
  7.          Timer {}  
  8.      ]  
  9.  }  


    
    


    
    
Item {
     children: [
         Text {},
         Rectangle {}
     ]
     resources: [
         Timer {}
     ]
 }


    
    


    
    data is a behind-the-scenes property: you should never need to explicitly specify it.
   
   


  
  




  
  


   
   


    
    
 
focus : bool
 


   
   


   
   


    
    
This property indicates whether the item has focus within the enclosing focus scope. If true, this item will gain active focus when the enclosing focus scope gains active focus. In the following example, input will
 be given active focus when scope gains active focus.


    
    
focus属性用来表明在囊括它的最小FocusScope中，这个item是否有焦点。如果为真，则当囊括它的最小FocusScope获得焦点时，这个item也会获得焦点。在下面的例子中，当scope获得焦点，input会获得焦点。


    
    


     
     


      
      

       
       [javascript] 

       
       view plain
       
       copy
       
       print
       
       ?
      
      


     
     


     
     
  1. Rectangle {  
  2.      FocusScope {  
  3.          id: scope  
  4.          TextInput {  
  5.              id: input  
  6.              focus: true  
  7.          }  
  8.      }  
  9.  }  


    
    


    
    
Rectangle {
     FocusScope {
         id: scope
         TextInput {
             id: input
             focus: true
         }
     }
 }




    
    


 


    
    
For the purposes of this property, the scene as a whole is assumed to act like a focus scope. On a practical level, that means the following QML will give active focus to input on startup.


    
    
程序启动时input将会获得焦点。


    
    


     
     


      
      

       
       [javascript] 

       
       view plain
       
       copy
       
       print
       
       ?
      
      


     
     


     
     
  1. Rectangle {  
  2.      TextInput {  
  3.          id: input  
  4.          focus: true  
  5.      }  
  6.  }  


    
    


    
    
Rectangle {
     TextInput {
         id: input
         focus: true
     }
 }




    
    


 


    
    
See also activeFocus and Keyboard Focus.


    
    
 


   
   


  
  


  
  


   
   


    
    
 
opacity : real
 


   
   


   
   


    
    
The opacity of the item. Opacity is specified as a number between 0 (fully transparent) and 1 (fully opaque). The default is 1.


    
    
顾名思义，这个属性是用来设置该item的不透明性的，它可以再0-1之间取值，0表示完全透明，1表示完全不透明，默认值为1，即不透明。


    
    
Opacity is an inherited attribute. That is, the opacity is also applied individually to child items. In almost all cases this is what you want, but in some cases (like the following example)
 it may produce undesired results.


    
    
这个属性是一个有继承性的属性，也就是说这个属性会遗传给它的所有子item。






    
    
 
 		 
 
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Item {  
  2.      Rectangle {  
  3.          color: "red"  
  4.          width: 100; height: 100  
  5.          Rectangle {  
  6.              color: "blue"  
  7.              x: 50; y: 50; width: 100; height: 100  
  8.          }  
  9.      }  
  10.  }  

         
         
Item {
     Rectangle {
         color: "red"
         width: 100; height: 100
         Rectangle {
             color: "blue"
             x: 50; y: 50; width: 100; height: 100
         }
     }
 }





 
 		 
 
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Item {  
  2.      Rectangle {  
  3.          opacity: 0.5  
  4.          color: "red"  
  5.          width: 100; height: 100  
  6.          Rectangle {  
  7.              color: "blue"  
  8.              x: 50; y: 50; width: 100; height: 100  
  9.          }  
  10.      }  
  11.  }  

         
         
Item {
     Rectangle {
         opacity: 0.5
         color: "red"
         width: 100; height: 100
         Rectangle {
             color: "blue"
             x: 50; y: 50; width: 100; height: 100
         }
     }
 }







   
   


  
  




  
  


   
   


    
    
 
parent : Item
 


   
   


   
   


    
    
This property holds the parent of the item.


   
   


  
  

parent属性是指该item的父item.







  
  


   
   


    
    
 
rotation : real
 


   
   


   
   


    
    
This property holds the rotation of the item in degrees clockwise.


    
    
rotation属性表明顺时针旋转的角度


    
    
This specifies how many degrees to rotate the item around its transformOrigin.
 The default rotation is 0 degrees (i.e. not rotated at all).


    
    
rotation属性表明该item绕着它的transformOrigin的角度。默认旋转0度。






    
    
 
 		 
 
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Rectangle {  
  2.      color: "blue"  
  3.      width: 100; height: 100  
  4.      Rectangle {  
  5.          color: "red"  
  6.          x: 25; y: 25; width: 50; height: 50  
  7.          rotation: 30  
  8.      }  
  9.  }  

         
         
Rectangle {
     color: "blue"
     width: 100; height: 100
     Rectangle {
         color: "red"
         x: 25; y: 25; width: 50; height: 50
         rotation: 30
     }
 }







    
    
See also transform and Rotation.


   
   


  
  




  
  


   
   


    
    
 
scale : real
 


   
   


   
   


    
    
This property holds the scale of the item.


    
    
A scale of less than 1 means the item will be displayed smaller than normal, and a scale of greater than 1 means the item will be displayed larger than normal. A negative scale means the item will be mirrored.


    
    
By default, items are displayed at a scale of 1 (i.e. at their normal size).


    
    
scale属性用来表明该item缩放的比例。小于1表示缩小，大于1表示放大。负数表示镜像。默认值为1，表示不缩放。




    
    
Scaling is from the item's transformOrigin.


    
    
 
 		 
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Rectangle {  
  2.     color: "blue"  
  3.     width: 100; height: 100  
  4.     Rectangle {  
  5.         color: "green"  
  6.         width: 25; height: 25  
  7.     }  
  8.     Rectangle {  
  9.         color: "red"  
  10.         x: 25; y: 25; width: 50; height: 50  
  11.         scale: 1.4  
  12.     }  
  13. }  

         
         
 Rectangle {
     color: "blue"
     width: 100; height: 100
     Rectangle {
         color: "green"
         width: 25; height: 25
     }
     Rectangle {
         color: "red"
         x: 25; y: 25; width: 50; height: 50
         scale: 1.4
     }
 }








    
    
See also transform and Scale.


   
   


  
  




  
  


   
   


    
    
 
state : string
 


   
   


   
   


    
    
This property holds the name of the current state of the item.


    
    
state属性是该item当前状态的名字。


    
    
This property is often used in scripts to change between states. For example:


    
    
这个属性经常会在脚本中切换状态时用到。如下例所示：


    
    


     
     


      
      

       
       [javascript] 

       
       view plain
       
       copy
       
       print
       
       ?
      
      


     
     


     
     
  1. function toggle() {  
  2.      if (button.state == 'On')  
  3.          button.state = 'Off';  
  4.      else  
  5.          button.state = 'On';  
  6.  }  


    
    


    
    
function toggle() {
     if (button.state == 'On')
         button.state = 'Off';
     else
         button.state = 'On';
 }




    
    




If the item is in its base state (i.e. no explicit state has been set), state will be a blank string. Likewise, you can return an item to its base state by setting its
 current state to ''.


    
    
如果一个item处于它的基状态，即没有显示地给它赋予某个状态时，这个状态是一个空字符，你可以将state赋值为空字符，这样它便会回到基状态。




    
    
See also States.


   
   


  
  




  
  


   
   


    
    
 
read-onlystates : list<State>
 


   
   


   
   


    
    
This property holds a list of states defined by the item.


    
    
states属性是该item的所有状态的列表。




    
    


     
     


      
      

       
       [javascript] 

       
       view plain
       
       copy
       
       print
       
       ?
      
      


     
     


     
     
  1. Item {  
  2.   states: [  
  3.     State { ... },  
  4.     State { ... }  
  5.     ...  
  6.   ]  
  7. }  


    
    


    
    
 Item {
   states: [
     State { ... },
     State { ... }
     ...
   ]
 }


    
    


    
    See also 
    
    States
    
    .
   
   


  
  




  
  


   
   


    
    
 
read-onlytransform : list<Transform>
 


   
   


   
   


    
    
This property holds the list of transformations to apply.


    
    
For more information see Transform.


    
    
transform属性持有的是一组变换。详情请参考Transform元素。




   
   


  
  




  
  


   
   


    
    
 
transformOrigin : enumeration
 


   
   


   
   


    
    
This property holds the origin point around which scale and rotation transform.


    
    
transformOrigin属性持有的是缩放和旋转的最起始点。


    
    
Nine transform origins are available, as shown in the image below.


    
    
共有9个变化起始点。如下图所示：




    
    


    
    
This example rotates an image around its bottom-right corner.


    
    
 Image {
     source: "myimage.png"
     transformOrigin: Item.BottomRight
     rotation: 45
 }


    
    
The default transform origin is Item.Center.


    
    
默认的transformOrigin是Item.Center.




    
    
To set an arbitrary transform origin point use the Scale or Rotation transform
 elements.


    
    
设定一个任意变换原点使用Scale或Rotation变换的元素。


   
   


  
  




  
  


   
   


    
    
 
read-onlytransitions : list<Transition>
 


   
   


   
   


    
    
This property holds a list of transitions defined by the item.


    
    
transitions属性持有了一组transition变换。详情请参考Transitions元素。






    
    


     
     


      
      

       
       [javascript] 

       
       view plain
       
       copy
       
       print
       
       ?
      
      


     
     


     
     
  1. Item {  
  2.   transitions: [  
  3.     Transition { ... },  
  4.     Transition { ... }  
  5.     ...  
  6.   ]  
  7. }  


    
    


    
    
 Item {
   transitions: [
     Transition { ... },
     Transition { ... }
     ...
   ]
 }



    
    


See also QML Transitions.


   
   


  
  




  
  


   
   


    
    
 
visible : bool
 


   
   


   
   


    
    
Whether the item is visible. By default this is true.


    
    
表示是否可见。默认可见。




    
    
Note: visible is not linked to actual visibility; if an item moves off screen, or the opacity changes to 0, this will not affect the visible property.


   
   


  
  




  
  


   
   


    
    
 
x : real
 
 
y : real
 
 
width : real
 
 
height : real
 


   
   


   
   


    
    
Defines the item's position and size relative to its parent.


    
    
这组属性定义了该item的位置，其中x，y是相对于其父item的坐标。






    
    
 Item { x: 100; y: 100; width: 100; height: 100 }

   
   


  
  




  
  


   
   


    
    
 
z : real
 


   
   


   
   


    
    
Sets the stacking order of sibling items. By default the stacking order is 0.


    
    
z属性可以认为是该item的z轴坐标。默认值为0。




    
    
Items with a higher stacking value are drawn on top of siblings with a lower stacking order. Items with the same stacking value are drawn bottom up in the order they appear. Items with a negative stacking value are drawn under
 their parent's content.


    
    
z越大越画在前面，如果为负值则画在父Item的后面。相同z值的item按照定义的次序来画。


    
    
The following example shows the various effects of stacking order.


    
    
 
 		 Same z - later children above earlier children: 
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Item {  
  2.     Rectangle {  
  3.         color: "red"  
  4.         width: 100; height: 100  
  5.     }  
  6.     Rectangle {  
  7.         color: "blue"  
  8.         x: 50; y: 50; width: 100; height: 100  
  9.     }  
  10. }  

         
         
 Item {
     Rectangle {
         color: "red"
         width: 100; height: 100
     }
     Rectangle {
         color: "blue"
         x: 50; y: 50; width: 100; height: 100
     }
 }






 
 		 Higher z on top: 
 
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Item {  
  2.      Rectangle {  
  3.          z: 1  
  4.          color: "red"  
  5.          width: 100; height: 100  
  6.      }  
  7.      Rectangle {  
  8.          color: "blue"  
  9.          x: 50; y: 50; width: 100; height: 100  
  10.      }  
  11.  }  

         
         
Item {
     Rectangle {
         z: 1
         color: "red"
         width: 100; height: 100
     }
     Rectangle {
         color: "blue"
         x: 50; y: 50; width: 100; height: 100
     }
 }





 
 		 Same z - children above parents: 
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Item {  
  2.     Rectangle {  
  3.         color: "red"  
  4.         width: 100; height: 100  
  5.         Rectangle {  
  6.             color: "blue"  
  7.             x: 50; y: 50; width: 100; height: 100  
  8.         }  
  9.     }  
  10. }  

         
         
 Item {
     Rectangle {
         color: "red"
         width: 100; height: 100
         Rectangle {
             color: "blue"
             x: 50; y: 50; width: 100; height: 100
         }
     }
 }






 
 		 Lower z below: 
 
         
         

          
          

           
           

            
            [javascript] 
            
            view plain
            
            copy
            
            print
            
            ?
           
           

          
          

          
          
  1. Item {  
  2.      Rectangle {  
  3.          color: "red"  
  4.          width: 100; height: 100  
  5.          Rectangle {  
  6.              z: -1  
  7.              color: "blue"  
  8.              x: 50; y: 50; width: 100; height: 100  
  9.          }  
  10.      }  
  11.  }  

         
         
Item {
     Rectangle {
         color: "red"
         width: 100; height: 100
         Rectangle {
             z: -1
             color: "blue"
             x: 50; y: 50; width: 100; height: 100
         }
     }
 }







   
   


  
  




Method Documentation


  
  


   
   


    
    
 
Item::childAt ( real x, real y )
 


   
   


   
   


    
    
Returns the visible child item at point (x, y), which is in this item's coordinate system, or null if there is no such item.


    
    
返回在坐标（x,y）的子item，这里的坐标是相对于该item的。如果返回null表明没有这样一个子item。




   
   


  
  




  
  


   
   


    
    
 
Item::forceActiveFocus ()
 


   
   


   
   


    
    
Force active focus on the item. This method sets focus on the item and makes sure that all the focus scopes higher in the object hierarchy are also given focus.


    
    
强制为该item设置焦点，此方法会导致该item所处的所有FocusScope获得焦点。




   
   


  
  




  
  


   
   


    
    
 
object Item::mapFromItem ( Item item, real x, real y )
 


   
   


   
   


    
    
Maps the point (x, y), which is in item's coordinate system, to this item's coordinate system, and returns an object with x and y properties
 matching the mapped cooordinate.


    
    
将item的(x,y)映射到该Item中返回与(x,y)对应的对象。



If item is a null value, this maps the point from the coordinate system of the root QML view.


    
    
如果item为空，则（x,y）是相对于最顶层QML视图的坐标系统。




   
   


  
  




  
  


   
   


    
    
 
object Item::mapToItem ( Item item, real x, real y )
 


   
   


   
   


    
    
Maps the point (x, y), which is in this item's coordinate system, to item's coordinate system, and returns an object with x and y properties
 matching the mapped cooordinate.


    
    
将该Item的(x,y)映射到item中返回与(x,y)对应的对象。

If item is a null value, this maps x and y to the coordinate system of the root QML view.


    
    
如果item为空，则（x,y）是相对于最顶层QML视图的坐标系统。


   
   


  
  



                

        

        

    




    

      

        

            

              
                
                  sbisyju
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
QML学习 Item元素

				
			

			

				

					qq_43667028的博客
				

				

					02-23
					
					722
					
				

			

		

		

			
				
QML学习 Item元素

			
		

	



                

              
                



	

		

			

				
					
QML之Item组件

				
			

			

				

					Y03977211367Y的博客
				

				

					01-08
					
					2588
					
				

			

		

		

			
				
`Item`是Qt Quick中所有可视组件的基本类型，Qt Quick中的所有可视组件都继承于`Item`。尽管`Item`本身不可见，但它定义了所有可视组件的通用属性，如坐标、宽高、锚定关系、事件处理等等。

			
		

	



                


  
              

                


	

		

			

				
					
qml的focus问题

				
			

			

				

					qq_43517257的博客
				

				

					11-30
					
					5371
					
				

			

		

		

			
				
这是应用中令人头痛的焦点问题。如果没有焦点项，键事件就不能被处理，它就不能在一个屏幕中做任何事情——应用程序会挂起!! 



基本上，qml中的基本元素是“item”。item有两个属性，焦点和活动焦点。activeFocus是只读的，当将焦点设置为一个项目或不设置焦点时，可以使用focus属性。注意，当将当前元素的属性焦点设置为false时，系统不能将焦点设置为其他项(哈哈，现在应用程序有机会挂起了!!)。通常我们只调用element。专注= true。此外，有一个有用的方法可以直接设置...

			
		

	





	

		

			

				
					
QML类型：Item

				
			

			

				

					友善啊，朋友的博客
				

				

					09-27
					
					3652
					
				

			

		

		

			
				
一、描述

Item 类型是 Qt Quick 中所有可视项的基本类型。

Qt Quick 中的所有可视项都继承自 Item。尽管 Item 对象没有视觉外观，但它定义了所有视觉项的通用属性。

Item 类型可做为根元素包含视觉项目。

二、属性成员

1、implicitHeight : real、implicitWidth : real


隐式高度、隐式宽度：如果未指定宽度或高度，则定义项目的自然宽度或高度。

大多数项目的默认隐式大小为 0x0，但是有些项目具有无法覆盖的固有隐式大小，例如，Im

			
		

	



		

			
		



	

		

			

				
					
编写QML模块

				
			

			

				

					aggs1990的专栏
				

				

					05-28
					
					1153
					
				

			

		

		

			
				
Writing QML Modules

编写QML模块

You can declare a QML module using theCMake QML Module APIto:

​您可以使用CMake QML模块API声明QML模块，如下所示：

Generateqmldirand*.qmltypes files.
	​生成qmldir和*.qmltypes文件。
	Register C++ types annotated withQML_ELEMENT.
	​用QML_ELEMENT注...

			
		

	





	

		

			

				
					
QML自学之路(六)-用C++语言编写QML对象类型

				
			

			

				

					qq_30574227的博客
				

				

					02-03
					
					605
					
				

			

		

		

			
				
采用C++语言定义QML对象类型

			
		

	





	

		

			

				
					
从 C++ 定义 QML 类型

				
			

			

				

					友善啊，朋友的博客
				

				

					11-30
					
					2810
					
				

			

		

		

			
				
使用 C++ 代码扩展 QML 时，可以使用 QML 类型系统注册 C++ 类，使 C++类能够用作 QML 代码中的数据类型。虽然任何 QObject 派生类的属性、方法和信号都可以从 QML 访问，但只有注册的的类才能用作 QML 的数据类型。

一、使用 QML 类型系统注册 C++ 类型

QObject 派生类可以在 QML 类型系统中注册。

QML引擎允许注册可实例化类型和不可实例化类型：

注册可实例化类型使 C++ 类可以用作 QML 对象类型的定义，从而允许在 QML 代码的对象声明中使

			
		

	





	

		

			

				
					
Qt Quick qml 插件

				
			

			

				

					04-27
				

			

		

		

			
				
这些类通常继承自 `QQmlType` 或 `QQmlComponent`，并使用 `Q_OBJECT` 和 `QML_ELEMENT` 宏来标记，以便于Qt的元对象系统和QML引擎识别。  2. **注册 QML 类型**：使用 `qmlRegisterType` 函数将你的 C++ 类注册到 ...

			
		

	





	

		

			

				
					
QML实现的天气预报

				
			

			

				

					09-10
				

			

		

		

			
				
同时，`Item`或`Rectangle`组件可以作为图表的背景，而`Image`组件可以加载预设的温度图标来表示每一天的天气状况。  为了适配Android平台，该应用需要获取用户的地理位置信息。这通常通过集成Android系统的定位服务...

			
		

	





	

		

			

				
					
QML例子 QML资料 QML学习

				
			

			

				

					12-04
				

			

		

		

			
				
1. `Item`: 这是最基础的QML类型，所有其他可视元素都是`Item`的子类。你可以把它看作是画布上的一个矩形区域，可以包含子项并设置其位置和大小。  2. `Rectangle`: 顾名思义，`Rectangle`是用于绘制矩形的元素，...

			
		

	





	

		

			

				
					
QML和C++混合编程小例子

				
			

			

				

					09-09
				

			

		

		

			
				
- `Item`是所有QML元素的基类，可以通过它定义自定义的UI组件。 - 数据绑定允许UI元素的属性与后台数据关联，当数据变化时，UI会自动更新。  **C++类的使用**： - 在QML文件中，可以使用`Object`类型来实例化C++类，...

			
		

	





	

		

			

				
					
QML秘籍-初学者必看

				
			

			

				

					11-12
				

			

		

		

			
				
1. 对象定义：在QML中，每个元素都是一个对象，通过对象名称和类型来创建，如`Item { }`。 2. 属性赋值：对象的属性可以通过键值对进行设置，例如`width: 200`。 3. 数据绑定：QML允许数据绑定，使一个属性的值依赖...

			
		

	





	

		

			

				
					
qt Qml qml Item属性了解

				
			

			

				

					weixin_60755571的博客
				

				

					04-03
					
					398
					
				

			

		

		

			
				
​​锚点 一般使用anchors.fill等等 在anchors group里面的都可以用​​填满，一般跟父控件 parent​​左侧锚点的位置，一般跟对应控件比如rec1.right​​​距离左侧锚点的距离，跟数字​​中心居中​​宽居中父控件​​高居中父控件​​旋转角度​​放缩比例‍‍。

			
		

	





	

		

			

				
					
C++与QML交互总结二

				
			

			

				

					hsy12342611的专栏
				

				

					09-26
					
					2399
					
				

			

		

		

			
				
C++与QML交互总结二

			
		

	





	

		

			

				
					
QML 仿ElementUI的基础控件库

				
			

			

				

					Aike_li的博客
				

				

					09-01
					
					3913
					
				

			

		

		

			
				
本篇记录一下自己写的一些QML控件

			
		

	





	

		

			

				
					
qml基本项元素Item

				
			

			

				

					u012093557的博客
				

				

					11-21
					
					188
					
				

			

		

		

			
				
3）object mapToItem(Item item, point p)及其重载函数，将参数中 Item 坐标系中的点 (x, y) 或 rect (x, y, width, height) 映射到当前 Item 的坐标系，并返回与映射坐标匹配的点或矩形。4）object mapFromItem(Item item, point p)将参数中 Item 坐标系中的点 (x, y) 或 rect (x, y, width, height) 映射到当前 Item 的坐标系，并返回与映射坐标匹配的点或矩形。

			
		

	





	

		

			

				
					
QML类型——ListElement

				
			

			

				

					fengyanyu68的博客
				

				

					07-21
					
					2419
					
				

			

		

		

			
				
正文
列表元素，在ListModel中定义一个数据项。
详细说明
列表元素在ListModel内定义，使用ListView或Repeater类型显示列表中的所有元素。

列表元素的定义与其他QML元素一样，只是它们包含角色定义而不是属性的集合。角色的使用和属性定义的语法相同，既定义了如何访问数据又包括了数据本身。

角色名称必须以小写字母开头，并且应为给定模型中的所有元素所共有。值必须是简单常量：字符串、布尔值、数字或枚举值。

从Qt5.11开始，ListElement还允许将函数声明分配给角色。这允许使

			
		

	





	

		

			

				
					
QML的Item介绍

				
			

			

				

					m0_60259116的博客
				

				

					04-20
					
					576
					
				

			

		

		

			
				
QML的Item介绍

			
		

	





	

		

			

				
					
QT中如何设置窗体的背景图片。

					
热门推荐

				
			

			

				

					sbisyju的专栏
				

				

					06-10
					
					7万+
					
				

			

		

		

			
				
QT中如何设置窗体的背景图片。
 
一、设置方法有两种，如下：
1、利用style sheet给窗体设置背景
    使用stylesheet设置背景图片还是有一些要注意的，如果是在mainwindow和dialog中，直接右键change style sheet在add resource中选择background-image或者border-image，选择资源文件中的图片就行了（前者是

			
		

	





	

		

			

				
					
qml_element

					
最新发布

				
			

			

				

					06-13
				

			

		

		

			
				
`qml_element` 可能是指在 QML 中定义的一个特定元素，它可以是一个控件（如 `Rectangle`, `Button`），信号槽（`onMouseClicked`），或者是自定义的 Qt Quick 或 Qt Quick Controls 中的组件。这些元素通常包含属性...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值