Verified Commit 5db1168e authored by Artem Sidyakin's avatar Artem Sidyakin
Browse files

Anchoring demo

- new demo: Anchoring
- screenshots for other demos
parent 0f7b408f
......@@ -16,13 +16,17 @@ A set of rather simple projects that demonstrate various Qt features.
QML client applicaiton for https://api.opensource.org/licenses/
<img src="/img/api-opensource-org.png" width="800">
## Commons
A pack of very simply Qt features demonstrations.
## DI
Basic device information grabber.
Basic device information.
<img src="/img/di.png" width="800">
## GUI approaches
......@@ -39,3 +43,11 @@ A bit modified standard WebEngine example.
## C++ library as a backend for QML
How to add an external C++/Qt library into the project and use it as a backend for QML-based frontend.
<img src="/img/cpp-library-as-a-backend-for-qml.png" width="800">
## Anchoring
Anchoring and reparenting demo.
<img src="/img/anchoring.png" width="800">
......@@ -11,7 +11,9 @@ import "." // you have to have that for singleton
ApplicationWindow {
id: root
visible: true
visibility: "FullScreen"
//visibility: "FullScreen"
width: 900
height: 600
Backend { id: backend }
......
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11
Button {
Layout.preferredWidth: controls.width / 4
Layout.preferredHeight: width
font.pixelSize: 16
background: Rectangle {
color: parent.checked ? "#736F6E" : (parent.pressed ? "#848482" : "#B6B6B4")
}
}
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
if (engine.rootObjects().isEmpty()) { return -1; }
return app.exec();
}
import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.11
import QtGraphicalEffects 1.0
Window {
visible: true
width: 900
minimumWidth: 600
height: 600
minimumHeight: 400
title: qsTr("Anchoring example")
RowLayout {
anchors.fill: parent
spacing: 0
Column {
Layout.fillWidth: true
Layout.fillHeight: true
Rectangle {
id: parentOne
width: parent.width
height: parent.height / 2
color: "#98FF98"
Rectangle {
id: dockable
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: parent.width / 3
height: parent.height / 3
color: "#1589FF"
}
}
Rectangle {
id: parentTwo
width: parent.width
height: parent.height / 2
color: "#FF99FF"
}
}
Rectangle {
id: controls
Layout.preferredWidth: parent.width / 3
Layout.fillHeight: true
//Layout.minimumHeight: 80
//Layout.maximumHeight: 120
color: "#E5E4E2"
border.color: "#B6B6B4"
border.width: 5
GridLayout {
anchors.centerIn: parent
anchors.margins: 15
rows: 4
columns: 3
ControlButton {
id: btn_reparent
Layout.row: 0
Layout.columnSpan: 3
Layout.fillWidth: true
Layout.preferredHeight: controls.width / 4
text: "Reparent"
onClicked: {
dockable.parent = dockable.parent == parentOne ? parentTwo : parentOne;
}
}
ControlButton {
id: btn_top
Layout.row: 1
Layout.column: 1
checkable: true
text: "Top"
onClicked: {
if (checked)
{
resetCenterAnchors();
dockable.anchors.bottom = undefined;
dockable.anchors.top = dockable.parent.top;
btn_bottom.checked = false;
}
else
{
dockable.anchors.top = undefined;
dockable.anchors.verticalCenter = dockable.parent.verticalCenter;
}
}
}
ControlButton {
id: btn_left
Layout.row: 2
Layout.column: 0
text: "Left"
checkable: true
onClicked: {
if (checked)
{
resetCenterAnchors();
dockable.anchors.right = undefined;
dockable.anchors.left = dockable.parent.left;
btn_right.checked = false;
}
else
{
dockable.anchors.left = undefined;
dockable.anchors.horizontalCenter = dockable.parent.horizontalCenter;
}
}
}
ControlButton {
id: btn_center
Layout.row: 2
Layout.column: 1
text: "Reset"
onClicked: {
resetButtons();
dockable.anchors.left
= dockable.anchors.top
= dockable.anchors.right
= dockable.anchors.bottom
= undefined;
dockable.anchors.horizontalCenter = dockable.parent.horizontalCenter;
dockable.anchors.verticalCenter = dockable.parent.verticalCenter;
}
}
ControlButton {
id: btn_right
Layout.row: 2
Layout.column: 2
text: "Right"
checkable: true
onClicked: {
if (checked)
{
resetCenterAnchors();
dockable.anchors.left = undefined;
dockable.anchors.right = dockable.parent.right;
btn_left.checked = false;
}
else
{
dockable.anchors.right = undefined;
dockable.anchors.horizontalCenter = dockable.parent.horizontalCenter;
}
}
}
ControlButton {
id: btn_bottom
Layout.row: 3
Layout.column: 1
checkable: true
text: "Bottom"
onClicked: {
if (checked)
{
resetCenterAnchors();
dockable.anchors.top = undefined;
dockable.anchors.bottom = dockable.parent.bottom;
btn_top.checked = false;
}
else
{
dockable.anchors.bottom = undefined;
dockable.anchors.verticalCenter = dockable.parent.verticalCenter;
}
}
}
}
}
}
Component.onCompleted: {
//console.log(parentOne.height);
//console.log(parentTwo.height);
}
function resetCenterAnchors()
{
dockable.anchors.horizontalCenter
= dockable.anchors.verticalCenter
= undefined;
}
function resetButtons()
{
btn_left.checked
= btn_top.checked
= btn_right.checked
= btn_bottom.checked
= false;
btn_left.enabled
= btn_top.enabled
= btn_right.enabled
= btn_bottom.enabled
= true;
}
}
QT += quick
CONFIG += c++11
# The following define makes your compiler emit warnings if you use
# any feature of Qt which as been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
# You can also make your code fail to compile if you use deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES += \
main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>ControlButton.qml</file>
</qresource>
</RCC>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment