Для того что писать интерфейсы в Qt Quick прежде всего надо:
1. Понять логику работы QML
2. Знать основные свойства и объекты.
Логика довольно проста, рассмотрим её на примере того же Hello, World.
Если вы, как С-ник, посмотрите на этот код взглядом пробитого кодера, то увидите, что объекты Text и MouseArea входят в Rectangle. Самый верхний объект (Rectangle) будет представлять в сборке для Desktop основное окно, остальные объекты будет лежать внутри него.
Собственно в этом же примере есть часть основных объектов и их свойства. Некоторые свойства опишу сразу, другие опишу отдельно.
Свойства всех видимых объектов:
height - высота.
width - ширина.
color - цвет.
opacity - видимость. (0 - абсолютно прозрачный объект, 1 - непрозрачный)
enabled - доступность.
Основные свойства объектов:
Rectangle - прямоугольник.
border.color - цвет "обводки".
border.width - ширина "обводки.
radius - радиус "закругления" углов прямоугольника.
Text - текстовое поле.
text - выводимый текст.
font - свойства шрифта (font.pixelSize - высота шрифта в пикселях, font.italic - курсив ли, и т. д.)
verticalAlignment - выравнивание по вертикали, принимает значения: Text.AlignTop, Text.AlignBottom и Text.AlignVCenter
horizontalAlignment - выравнивание по горизонтали, принимает значения: Text.AlignLeft, Text.AlignRight, Text.AlignHCenter, и какое-то Text.AlignJustify (сам ещё не пробовал)ю
MouseArea - поле обработки действий мыши.
Для него вообще в 99% процентов всегда то, что написано в helloWorld ))
Отдельно хочется остановиться на свойстве anchors
Это свойство нам необходимо в первую очередь для создание такого интерфейса, в котором изменение размеров/поворота окна не создаст проблем.
Стили написания "привязок" покажу на примере некоторого кода:
Здесь у нас внутри основного Rectangle с именем mainRec находятся Rectangle с именами rec1 и rec2. Смотрите лишь на anchors.
rec1 привязывает свою левую сторону к родительской левой стороне(anchors.left: parent.left), а свой верх привязывает к верху mainRec (anchors.top: mainRec.top). В данном случае mainRec и parent равносильные значения, т.к. mainRec является родительским для rec1, или по английски, является для него parent.
rec2 привязал свою левою сторону к правой стороне rec1(anchors.left: rec1.right), и сделал отступ для привязки на 5 единиц(anchors.leftMargin: 5).
Особенности:
QML позволяет присваивать не только фиксированные значения, но и мат. операции, например строчку anchors.leftMargin: 5 можно заменить на следующую
Теперь, при изменении высоты главного окна (в ходе выполнения программы) размер отступа будет изменяться. Для наглядности, задайте разные цвета для rec1 и rec2 и посмотрите что будет :)
1. Понять логику работы QML
2. Знать основные свойства и объекты.
Логика довольно проста, рассмотрим её на примере того же Hello, World.
import QtQuick 1.1
Rectangle {
width: 360
height: 360
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
Если вы, как С-ник, посмотрите на этот код взглядом пробитого кодера, то увидите, что объекты Text и MouseArea входят в Rectangle. Самый верхний объект (Rectangle) будет представлять в сборке для Desktop основное окно, остальные объекты будет лежать внутри него.
Собственно в этом же примере есть часть основных объектов и их свойства. Некоторые свойства опишу сразу, другие опишу отдельно.
Свойства всех видимых объектов:
height - высота.
width - ширина.
color - цвет.
opacity - видимость. (0 - абсолютно прозрачный объект, 1 - непрозрачный)
enabled - доступность.
Основные свойства объектов:
Rectangle - прямоугольник.
border.color - цвет "обводки".
border.width - ширина "обводки.
radius - радиус "закругления" углов прямоугольника.
Text - текстовое поле.
text - выводимый текст.
font - свойства шрифта (font.pixelSize - высота шрифта в пикселях, font.italic - курсив ли, и т. д.)
verticalAlignment - выравнивание по вертикали, принимает значения: Text.AlignTop, Text.AlignBottom и Text.AlignVCenter
horizontalAlignment - выравнивание по горизонтали, принимает значения: Text.AlignLeft, Text.AlignRight, Text.AlignHCenter, и какое-то Text.AlignJustify (сам ещё не пробовал)ю
MouseArea - поле обработки действий мыши.
Для него вообще в 99% процентов всегда то, что написано в helloWorld ))
Отдельно хочется остановиться на свойстве anchors
Это свойство нам необходимо в первую очередь для создание такого интерфейса, в котором изменение размеров/поворота окна не создаст проблем.
Стили написания "привязок" покажу на примере некоторого кода:
Rectangle {
id: mainRec
width: 360
height: 360
Rectangle
{
id: rec1
height: 100
width: 100
anchors.left: parent.left
anchors.top: mainRec.top
}
Rectangle
{
id: rec2
height: 100
width: 100
anchors.left: rec1.right
anchors.leftMargin: 5
}
}
Здесь у нас внутри основного Rectangle с именем mainRec находятся Rectangle с именами rec1 и rec2. Смотрите лишь на anchors.
rec1 привязывает свою левую сторону к родительской левой стороне(anchors.left: parent.left), а свой верх привязывает к верху mainRec (anchors.top: mainRec.top). В данном случае mainRec и parent равносильные значения, т.к. mainRec является родительским для rec1, или по английски, является для него parent.
rec2 привязал свою левою сторону к правой стороне rec1(anchors.left: rec1.right), и сделал отступ для привязки на 5 единиц(anchors.leftMargin: 5).
Особенности:
QML позволяет присваивать не только фиксированные значения, но и мат. операции, например строчку anchors.leftMargin: 5 можно заменить на следующую
anchors.leftMargin: mainRec.height / 5
Теперь, при изменении высоты главного окна (в ходе выполнения программы) размер отступа будет изменяться. Для наглядности, задайте разные цвета для rec1 и rec2 и посмотрите что будет :)
Комментариев нет:
Отправить комментарий