Unsolved Advice in creating mobile app
-
Hello all
I need to create mobile app like below. The main idea of the app is take photo of the problem and send it to the database. Depends on the problem you select category(Roads, Polution, Electricity, Gass) ,take photo of the problem,then give comment to this problem and send to the database. The data will be send in JSON format.
My questions is:
1)How to create such design in qml, what tools in qml to use to create such design?
2)What books do you advice to learn qml?
Regards,
Jasur -
Hi,
You can go through the QML Book.
-
Thank you very useful book, but i have one question, how make such positioning for this 4 buttons in qml?
Regards,
Jasur -
@Jasur said in Advice in creating mobile app:
Thank you very useful book, but i have one question, how make such positioning for this 4 buttons in qml?
Try with a
https://doc.qt.io/qt-5/qml-qtquick-layouts-gridlayout.html
That should look like that and keep them like that if window is resized. -
@mrjj My design differs from original, the screenshot was taken from TAB device
1)How to put spacing between toolbar and gridlayout?
2)There is a big gap between the left and right borders of the application to the buttons, how to make autoresize the gridlayout?
And i create separate file ButtonsContainer.qml for Button widget.
below my code for main.qmlimport QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls.Material 2.12 import QtQuick.Controls.Universal 2.12 import QtQuick.Controls 2.12 import QtQuick.Layouts 1.12 import Qt.labs.settings 1.0 import QtQuick.Dialogs 1.2 import QtQuick.Controls.Styles 1.4 ApplicationWindow { id: appWindowId visible: true width: 360 height: 520 title: qsTr("Smart City") color: "beige" Flickable{ width: parent.width height: parent.height contentHeight: gridLayoutID.implicitHeight GridLayout { id: gridLayoutID columns: 2 anchors.centerIn: parent columnSpacing: 25 ButtonsContainer{ id: buttonGass Layout.fillWidth: true Layout.fillHeight: true buttonText: "Gas" } ButtonsContainer{ id: buttonPolution Layout.fillWidth: true Layout.fillHeight: true buttonText: "Road" } ButtonsContainer{ id: buttonElect Layout.fillWidth: true Layout.fillHeight: true buttonText: "Polution" } ButtonsContainer{ id: buttonRoad Layout.fillWidth: true Layout.fillHeight: true buttonText: "Electrycity" } } } header: ToolBar{ Material.foreground: "white" RowLayout { anchors.fill: parent ToolButton { //text: qsTr("‹") icon.source: "icons/icons/gallery/20x20/drawer.png" onClicked: drawerId.open() } Label { id: titleLabel text: "Smart City" font.pixelSize: 20 elide: Label.ElideRight horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter Layout.fillWidth: true } } } Drawer{ id: drawerId width: Math.min(appWindowId.width, appWindowId.height)/3*2 height: parent.height ListView{ id: listViewId focus: true currentIndex: -1 anchors.fill: parent delegate: ItemDelegate { width: parent.width text: model.text highlighted: ListView.isCurrentItem onClicked: { //listViewId.currentIndex =index //drawerId.close() model.triggered() } } model: ListModel { ListElement { text: qsTr("Open...") triggered: function(){ fileOpenDialog.open(); } } ListElement { text: qsTr("About...") triggered: function(){ aboutDialog.open(); } } } } } }
ButtonsContainer.qml
import QtQuick 2.12 import QtQuick.Controls 2.12 import QtQuick.Layouts 1.12 import QtQuick.Controls.Styles 1.4 import QtQuick.Controls.Material 2.12 import Qt.labs.settings 1.0 Button { id: buttonId property alias buttonText: textId.text Text { id: textId text: qsTr("textName") //Material.foreground: "white" color: "white" anchors.centerIn: parent } background: Rectangle { color: "#41cd52" implicitWidth: 150 implicitHeight: 150 border.color: control.down ? "#17a81a" : "#21be2b" border.width: 1 radius: 14 } }
Regards,
Jasur -
You could stick your grid layout to an absolute position (x, y, height), or you just place something on top of it. The gaps are caused by your columnSpacing.
-
@Padlock thank you for advice, i will trry it, and i have one more question. Is it possible to make design in FIGMA than connect with QML?
Regards,
Jasur -
@Jasur said in Advice in creating mobile app:
FIGMA
https://www.youtube.com/watch?v=I3MVJx6cCO0
With regard to the spacing of buttons to header, you could simply add an integer to your Flickable, as follows;
Flickable{ width: parent.width height: parent.height contentHeight: gridLayoutID.implicitHeight + 200
-
@Markkyboy said in Advice in creating mobile app:
to use Qt Design Studio's Bridge i need buy commercial version of it. is there any other option to use this Bridge with FIGMA?
@Markkyboy said in Advice in creating mobile app:
With regard to the spacing of buttons to header, you could simply add an integer to your Flickable, as follows;
Thank for this, it works for me.
Regards,
Jasur