Проблемы с макетами в Blackberry 10 Cascades, qml (C ++ & QT)

У меня проблема с макетами в Blackberry 10 Cascades.

У меня есть файл qml со следующим содержимым внутри:

content: Container {
Container {
id: topBar
objectName: "topBar"layout: DockLayout {}
ImageButton {
id: back
objectName: "back"defaultImageSource: "asset:///images/back.png"onClicked: app.goBack()
minHeight: 100
minWidth: 100
maxHeight: 100
maxWidth: 100
horizontalAlignment: HorizontalAlignment.Left
}
Label {
id: heading
objectName: "heading"textStyle { fontSize: FontSize.Large }
horizontalAlignment: HorizontalAlignment.Center
}
ImageButton {
id: add
objectName: "add"defaultImageSource: "asset:///images/add.png"onClicked: app.add()
minHeight: 100
minWidth: 100
maxHeight: 100
maxWidth: 100
horizontalAlignment: HorizontalAlignment.Right
}
ActivityIndicator {
id: activityIndicator
objectName: "activityIndicator"minHeight: 100
minWidth: 100
maxHeight: 100
maxWidth: 100
horizontalAlignment: HorizontalAlignment.Right
}
}
}

Я пытаюсь, чтобы кнопка «Назад» была слева. Заголовок должен быть в центре, а кнопка добавления и индикатор активности — справа (я хочу, чтобы индикатор активности был справа, но когда он не отображается, я хочу, чтобы кнопка добавления была на очень верно).

Я не могу понять, почему все эти объекты появляются друг над другом (в одном и том же месте).

1

Решение

В доке элементы макета будут перекрывать друг друга. Скорее всего, ваш контейнер topBar занимает только столько места, сколько требуется для размещения самого большого потомка. Попробуйте либо установить HorizontalAlignment.Fill на верхней панели, либо установить minWidth.

Ваша кнопка «Назад» и индикатор активности также будут перекрывать друг друга. Я бы поместил их в горизонтальный макет стека, чтобы индикатор активности всегда был справа.

Ваш окончательный макет может выглядеть так:

Container {
id: toppbar
docklayout
minWidth: 600
ImageButton {
id: back
horizontalAlignment left
}
Label {
id: heading
horizontalAlignment center
}
Container {
horizontalAlignment right
stacklayout leftToRight
addButton
activity indicator
}
}
1

Другие решения

Все хорошо с вашим кодом, просто удалите Контейнер верхнего уровня — он здесь чрезмерный и не имеет никакой разметки. Ваш встроенный файл находится внутри этого настроенного макета по умолчанию в контейнере верхнего уровня, поэтому все эти элементы уложены друг на друга.

Итак, с этой модификацией ваш код будет выглядеть так

content: Container {
id: topBar
objectName: "topBar"layout: DockLayout {
}
ImageButton {
id: back
objectName: "back"defaultImageSource: "asset:///images/back.png"onClicked: app.goBack()
minHeight: 100
minWidth: 100
maxHeight: 100
maxWidth: 100
horizontalAlignment: HorizontalAlignment.Left
}
Label {
id: heading
objectName: "heading"textStyle {
fontSize: FontSize.Large
}
horizontalAlignment: HorizontalAlignment.Center
}
ImageButton {
id: add
objectName: "add"defaultImageSource: "asset:///images/add.png"onClicked: app.add()
minHeight: 100
minWidth: 100
maxHeight: 100
maxWidth: 100
horizontalAlignment: HorizontalAlignment.Right
}
ActivityIndicator {
id: activityIndicator
objectName: "activityIndicator"minHeight: 100
minWidth: 100
maxHeight: 100
maxWidth: 100
horizontalAlignment: HorizontalAlignment.Right
}
}
0

В QML для этой цели используются якоря. Увидеть: http://qt-project.org/doc/qt-4.8/qml-anchor-layout.html

например вашей кнопке нужно что-то вроде:

anchors.left: parent.left
anchors.leftMargin: 10

Вы также можете использовать QML-элемент Column, Row или Grid.
http://jryannel.wordpress.com/2010/02/19/rows-and-columns/
http://harmattan-dev.nokia.com/docs/library/html/qt4/qml-grid.html

-2
По вопросам рекламы ammmcru@yandex.ru
Adblock
detector