QT Development (54) ——— QML components

QT Development (54) ———QML Components

a QML component is a complex, reusable combination of elements composed of basic elements. QML provides a number of ways to create components.

the file-based component will The QML element is placed in a separate file, then a name is given to the file, and the component can be used by name. If you have a file named cell.qml, you can use the Cell {...} in QML. Form. The first letter of the file name of the custom component must be capitalized.

CELL.QML file:

import qtquick 2.0 item{    id:  container    property alias cellcolor: rectangle.color     signal clicked (Color cellcolor)      width: 40; height:  25    Rectangle    {         id: rectangle        border.color:  "White"          anchors.fill: parent    }     Mousearea    {        anchors.fill: parent         onclicked: container.clicked (Container.cellColor)      }} 

Rectangle has a text that is used to display a button, and a mousearea is used to receive mouse events. The user can define the text of the button, which is implemented using the Text property of the set text. To not expose the text element, give text an alias for the Text property. Signal clicked a signal to the cell . Since the clicked signal is non-parametric, it can also be written as signal clicked (), which is equivalent. The clicked signal is emitted in the mousearea clicked Signal, which is called a onclicked signal in the clicked attribute of the Mousearea.

MAIN.QML file:

Import qtquick 2.0 rectangle{    id: page    width : 320; height: 480    color:  "Lightgray"     Text     {        id: helloText         text:  "hello world!"         y: 30         anchors.horizontalcenter: page.horizontalcenter         font.pointsize: 24; font.bold: true    }    grid     {        id: colorPicker         x: 4; anchors.bottom: page.bottom; anchors.bottommargin:  4        rows: 2; columns: 3; spacing: 3        cell { cellcolor:  "Red" ; onclicked: hellotext.color = cellcolor }         Cell { cellColor:  "Green";  onclicked: hellotext.color = cellcolor  }        Cell { cellColor:  "Blue";  onclicked :  hellotext.color = cellcolor }        cell {  cellColor:  "Yellow"; onclicked: hellotext.color = cellcolor }         Cell { cellColor:  "Steelblue"; onclicked:  hellotext.color = cellcolor }        cell {  cellcolor:  "BLACK"; onclicked: hellotext.color = cellcolor }     }}

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/8B/B3/wKiom1hVVQugCS0UAAA4J8mXzYQ429.png "title=" Picture 13.png "alt=" Wkiom1hvvqugcs0uaaa4j8mxzyq429.png "/>

In MAIN.QML, the cell component is used directly . Since Cell.qml is located in the same directory as MAIN.QML, no additional action is required. However, if CELL.QML is placed in a different directory, the import portion of MAIN.QML adds one line of import. /components was able to find the cell component.

It is important to select the root element of a component. a Cell component, for example, uses rectangle as its root element. The rectangle element can set the background color and so on. If you do not allow the user to set the background color, you can choose to use The item element as the root.

This article from "Life is endless, struggle not only" blog, declined reprint!

QT Development (54) ——— QML components