☰

Ubuntu Touch QML API：PageHeadStyle

tag-icon • tag-icon application-development ubuntu-touch ubuntu-sdk qml
Ubuntu Touch QML API：PageHeadStyle

我正在寻找一些帮助来使用 Ubuntu SDK 中提供的 PageHeadStyle 组件。如果有人有示例，我将不胜感激。

谢谢。

答案1

Ubuntu SDK 在 Ubuntu.Components 1.2 版本中提供了样式组件，允许应用程序开发人员根据自己的喜好自定义组件。PageHeadStyle 就是这样一个组件，可用于自定义整个应用程序的页眉。

在使用此样式组件之前，需要首先定义一个自定义应用程序主题，其中包含这些自定义样式组件并指示应用程序使用它。

创建应用程序主题可以通过从 Ubuntu Touch 中提供的现有系统主题（如 Ambiance 或 SuruDark）派生，或从头开始创建主题来完成。后者绝对是创建新主题的推荐方式，因为许多样式 API 仍然不稳定，将来可能会发生变化。

让我们在一个名为的新文件夹中定义我们的应用程序我的主题。第二步是创建一个名为父主题您将应用程序主题所派生的主题的 URI 放在此处。您的 parent_theme 看起来应该像这样：

// parent_theme
Ubuntu.Components.Themes.SuruDark

我们还可以通过创建一个名为的文件来定义主题的调色板颜色调色板.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”
}

现在让我们使用 PageHeadStyle 来自定义页眉，方法是创建一个名为页面头部样式.qml其结构如下，

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)
}

你的我的主题文件夹结构应如下所示，

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

然后在定义 MainView 的主 qml 文件中，你可以通过以下方式加载应用程序主题，

// main.qml

import QtQuick 2.4
import Ubuntu.Components 1.2

MainView {
    // Your code comes here

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

}

然后你的应用程序应该看起来像，

在此处输入图片描述

瞧，这就是您的主题应用！您可以在 developer.ubuntu.com 上找到有关 ubuntu touch 应用开发的更多详细信息，SDK 开发人员会在此博客上讨论此问题。此应用主题指南由 Zsombor Egri (SDK Dev) 创建这里。

您可以找到完整的示例代码这里。

相关内容