QML Styling/es: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
'''Spanish''' [[QmlStyling|English]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]] | '''Spanish''' [[QmlStyling|English]] [[QmlStyling_Italian|Italian]] [[QmlStyling_Hungarian|Magyar]] | ||
[[Category:Spanish]]<br />[toc align_right= | [[Category:Spanish]]<br />[toc align_right="yes" depth="3"] | ||
= Aplicando estilos en QML = | = Aplicando estilos en QML = | ||
| Line 9: | Line 9: | ||
== Enfoque 1: Componente personalizado == | == Enfoque 1: Componente personalizado == | ||
QML soporta la definición de nuestros propios | 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: | <code>// TitleText.qml<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: "green"<br />} | ||
// in use<br />TitleText {<br /> text: | // in use<br />TitleText {<br /> text: "Title 1"<br />}</code> | ||
== Enfoque 2: Objecto Style == | == Enfoque 2: Objecto Style == | ||
| Line 19: | Line 19: | ||
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: | <code>// Style.qml<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: "green"<br />} | ||
// root component<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />} | // root component<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />} | ||
// in use<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: | // in use<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: "Hello World"<br />}</code> | ||
== Enfoque 3: Híbrido (Objeto Style + Componente personalizado) == | == Enfoque 3: Híbrido (Objeto Style + Componente personalizado) == | ||
| Line 29: | Line 29: | ||
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: | <code>// Style.qml<br />QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: "green"<br />} | ||
// root component<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />} | // root component<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />} | ||
| Line 35: | Line 35: | ||
// TitleText.qml<br />Text {<br /> horizontalAlignment: style.titleAlignment<br /> font.pixelSize: style.titleFontSize<br /> color: style.titleColor<br />} | // TitleText.qml<br />Text {<br /> horizontalAlignment: style.titleAlignment<br /> font.pixelSize: style.titleFontSize<br /> color: style.titleColor<br />} | ||
// in use<br />TitleText {<br /> text: | // in use<br />TitleText {<br /> text: "Title 1"<br />}</code> | ||
Revision as of 06:31, 25 February 2015
Spanish English Italian Magyar
[toc align_right="yes" depth="3"]
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<br />Text {<br /> horizontalAlignment: Text.AlignHCenter<br /> font.pixelSize: 50<br /> color: "green"<br />}
// in use<br />TitleText {<br /> text: "Title 1"<br />}
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<br />QtObject {<br /> property int textSize: 20<br /> property color textColor: "green"<br />}
// root component<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}
// in use<br />Text {<br /> font.pixelSize: style.textSize<br /> color: style.textColor<br /> text: "Hello World"<br />}
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<br />QtObject {<br /> property int titleAlignment: Text.AlignHCenter<br /> property int titleFontSize: 50<br /> property color titleColor: "green"<br />}
// root component<br />Rectangle {<br /> …<br /> Style { id: style }<br /> …<br />}
// TitleText.qml<br />Text {<br /> horizontalAlignment: style.titleAlignment<br /> font.pixelSize: style.titleFontSize<br /> color: style.titleColor<br />}
// in use<br />TitleText {<br /> text: "Title 1"<br />}