QML Styling/es: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Remove non-functioning "toc" command)
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
'''Spanish''' [[QmlStyling|English]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]]
'''Spanish''' [[QmlStyling|English]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]]


[[Category:Spanish]]<br />[toc align_right=&quot;yes&amp;quot; depth=&quot;3&amp;quot;]
[[Category:Spanish]]


= Aplicando estilos en QML =
= Aplicando estilos en QML =
Line 9: Line 11:
== Enfoque 1: Componente personalizado ==
== Enfoque 1: Componente personalizado ==


QML soporta la definición de nuestros propios &quot;controles personalizados&amp;quot; :http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. A continuación crearemos un componente personalizado '''TitleText''' que podrá ser usado cada vez que un titulo sea requerido por nuestra UI. Si deseamos cambiar la apariencia de todos los títulos en la UI, solo deberemos editar ''TitleText.qml'' y los cambios se aplicaran en donde sea que haya sido utilizado.
QML soporta la definición de nuestros propios "controles personalizados" :http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. A continuación crearemos un componente personalizado '''TitleText''' que podrá ser usado cada vez que un titulo sea requerido por nuestra UI. Si deseamos cambiar la apariencia de todos los títulos en la UI, solo deberemos editar ''TitleText.qml'' y los cambios se aplicaran en donde sea que haya sido utilizado.


<code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: &quot;green&amp;quot;<br />}
<code>// TitleText.qml
Text {
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 50
color: "green"
}


// in use<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}</code>
// in use
TitleText {
text: "Title 1"
}</code>


== Enfoque 2: Objecto Style ==
== Enfoque 2: Objecto Style ==
Line 19: Line 29:
En este enfoque definiremos un objeto '''Style''' que contendrá una colección de propiedades definiendo el estilo. Este objeto es instanciado en el componente raíz, por lo que estará disponible en toda la aplicación.
En este enfoque definiremos un objeto '''Style''' que contendrá una colección de propiedades definiendo el estilo. Este objeto es instanciado en el componente raíz, por lo que estará disponible en toda la aplicación.


<code>// Style.qml<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: &quot;green&amp;quot;<br />}
<code>// Style.qml
QtObject {
property int textSize: 20
property color textColor: "green"
}


// root component<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}
// root component
Rectangle {
…
Style { id: style }
…
}


// in use<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: &quot;Hello World&amp;quot;<br />}</code>
// in use
Text {
font.pixelSize: style.textSize
color: style.textColor
text: "Hello World"
}</code>


== Enfoque 3: Híbrido (Objeto Style + Componente personalizado) ==
== Enfoque 3: Híbrido (Objeto Style + Componente personalizado) ==
Line 29: Line 53:
En este enfoque tenemos un objeto '''Style''' el cual es usado por nuestro componente personalizado.
En este enfoque tenemos un objeto '''Style''' el cual es usado por nuestro componente personalizado.


<code>// Style.qml<br />QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: &quot;green&amp;quot;<br />}
<code>// Style.qml
QtObject {
property int titleAlignment: Text.AlignHCenter
property int titleFontSize: 50
property color titleColor: "green"
}


// root component<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}
// root component
Rectangle {
…
Style { id: style }
…
}


// TitleText.qml<br />Text {<br /> horizontalAlignment: style.titleAlignment<br /> font.pixelSize: style.titleFontSize<br /> color: style.titleColor<br />}
// TitleText.qml
Text {
horizontalAlignment: style.titleAlignment
font.pixelSize: style.titleFontSize
color: style.titleColor
}


// in use<br />TitleText {<br /> text: &quot;Title 1&amp;quot;<br />}</code>
// in use
TitleText {
text: "Title 1"
}</code>

Latest revision as of 12:27, 17 April 2015

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

Spanish English Italian Magyar

Aplicando estilos en QML

QML provee muchos mecanismos para aplicar estilos a elementos de la UI. A continuación se describen tres de los enfoques mas comunes.

Enfoque 1: Componente personalizado

QML soporta la definición de nuestros propios "controles personalizados" :http://doc.qt.nokia.com/4.7/qml-extending-types.html#defining-new-components. A continuación crearemos un componente personalizado TitleText que podrá ser usado cada vez que un titulo sea requerido por nuestra UI. Si deseamos cambiar la apariencia de todos los títulos en la UI, solo deberemos editar TitleText.qml y los cambios se aplicaran en donde sea que haya sido utilizado. 

// TitleText.qml
Text {
 horizontalAlignment: Text.AlignHCenter
 font.pixelSize: 50
 color: "green"
}

// in use
TitleText {
 text: "Title 1"
}

Enfoque 2: Objecto Style

En este enfoque definiremos un objeto Style que contendrá una colección de propiedades definiendo el estilo. Este objeto es instanciado en el componente raíz, por lo que estará disponible en toda la aplicación. 

// Style.qml
QtObject {
 property int textSize: 20
 property color textColor: "green"
}

// root component
Rectangle {
 …
 Style { id: style }
 …
}

// in use
Text {
 font.pixelSize: style.textSize
 color: style.textColor
 text: "Hello World"
}

Enfoque 3: Híbrido (Objeto Style + Componente personalizado)

En este enfoque tenemos un objeto Style el cual es usado por nuestro componente personalizado. 

// Style.qml
QtObject {
 property int titleAlignment: Text.AlignHCenter
 property int titleFontSize: 50
 property color titleColor: "green"
}

// root component
Rectangle {
 …
 Style { id: style }
 …
}

// TitleText.qml
Text {
 horizontalAlignment: style.titleAlignment
 font.pixelSize: style.titleFontSize
 color: style.titleColor
}

// in use
TitleText {
 text: "Title 1"
}
Retrieved from "https://wiki.qt.io/index.php?title=QML_Styling/es&oldid=16009"