உபுண்டு டச் [QML] க்கான பயன்பாட்டை உருவாக்குகிறது - [பகுதி 1]

அறிமுகம்

இங்கே தொடர் பதிவுகள் வரும் (நான் செய்ததைப் போல Vala), ஆனால் இந்த முறைக்கான விண்ணப்பத்துடன் உபுண்டு டச், பயன்பாடு ஆரம்பத்தில் உள்ளதைப் போலவே "அதே" ஆகும் இடுகைகள் Vala, அதாவது, ஒரு கேள்வி மற்றும் 4 பதில்களை ஒரு சோதனை வடிவத்தில் வைத்திருக்கும் ஒரு வகையான விளையாட்டு, பின்னர் எங்களுக்கு மூன்று பொத்தான்கள் உள்ளன, ஒன்று சாத்தியமான இரண்டு பதில்களை (50%) அகற்ற, ஒன்று நேரத்தை முடக்குவதற்கு மற்றும் கடைசியாக கேள்வியிலிருந்து செல்லுங்கள்.

ஒரு திட்டத்தை உருவாக்குவது எப்படி என்பதைப் பார்க்க, இதைப் பார்வையிடலாம் பதவியை (ஆவணங்கள், திட்டத்தை உருவாக்கு ...), ஏனெனில் நாங்கள் ஏற்கனவே உருவாக்கிய திட்டத்துடன் தொடங்குவோம்.

அடிப்படை அறிவு

பயன்பாட்டை உருவாக்க, அதன் கூறுகளைப் பயன்படுத்துவோம் உபுண்டுநாங்கள் எங்கள் சொந்த கூறுகளை உருவாக்க முடியும் என்றாலும், இந்த விஷயத்தில் நாங்கள் மாட்டோம்.

உபுண்டு கூறுகள் எங்கள் பயன்பாட்டிற்கு நாங்கள் பயன்படுத்தும் கூறுகள்:

அவற்றைப் பயன்படுத்த நாம் தொகுதியை இறக்குமதி செய்ய வேண்டும்:

இறக்குமதி உபுண்டு. கூறுகள் 0.1

பொத்தான்கள், முன்னேற்றப் பட்டிகள் போன்ற கூறுகளுக்குள் வெவ்வேறு கூறுகளைக் காணலாம். இந்த கூறுகளை அவர்கள் காண்பிக்கும் ஒரு திட்டத்தை நாங்கள் பதிவிறக்கம் செய்யலாம்:

bzr கிளை lp: உபுண்டு-யுஐ-டூல்கிட் 

பயன்பாட்டை வடிவமைத்தல்

பயன்பாட்டை நாங்கள் உருவாக்கிய படத்திலிருந்து தொடங்குவோம் ஜிடிகே, இந்த விஷயத்தில் நாங்கள் பயன்படுத்துவோம் கியூஎம்எல், உண்மையில் நாங்கள் முழு பயன்பாட்டையும் உருவாக்குவோம் Qt விரைவு (கியூஎம்எல் + ஜாவா).

பயன்பாடு, படம் போன்றது, ஒரு கேள்வி, நேரம், பதில்கள், விருப்பங்கள் மற்றும் புள்ளிகளைக் கொண்டிருக்கும். ஒரே வித்தியாசம் ("பாணி" தவிர), மேலே நாம் தாவல்கள் வைத்திருப்போம்.

இதற்காக நாம் பொத்தான், லேபிள் மற்றும் முன்னேற்ற பட்டி கூறுகளைப் பயன்படுத்துவோம். கட்டமைப்பிற்கு நாம் அங்கத்தைப் பயன்படுத்துவோம் வரிசை y வரிசை.

பிரதான திரையின் தளவமைப்பை வடிவமைத்தல்:

நாங்கள் ஒரு மெயின் வியூவுடன் தொடங்குவோம், அங்கு வெவ்வேறு தாவல்கள் காணப்படுகின்றன, இந்த விஷயத்தில் எங்கள் பயன்பாட்டின் ஆரம்பத் திரையின் தளவமைப்பில் நாங்கள் வேலை செய்யப் போகிறோம்.

மெயின் வியூ {ஆப்ஜெக்ட் பெயர்: "மெயின் வியூ" // ...}

பரிமாணங்கள் (உபுண்டு டச்):

அகலம்: அலகுகள்.கு (50) உயரம்: அலகுகள்.கு (75)

எங்கள் பயன்பாட்டின் நீளம் மற்றும் அகலத்தை நாங்கள் வரையறுக்கிறோம், அங்கு அகலம் 50 (அலகுகள்) மற்றும் நீளம் 75 ஆக இருக்கும், இப்போது நாம் அதற்கு வண்ணம் கொடுக்கப் போகிறோம்:

headerColor: "# 57365E" backgroundColor: "# A55263" footerColor: "# D75669"

தலைப்பு, உடல் மற்றும் அடிக்குறிப்பின் நிறம் எங்களிடம் உள்ளது:

நான் முன்பு குறிப்பிட்டது போல, பயன்பாடு தாவல்களால் கட்டமைக்கப்படும்:

    தாவல்கள் {ஐடி: தாவல்கள் {objectName: "jocTab"} / * {objectName ஐச் சேர்: "addQuestions"} * /}

எங்களிடம் இரண்டு தாவல்கள் இருப்பதைப் பார்க்கும்போது, ​​ஒருவர் கருத்துத் தெரிவித்தார் (நாங்கள் இதை இன்னும் உருவாக்கவில்லை) மற்றொன்று விளையாட (இது இப்போது உருவாக்குவோம்). சொன்ன தாவலை உருவாக்க, நாங்கள் ஒரு புதிய qml கோப்பை உருவாக்குவோம் (புதியதைச் சேர்க்கவும் -> Qt -> QML கோப்பு ->…), கூறப்பட்ட கோப்பின் பெயர் இருக்கும் Game.qml.

சரி, Game.qml ஐ ஒரு தாவலாக மாற்றும் வகையில் மாற்றுவோம், அதில் ஒரு பக்கம் (பக்கம்) உள்ளது:

QtQuick 2.0 இறக்குமதி உபுண்டு.காம்பொனென்ட்கள் 0.1 தாவல் {தலைப்பு: i18n.tr ("விளையாட்டு") பக்கம் {}}

பக்கத்திற்குள் நாம் வடிவமைப்பில் குறிப்பிடும் கூறுகளை கட்டமைக்கத் தொடங்குவோம். உள்ளே உள்ள அனைத்து உறுப்புகளையும் உள்ளடக்கிய ஒரு நெடுவரிசை (அது செங்குத்தாக வைக்கும்), பின்னர் நாம் உறுப்புகளை வரிசையில் வைப்போம்: லேபிள், ப்ரோக்ரஸ்பார், 4 பொத்தான்கள்; மற்றும் விருப்பங்களை வைக்க, அவற்றை கிடைமட்டமாக வைக்க வரிசை உறுப்பு பயன்படுத்துவோம்.

நெடுவரிசை {anchors.top: Gamepage.top anchors.topMargin: 50 இடைவெளி: 15 அகலம்: parent.width height: parent.height - 50 லேபிள் {id: கேள்வி anchors.topMargin: 500 உரை: "கேள்வி?" anchors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchors.horizontalCenter: parent.horizontalCenter} பொத்தான் {id: resp1 உரை: "மறுமொழி 1" anchors.horizontalCenter: parent.horizontalCenter பொத்தான் {id: resp2 உரை: "பதில் 2" anchors.horizontalCenter: parent.horizontalCenter} பொத்தான் {id: resp3 உரை: "பதில் 3" anchors.horizontalCenter: parent.horizontalCenter} பொத்தான் {id: resp4 உரை: "பதில் 4" நங்கூரங்கள் .horizontalCenter: parent.horizontalCenter} வரிசை {இடைவெளி: 15 anchors.horizontalCenter: parent.horizontalCenter பொத்தான் {id: b50 உரை: "50%"} பொத்தான் {id: bCon உரை: "முடக்கு"} பொத்தான் {ஐடி: அடுத்த உரை: " அடுத்த "}} வரிசை {இடைவெளி: 15 anchors.horizontalCenter: parent.horizontalCenter லேபிள் {id: தோல்விகள் உரை:" தோல்விகள்: 0 "நிறம்:" சிவப்பு "} லேபிள் {ஐடி: உரையைத் தாக்கும்:" வெற்றி: 0 "} லேபிள் {ஐடி : புள்ளிகள் உரை: "புள்ளிகள்: 0" எழுத்துரு அளவு: "நடுத்தர"}}

ஒவ்வொரு உறுப்புக்கும் அதன் வேறுபட்ட பிரிவுகளால் எவ்வாறு வேறுபட்ட பண்புகள் உள்ளன என்பதைப் பார்ப்போம், லேபிள் மற்றும் பொத்தான்கள் விஷயத்தில் "உரை" சொத்து அது காண்பிக்கும் உரை என்பதைக் காணலாம், ஒரு முக்கியமான காட்சி அல்லாத சொத்து அடையாளங்காட்டி "ஐடி», பயன்பாட்டு தர்க்கத்தை நாங்கள் செயல்படுத்தும்போது இது எங்களுக்கு உதவும்.

முடிவில் நாம் முடிவைக் காணலாம்: