Разработка приложений на C++_Практическая работа №12
.pdf
Модуль 3 Тема 3.6
1
Приведите пример кода с созданием масштабируемого интерфейса.
Интерфейс необходимо создавать на основе dip (независимых от
плотности пикселей).
import QtQuick 2.0 import Sailfish.Silica 1.0
Page {
objectName: "mainPage" allowedOrientations: Orientation.All Text {
id: text1
width: Theme.dp(100) height: Theme.dp(100) anchors.centerIn: parent text: "Hello!"
}
Rectangle {
id: rect
color: "lightgreen" anchors.top: text1.bottom
anchors.horizontalCenter: parent.horizontalCenter width: Theme.dp(150)
height: Theme.dp(150)
}
Button {
backgroundColor: "white" anchors.top: rect.bottom
anchors.horizontalCenter: parent.horizontalCenter
2
width: Theme.dp(100)
height: Theme.dp(100)
}
}
2. Динамическое обновление компоновки при смене ориентации
экрана
При повороте устройства и смене ориентации экрана приложения ОС Аврора могут использовать соответствующие свойства для адаптации своего пользовательского интерфейса.
Для динамического обновления компоновки при смене ориентации экрана следует:
Установить свойству allowedOrientations страницы значение для поддержки всех необходимых ориентаций экрана.
С помощью свойств страницы isPortrait, isLandscape или orientation
соответствующим образом обновлять пользовательский интерфейс при смене ориентации экрана.
В качестве примера можно рассмотреть приложение, которое показывает изображение и его основные метаданные (имя файла, ширина и высота). В портретной ориентации экрана изображение Image центрируется по горизонтали в верхней части экрана, а в столбце из объектов типа DetailItem
показываются метаданные изображения:
import QtQuick 2.2 import Sailfish.Silica 1.0
Page {
id: page
allowedOrientations: Orientation.All
3
PageHeader {
id: header
title: "Image details"
}
Image {
id: image
anchors {
top: header.bottom
horizontalCenter: page.isPortrait ? parent.horizontalCenter : undefined
}
sourceSize.width: {
var maxImageWidth = Screen.height/2
var leftMargin = Theme.horizontalPageMargin
var rightMargin = page.isPortrait ? Theme.horizontalPageMargin : 0 return maxImageWidth - leftMargin - rightMargin
}
fillMode: Image.PreserveAspectFit source: "aurora.png"
}
Column {
anchors {
// в альбомной ориентации верх столбца привязывается к нижней границе заголовка (вместо нижней границы изображения)
top: page.isPortrait ? image.bottom : header.bottom topMargin: page.isPortrait ? Theme.paddingLarge : 0
4
//в альбомной ориентации левая граница столбца привязывается к правой границе изображения
//с отступом Theme.paddingLarge между ними
left: page.isPortrait ? parent.left : image.right
leftMargin: page.isPortrait ? Theme.horizontalPageMargin : Theme.paddingLarge
right: parent.right
rightMargin: Theme.horizontalPageMargin
}
DetailItem { label: "Name of file"; value: image.source }
DetailItem { label: "Width"; value: image.width }
DetailItem { label: "Height"; value: image.height }
}
}
И чтобы проверить в горизонтальной ориентации, нужно изменить ориентацию, так как повернуть эмулятор мы не можем.
Page {
id: page
allowedOrientations: Orientation.Landscape
…
}
Объект Page определяет страницу приложения, которая содержит заголовок, изображение и информацию о деталях.
5
PageHeader - это элемент страницы, который находится в верхней части страницы и содержит заголовок "Image details".
Image - это элемент для отображения изображения. sourceSize.width
ограничивает ширину изображения взависимости от размера экрана и отступов.
Также на странице присутствует Column - это элемент для вертикального размещения других элементов.
DetailItem - это пользовательский элемент, который используется для отображения информации об изображении. Лейблы для этого элемента - это категории информации, а значения в этих категориях - это соответствующая информация об изображении.
Вкоде также задается привязка элементов к различным границам страницы, в зависимости от ориентации экрана. Если страница находится в портретной ориентации, то верхний границы элементов столбца привязываются к нижней границе заголовка. Если страница находится в альбомной ориентации, то верхние границы элементов столбца привязываются к нижней границы изображения. Левая граница столбца привязывается к правой границе изображения с отступом. А правая граница столбца привязывается к правой границе страницы с отступом.
Витоге, данный код реализует простую страницу, на которой можно отобразить детали о изображении, привязывая различные элементы к границам страницы в зависимости от ее ориентации.
6
Модуль 3 Тема 3.7
1
Приведите пример кода с использованием типа AddAnimation,
реализующий стандартную анимацию при добавлении элементов в
контейнеры типов SilicaListView и SilicaGridView.
import QtQuick 2.2 import Sailfish.Silica 1.0
Page {
ListView {
id: listView
width: parent.width height: 400
model: ListModel { ListElement { text: "Item 1" } ListElement { text: "Item 2" } ListElement { text: "Item 3" }
}
delegate: Item {
width: listView.width height: 50
Text {
text: model.text anchors.centerIn: parent
}
}
2
AddAnimation { id: animation target: listView
property: "height" from: 0
to: 400 duration: 1000
easing.type: Easing.InOutQuad
}
}
Button {
id: btn
text: "Add Item" anchors {
centerIn: parent
//horizontalCenter: parent.horizontalCenter //top: listView.bottom
topMargin: 30
}
onClicked: {
listView.model.append({ text: "New Item" }) animation.running = true
}
}
}
3
На странице (`Page`) расположен список (`ListView`), который отображает три элемента модели (`ListModel`), каждый из которых содержит текст. Каждый элемент списка представлен делегатом (`delegate: Item`),
который задает внешний вид элемента списка. Делегат содержит `Text`,
который отображает текст элемента модели.
Также на странице есть кнопка (`Button`), при нажатии на которую происходит добавление нового элемента (`listView.model.append({ text: "New Item" })`) в список. При добавлении элемента проигрывается анимация
(`AddAnimation`), которая меняет высоту списка с 0 до 400 пикселей в течение одной секунды (`duration: 1000`), применяя к этому свойству кривую замедления (`easing.type: Easing.InOutQuad`).
Кнопка расположена сверху от списка с отступом по вертикали в 30
пикселей (`topMargin: 30`). Если раскомментировать строки `horizontalCenter: parent.horizontalCenter` и `top: listView.bottom`, то кнопка будет центрироваться по горизонтали относительно родительского элемента и будет отображаться под списком, соответственно.
GridView
import QtQuick 2.2 import Sailfish.Silica 1.0
Page {
GridView {
id: listView
width: parent.width height: 400
cellWidth: 80; cellHeight: 80
4