QML

Elementos

Lista extensiva de los elementos de QML

import sys
from PyQt4.QtCore import QUrl
from PyQt4.QtGui import QApplication
from PyQt4.QtDeclarative import QDeclarativeView

# Creamos una aplicación Qt y una vista QDeclarative
app = QApplication(sys.argv)
view = QDeclarativeView()
# Create an URL to the QML file
url = QUrl('calculadora.qml')
# Set the QML file and show
view.setSource(url)
view.setResizeMode(QDeclarativeView.SizeRootObjectToView)
view.setGeometry(100, 100, 400, 300)
view.show()
# Enter Qt main loop
sys.exit(app.exec_())

Hola mundo

Vamos a crear el tradicional Hello World!

import QtQuick 1.0

Rectangle {
    id: page
    width: 500; height: 200
    color: "lightgray"

   Text {
       id: helloText
       text: "Hello world!"
       y: 30
       anchors.horizontalCenter: page.horizontalCenter
       font.pointSize: 24; font.bold: true
   }
}

Explicación

Import

Necesitamos importar los tipos que necesitamos para el ejemplo. La mayoría de los archivos QML suelen hacer el import de los tipos que vienen por defecto en Qt(Rectangle, Image, ...) usando:

import QtQuick 1.0

Rectangle

Rectangle {
   id: page
   width: 500; height: 200
   color: "lightgray"

Declaramos el elemento raíz del tipo Rectangle. Es uno de los bloques de construcción válidos que puedes usar para crear aplicaciones en QML. Le damps un id para que podamos refirirnos a él más tarde. En este caso lo nombramos “page”. También le añadimos un ancho, alto y prodiedades de sus colores. El Rectangle contiene muchas más propiedades (como ‘x’ y ‘y’), pero estos se dejan con sus valores por defecto.

Text

Text {
    id: helloText
    text: "Hello world!"
    y: 30
    anchors.horizontalCenter: page.horizontalCenter
    font.pointSize: 24; font.bold: true
}

Añadimos un elemento Text como hijo del elemento raíz Rectangle y despliega el texto ‘Hello world!’.

La propiedad y es usada para posicionar el texto verticalmente a 30 pixeles del tope de su padre.

La propiedad anchors.horizontalCenter se refiere al centro horizontal de un elemento. En este caso especificamos que nuestro elemento de texto debe de estar centrado horizontalmente con respecto al elemento page (Layouts basadas en anclas).

Las propiedades font.pointSize y font.bold están relacionadas con las fuentes y usan la notación de punto.

Eco

import QtQuick 1.0

  Rectangle {
    id: page
    width: 500; height: 200
    color: "lightgray"

    Text {
      id: texto
      text: input.text
      anchors.top: parent.top
      anchors.horizontalCenter: page.horizontalCenter
      font.pointSize: 24; font.bold: true
    }

    Rectangle{
      id: rect_input
      color: "white"
      anchors.top: texto.bottom
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      TextInput{
        anchors.fill: parent
        id: input
        focus: true
      }
    }
  }

Componentes

Vamos a crear un programa para cambiar el color de un texto.

import QtQuick 1.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)
   }
}

Calculadora

import QtQuick 1.0

Item {
   id: boton
   property alias texto: boton_texto.text
   signal clicked(string algo)

   width: 60; height: 60

   Rectangle {
       id: rectangle
       color: "#aaf"
       anchors.fill: parent
       smooth: true
       radius: 30
       Text {
        id: boton_texto
        text : ""
        anchors.centerIn: parent
        font.pixelSize: 40
       }
   }

   MouseArea {
       anchors.fill: parent
       onClicked: boton.clicked(boton.texto)
   }
}
import QtQuick 1.0

Rectangle {
  id: ventana
  signal calcula_resultado(string cadena)
  property string name: pantalla.text
  onNameChanged: console.log("Name has changed to:", name)

  color: "lightgray"
  anchors.fill: parent

  function muestra_resultado(text) {
      pantalla.text = text
  }

  Rectangle{
    id: rect_input
    height: 40
    color: "black"
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    Text{
      id: pantalla
      anchors.centerIn: parent
      focus: true
      color: "#ccc"
      font.pixelSize : 40
    }
  }

  Grid {
       id: botones
       anchors.top: rect_input.bottom
       anchors.bottom: parent.bottom
       anchors.horizontalCenter: parent.horizontalCenter
       rows: 4; columns: 4; spacing: 3

       Boton { texto: "1"; onClicked: pantalla.text += texto }
       Boton { texto: "2"; onClicked: pantalla.text += texto }
       Boton { texto: "3"; onClicked: pantalla.text += texto }
       Boton { texto: "+"; onClicked: pantalla.text += texto }
       Boton { texto: "4"; onClicked: pantalla.text += texto }
       Boton { texto: "5"; onClicked: pantalla.text += texto }
       Boton { texto: "6"; onClicked: pantalla.text += texto }
       Boton { texto: "-"; onClicked: pantalla.text += texto }
       Boton { texto: "7"; onClicked: pantalla.text += texto }
       Boton { texto: "8"; onClicked: pantalla.text += texto }
       Boton { texto: "9"; onClicked: pantalla.text += texto }
       Boton { texto: "*"; onClicked: pantalla.text += texto }
       Boton { texto: "0"; onClicked: pantalla.text += texto }
       Boton { texto: "clr"; onClicked: pantalla.text = "" }
       Boton { texto: "="; onClicked: ventana.calcula_resultado(pantalla.text) }
       Boton { texto: "/"; onClicked: pantalla.text += texto }
   }

}
import sys
from PyQt4.QtCore import QUrl, QObject, pyqtSignal
from PyQt4.QtGui import QApplication
from PyQt4.QtDeclarative import QDeclarativeView

class Evaluador(QObject):
    evaluado = pyqtSignal(str)
    def evalua(self, expresion):
        resultado = "Error"
        try:
            resultado = str(eval(expresion))
        except Exception:
            print("'" + expresion + "'")
        self.evaluado.emit(resultado)

evaluador = Evaluador()

# Create Qt application and the QDeclarative view
app = QApplication(sys.argv)
view = QDeclarativeView()
# Create an URL to the QML file
url = QUrl('calculadora.qml')
# Set the QML file and show
view.setSource(url)
view.setResizeMode(QDeclarativeView.SizeRootObjectToView)
view.setGeometry(100, 100, 400, 300)

rootObject = view.rootObject()
evaluador.evaluado.connect(rootObject.muestra_resultado)
rootObject.calcula_resultado.connect(evaluador.evalua)

view.show()
# Enter Qt main loop
sys.exit(app.exec_())