Kurs Qt – #5 – Budowa interfejsów z Qt Quick i QML

[Komentator]

W tej części zajmiemy się omówieniem QML oraz Qt Quick. Poznanie tych nowych mechanizmów ułatwi nam tworzenie estetycznych interfejsów. Zaczniemy od napisania i przetestowania prostej aplikacji. Następnie omówimy na jej przykładzie QML i porównamy takie podejście z Qt Widgets.

UWAGA, to tylko wstęp! Dalsza część artykułu dostępna jest na blogu.

Przeczytaj całość »

Poniżej znajdują się komentarze powiązane z tym wpisem.

[Shog]

Czy przed nauką QML wypadałoby poznać JavaScript/HTML/CSS? (tak jak żeby poznać QT najpierw trzeba znać C++)

[Matthew11]

5 minut temu, Shog napisał:

Czy przed nauką QML wypadałoby poznać JavaScript/HTML/CSS? (tak jak żeby poznać QT najpierw trzeba znać C++)

Podstawy podstaw JS (zmienne, funkcje, operacje na stringach i tablicach, obiekty w JS) na pewno będą przydatne, pozostałe problemy można rozwiązywać w trakcie nauki. Znajomość HTML i CSS nie jest wymagana. Za dokumentacją Qt:

Cytat

JavaScript is used as a scripting language in QML, so you may want to learn a bit more about it (see the Javascript Guide) before diving deeper into QML. It's also helpful to have a basic understanding of other web technologies like HTML and CSS, but it's not required.

Dobre wprowadzenie do QML znajdziemy w dokumentacji. I to powinno w zupełności wystarczyć.

[MC2Systems]

Czy da się z użyciem QT stworzyć takie interfejsy jak np. ten pod linkiem? 
https://pl.pinterest.com/pin/372532200422210254/
Zastanawiam się na ile zaawansowane interfejsy da się wygenerować z wykorzystaniem Rpi z panelem dotykowym 7".

[Matthew11]

1 godzinę temu, MC2Systems napisał:

Czy da się z użyciem QT stworzyć takie interfejsy jak np. ten pod linkiem? 
https://pl.pinterest.com/pin/372532200422210254/

Nigdy takich nie robiłem, ale na tyle na ile znam możliwości Qt to myślę że z pewnością da się takie stworzyć. Natomiast do takich rzeczy potrzebujesz już pomocy dobrego grafika, który stworzy dla Ciebie wszystkie takie ładnie futurystyczne assety. Mając je gotowe to już raczej rzemieślnicza robota.

Biedniejszą wersję takiego interfejsu możesz znaleźć w tym przykładzie: https://doc.qt.io/archives/qt-5.10/qtquickcontrols2-automotive-example.html - jak spojrzysz w pliki projektu to samego kodu interfejsu nie jest jakoś bardzo dużo, natomiast trzon całej aplikacji stanowi masa grafik.

1 godzinę temu, MC2Systems napisał:

Zastanawiam się na ile zaawansowane interfejsy da się wygenerować z wykorzystaniem Rpi z panelem dotykowym 7".

Nie wiem jak w przypadku innych modeli ale np. dla modelu 3B+ (ten testowałem), można zbudować Qt ze źródeł które wykorzysta sprzętowe wsparcie dla OpenGL z EGLFS. Ze sprzętowym wsparciem raczej nie powinno być większych problemów z generowaniem takich interfejsów. 

Budując Qt ze źródeł mamy możliwość wykorzystania najnowszej wersji biblioteki oraz dodatkowo zapewnić sobie np. wspomniane powyżej wsparcie sprzętowe, czego np. może nie mieć wersja dostarczona przez dystrybucję.

Edytowano Kwiecień 21, 2020 przez Matthew11

[Masterofironfist]

Dzien dobry,

Zacząłem sobie przerabiac nie dawno ten kurs qt creatora. I mam problem, w tej czesci nr 5 tego kursu pod koniec autor wybiera typ projektu:

Qt Quick Application - Scroll

ktorego ja nigdzie nie mam do wyboru w qt creator- najnowsza wersja i qt 6.40.

Edytowano Październik 21, 2022 przez Masterofironfist
poprawa błędów pisowni

[Treker (Damian Szymański)]

@Masterofironfist cześć  Niestety nie mam teraz zainstalowanego Qt Creatora. Czy możesz pokazać jakie typy projektu masz do wyboru w tej wersji?

[Matthew11]

@Masterofironfist Od jakiegoś czasu QtCreator posiada tylko 3 szablony aplikacji - konsolowa, Qt Widgets i Qt Quick - ale niestety nie można już wybrać szablonu Scroll i podobnych. Ale wybierając Qt Quick Application nadal możemy skorzystać lub zaimplementować własny scroll za pomocą: ScrollView QML:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ScrollView {
        id: view
        anchors.fill: parent

        ListView {
            model: 20
            delegate: Rectangle {
                required property int index
                width: view.width
                height: 50

                border.color: "black"

                Text {
                    anchors.centerIn: parent
                    text: "Item " + index
                }
            }
        }
    }
}

Edytowano Październik 24, 2022 przez Matthew11

[tomek19991999]

Cześć,
w "Kurs Qt – #5 – Budowa interfejsów z Qt Quick i QML" jest problem ze snippetami kodu oraz filmami - nie działają/nie są widoczne. Pozostałych części nie sprawdzałem

[Matthew11]

@tomek19991999 Tak, wiemy. @Treker bada sprawę. Dzięki za czujność.

Swoją drogą, gdyby ktoś chciał pobrać całe repo z przykładami z kursu to można to zrobić z tego linku: https://github.com/the-risk-taker/qt-forbot-course.

[Treker (Damian Szymański)]

Dziękuję za zgłoszenia  Kody zostały właśnie przywrócone - coś musiało się źle przekonwertować, ale na szczęście był to jedyny taki przypadek na blogu. Gdyby były jeszcze jakieś problemy to przypominam dla formalności, że na końcu artykułu dodane są archiwa z pełnym kodem