qml ट्यूटोरियल
Qml के साथ आरंभ करना
खोज…
टिप्पणियों
क्यूएमएल एक संक्षिप्त रूप है जो क्यू टी एम एटा-ऑब्जेक्ट एल एनगेज के लिए खड़ा है। यह एक घोषित प्रोग्रामिंग भाषा है जो Qt फ्रेमवर्क का हिस्सा है। QML का मुख्य उद्देश्य डेस्कटॉप, मोबाइल और एम्बेडेड सिस्टम के लिए उपयोगकर्ता इंटरफेस का तेज और आसान निर्माण है। QML जावास्क्रिप्ट के सहज एकीकरण की अनुमति देता है, या तो सीधे QML कोड में या जावास्क्रिप्ट फ़ाइलों को शामिल करके।
संस्करण
| Qt संस्करण | QtQuick संस्करण | रिलीज़ की तारीख |
|---|---|---|
| 4.7 | 1.0 | 2010-09-21 |
| 4.8 | 1.1 | 2011-12-15 |
| 5.0 | 2.0 | 2012-12-19 |
| 5.1 | 2.1 | 2013-06-03 |
| 5.2 | 2.2 | 2013-12-12 |
| 5.3 | 2.3 | 2014-05-20 |
| 5.4 | 2.4 | 2014-12-10 |
| 5.5 | 2.5 | 2015/07/01 |
| 5.6 | 2.6 | 2016/03/15 |
| 5.7 | 2.7 | 2016/06/16 |
| 5.8 | 2.7 | 2017/01/23 |
स्थापना
QML क्रॉस-प्लेटफॉर्म एप्लिकेशन फ्रेमवर्क Qt के नए संस्करण के साथ आता है। आप डाउनलोड अनुभाग में क्यूटी के नवीनतम संस्करण को पा सकते हैं।
क्यूटी क्रिएटर आईडीई में एक नया क्यूएमएल प्रोजेक्ट बनाने के लिए, "फ़ाइल -> नया ..." चुनें और "एप्लिकेशन" के तहत "क्यूटी क्विक-एप्लिकेशन" चुनें। "चयन करें" पर क्लिक करने के बाद अब आप इस परियोजना के लिए पथ का नाम और सेट कर सकते हैं। "अगला" मारने के बाद, आप चुन सकते हैं कि आप किन घटकों का उपयोग करना चाहते हैं, यदि अनिश्चित बस डिफ़ॉल्ट को छोड़ दें और "अगला" पर क्लिक करें। यदि आप चाहते हैं, तो दो अगले चरण आपको किट और स्रोत नियंत्रण सेटअप करने की अनुमति देंगे, अन्यथा डिफ़ॉल्ट सेटिंग्स रखें।
अब आपने QML एप्लिकेशन का उपयोग करने के लिए एक सरल और तैयार किया है।
नमस्ते दुनिया
खिड़की के केंद्र में "हैलो वर्ल्ड" पाठ दिखाते हुए एक सरल अनुप्रयोग।
import QtQuick 2.3
import QtQuick.Window 2.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World") //The method qsTr() is used for translations from one language to other.
Text {
text: qsTr("Hello World")
anchors.centerIn: parent
}
}
एक साधारण बटन बनाना
आप माउसएरिया घटक का उपयोग करके आसानी से क्लिक करने योग्य बटन में हर घटक को बदल सकते हैं। नीचे दिए गए कोड में बटन के साथ 360x360 की खिड़की और केंद्र में एक पाठ प्रदर्शित होता है; बटन दबाने से टेक्स्ट बदल जाएगा:
import QtQuick 2.0
Rectangle {
width: 360
height: 360
Rectangle {
id: button
width: 100
height: 30
color: "red"
radius: 5 // Let's round the rectangle's corner a bit, so it resembles more a button
anchors.centerIn: parent
Text {
id: buttonText
text: qsTr("Button")
color: "white"
anchors.centerIn: parent
}
MouseArea {
// We make the MouseArea as big as its parent, i.e. the rectangle. So pressing anywhere on the button will trigger the event
anchors.fill: parent
// Exploit the built-in "clicked" signal of the MouseArea component to do something when the MouseArea is clicked.
// Note that the code associated to the signal is plain JavaScript. We can reference any QML objects by using their IDs
onClicked: {
buttonText.text = qsTr("Clicked");
buttonText.color = "black";
}
}
}
}
एक छवि प्रदर्शित करें
यह उदाहरण छवि प्रदर्शित करने के लिए छवि घटक का सबसे सरल उपयोग दिखाता है।
छवि source संपत्ति एक यूआरएल प्रकार है जो या तो एक पूर्ण या सापेक्ष पथ के साथ एक फ़ाइल हो सकती है, एक इंटरनेट यूआरएल ( http:// ) या एक क्यूटी संसाधन ( qrc:/ )
import QtQuick 2.3
Rectangle {
width: 640
height: 480
Image {
source: "image.png"
}
}
माउस घटना
यह उदाहरण दिखाता है कि QML में माउस इवेंट का उपयोग कैसे किया जाता है।
import QtQuick 2.7
import QtQuick.Window 2.2
Window {
visible: true
Rectangle {
anchors.fill: parent
width: 120; height: 240
color: "#4B7A4A"
MouseArea {
anchors.fill: parent // set mouse area (i.e. covering the entire rectangle.)
acceptedButtons: Qt.AllButtons
onClicked: {
// print to console mouse location
console.log("Mouse Clicked.")
console.log("Mouse Location: <",mouseX,",",mouseY,">")
//change Rectangle color
if ( mouse.button === Qt.RightButton )
parent.color = 'blue'
if ( mouse.button === Qt.LeftButton )
parent.color = 'red'
if ( mouse.button === Qt.MiddleButton )
parent.color = 'yellow'
}
onReleased: {
// print to console
console.log("Mouse Released.")
}
onDoubleClicked: {
// print to console
console.log("Mouse Double Clicked.")
}
}
}
}