API QML do Ubuntu Touch: PageHeadStyle

Question

Estou procurando alguma ajuda para usar os componentes PageHeadStyle que estão disponíveis no Ubuntu SDK. Se alguém tiver exemplo, serei grato.

Obrigado.

    

Answer 1

O Ubuntu SDK oferece componentes de estilo na versão Ubuntu.Components 1.2 para permitir que os desenvolvedores de aplicativos personalizem os componentes ao seu gosto. PageHeadStyle é um desses componentes que pode ser usado para personalizar o cabeçalho da página em todo o aplicativo.

Antes de usar este componente de estilo, é preciso primeiro definir um tema de aplicativo personalizado que inclua esses componentes de estilo personalizados e instrua o aplicativo a usar isso.

A criação de um tema de aplicativo pode ser feita derivando-o de um tema de sistema existente fornecido no Ubuntu Touch, como o Ambiance ou o SuruDark, ou criando um tema a partir do zero. O último é definitivamente a maneira recomendada de criar um novo tema, pois há muitos APIs de estilo que ainda são instáveis e podem mudar no futuro.

Vamos definir nosso aplicativo em uma nova pasta chamada MyTheme . O segundo passo seria criar um arquivo chamado parent_theme onde você coloca o URI do tema do qual o seu tema de aplicativo deriva. Seu parent_theme seria semelhante,

// parent_theme
Ubuntu.Components.Themes.SuruDark

Vamos também definir as cores da paleta do nosso tema, criando um arquivo chamado Palette.qml ,

// Palette.qml

import QtQuick 2.4
import Ubuntu.Components 1.2
import Ubuntu.Components.Themes.SuruDark 1.1 as SuruDark

SuruDark.Palette {
    normal.background: “#A21E1C”
    selected.backgroundText: “yellow”
}

Agora vamos usar o PageHeadStyle para personalizar nosso cabeçalho de página criando um arquivo chamado PageHeadStyle.qml que tem a seguinte estrutura,

import QtQuick 2.4
import Ubuntu.Components 1.2
import Ubuntu.Components.Styles 1.2
import Ubuntu.Components.Themes.Ambiance 1.1 as Ambiance

Ambiance.PageHeadStyle {
   fontSize: "small"
   fontWeight: Font.DemiBold
   textLeftMargin: units.gu(10)
}

Sua estrutura de pastas MyTheme deve ser semelhante,

MyTheme
-- parent_theme
-- PageHeadStyle.qml
-- Palette.qml

E, em seguida, no seu arquivo qml principal, no qual o MainView é definido, você pode carregar o tema do seu aplicativo

// main.qml

import QtQuick 2.4
import Ubuntu.Components 1.2

MainView {
    // Your code comes here

    // Set your theme
    Component.onCompleted: Theme.name = “MyTheme”

}

E, em seguida, seu aplicativo deve ser semelhante,

Voila,aquiestáoseuaplicativotemático!Vocêpodeencontrarmaisdetalhessobreodesenvolvimentodeaplicativosdoubuntutouchemdeveloper.ubuntu.com,ondeosdesenvolvedoresdeSDKescrevemsobreisso.EsteguiadetemasparaaplicativosfoicriadoporZsomborEgri(SDKDev) here .

Você pode encontrar o código de amostra inteiro aqui .