Добавил:
Только когда поступишь в технический вуз поймешь на сколько ты гуманитарий Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Дополнительные материалы.pdf
Скачиваний:
3
Добавлен:
07.06.2025
Размер:
12.29 Mб
Скачать

РАЗРАБОТКА НА QT ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ

ПРИМЕР FLOW

Flow {

width: 500 spacing: 50

Rectangle { color: "red"

width: 100; height: 300

}

Rectangle { color: "green"

width: 250; height: 400

}

Rectangle { color: "blue"

width: 200; height: 400

}

}

РАЗРАБОТКА НА QT ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ

ПРИМЕР СЕТКИ

Grid {

width: 500 spacing: 50 columns: 2

Rectangle { color: "red"

width: 100; height: 300

}

Rectangle { color: "green"

width: 250; height: 400

}

Rectangle { color: "blue"

width: 200; height: 400

}

}

РАЗРАБОТКА НА QT ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ

КОМПОНОВКИ

import QtQuick.Layouts 1.3

ColumnLayout — вертикальный столбец

RowLayout — горизонтальная строка

GridLayout — таблица

StackLayout — отображение верхнего элемента в стеке

Присоединённые свойства:

»Layout.fillHeight, Layout.fillWidth : bool — растягивать по направлениям

»Layout.margins, Layout.leftMargin, Layout.rightMargin, Layout.topMargin, Layout.bottomMargin : real — отступы

»Layout.rowSpan, Layout.columnSpan : int — объединения ячеек в GridLayout

»Layout.alignment : Qt.Alignment — отступы внутри ячейки

doc.qt.io/qt-5/qtquicklayouts-overview.html doc.qt.io/qt-5/qml-qtquick-layouts-layout.html

РАЗРАБОТКА НА QT ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ

ПРИМЕР КОМПОНОВКИ В СТРОКУ И СТОЛБЕЦ

ColumnLayout { Rectangle {

color: "red" Layout.fillWidth: true

Layout.minimumHeight: parent.height / 3

}

RowLayout { Rectangle {

color: "green" Layout.fillWidth: true Layout.fillHeight: true

}

Rectangle { color: "blue"

Layout.preferredWidth: parent.width / 3 Layout.fillHeight: true

}

}

}

doc.qt.io/qt-5/qml-qtquick-layouts-columnlayout.html doc.qt.io/qt-5/qml-qtquick-layouts-rowlayout.html