উবুন্টু টাচ [কিউএমএল] - [অংশ 1] এর জন্য একটি অ্যাপ তৈরি করা হচ্ছে

ভূমিকা

এখানে পোস্টের একটি সিরিজ আসবে (আমি যা করেছি তার মতো ভালা), তবে এবার আবেদন করার জন্য উবুন্টু টাচ, অ্যাপ্লিকেশনটি শুরুতে যেমন "একই" হয় পোস্ট থেকে ভালা, এটি হ'ল এক ধরণের খেলা যেখানে পরীক্ষার আকারে আমাদের একটি প্রশ্ন এবং 4 টি উত্তর রয়েছে, তারপরে আমাদের কাছে তিনটি বোতাম রয়েছে, একটি সম্ভাব্য উত্তর দুটি (50%) মুছে ফেলার জন্য, অন্যটি সময় হিমায়িত করার এবং শেষ অবধি প্রশ্ন থেকে যান।

কীভাবে একটি প্রকল্প তৈরি করা শুরু করবেন তা দেখতে আপনি এটি দেখতে পারেন পোস্ট (ডকুমেন্টেশন, প্রজেক্ট তৈরি করুন ...), যেহেতু আমরা ইতিমধ্যে তৈরি প্রকল্প দিয়ে শুরু করব।

সাধারণ জ্ঞান

অ্যাপটি তৈরি করতে আমরা এর উপাদানগুলি ব্যবহার করব উবুন্টুযদিও আমরা আমাদের নিজস্ব উপাদান তৈরি করতে পারি, আমরা এই ক্ষেত্রে করব না।

উবুন্টু উপাদানগুলি এমন উপাদান যা আমরা আমাদের অ্যাপের জন্য ব্যবহার করব:

তাদের একই ব্যবহার করতে আমাদের মডিউলটি আমদানি করতে হবে:

উবুন্টু.কম্পন্টগুলি 0.1 আমদানি করুন

আমরা উপাদানগুলির মধ্যে বিভিন্ন উপাদান খুঁজে পেতে পারি, যেমন বোতাম, প্রগতি বার ইত্যাদি আমরা এমন একটি প্রকল্প ডাউনলোড করতে পারি যেখানে তারা আমাদের বেশিরভাগ উপাদান দেখায়:

বিজেআর শাখা lp: উবুন্টু-ইউআই-টুলকিট 

অ্যাপটি ডিজাইন করা হচ্ছে

আমরা যে চিত্রটি দিয়েছিলাম সেখান থেকে শুরু করি দ্বারা GTK, এই ক্ষেত্রে আমরা ব্যবহার করব কিউএমএল, বাস্তবে আমরা পুরো অ্যাপ্লিকেশনটি তৈরি করব কিউইট কুইক (কিউএমএল + জাভাস্ক্রিপ্ট).

চিত্রটির মতো অ্যাপ্লিকেশনটিতে একটি প্রশ্ন, সময়, উত্তর, বিকল্প এবং পয়েন্ট থাকবে। কেবলমাত্র পার্থক্য ("শৈলী" বাদে) এটি হ'ল আমাদের উপরে শীর্ষে ট্যাব থাকবে।

এর জন্য আমরা বোতাম, লেবেল এবং প্রগতিবার উপাদানগুলি ব্যবহার করব। কাঠামোর জন্য আমরা এলিমেন্টটি ব্যবহার করব স্তম্ভ y সারি।

মূল পর্দার বিন্যাস ডিজাইন করা:

আমরা একটি মেইনভিউ দিয়ে শুরু করব, যেখানে বিভিন্ন ট্যাব পাওয়া যাবে, এক্ষেত্রে আমরা আমাদের অ্যাপের প্রাথমিক পর্দার বিন্যাসে কাজ করতে যাচ্ছি।

মেইনভিউ {অবজেক্ট নাম: "মেইনভিউ" // ...

মাত্রা (উবুন্টু টাচের জন্য):

প্রস্থ: ইউনিট.গু (৫০) উচ্চতা: ইউনিট.গ ((৫)

আমরা আমাদের অ্যাপ্লিকেশনটির দৈর্ঘ্য এবং প্রস্থ নির্ধারণ করি, যেখানে প্রস্থ হবে 50 (ইউনিট) এবং দৈর্ঘ্য 75, এখন আমরা এটি রঙ করতে চলেছি:

শিরোনামের রঙ: "# 57365E" ব্যাকগ্রাউন্ড রঙ: "# A55263" পাদচরণ: "# D75669"

আমাদের শিরোনাম, শরীর এবং পাদচরণের রঙ রয়েছে:

আমি আগেই বলেছি, অ্যাপ্লিকেশনটি ট্যাব দ্বারা কাঠামোগত করা হবে:

    ট্যাবস {আইডি: ট্যাবগুলি সেট {অবজেক্টনাম: "জোকট্যাব"} / * অ্যাড {অবজেক্ট নাম: "অ্যাডকুইশনস"} * /}

আমরা দেখতে পাচ্ছি আমাদের দুটি ট্যাব রয়েছে, একটি মন্তব্য করেছে (আমরা এটি এখনও তৈরি করি নি) এবং অন্যটি খেলতে (যা আমরা এখন তৈরি করব)। বলেন ট্যাব তৈরি করতে, আমরা একটি নতুন কিউএমএল ফাইল তৈরি করব (নতুন যুক্ত করুন -> কিউটি -> কিউএমএল ফাইল ->…), উল্লিখিত ফাইলটির নাম হবে গেম.কিউএমএল.

ঠিক আছে, আসুন আমরা গেম.কিউএমএলকে এমনভাবে পরিবর্তন করব যাতে আমরা এটিকে একটি ট্যাবে পরিণত করি, যার ভিতরে একটি পৃষ্ঠা রয়েছে (পৃষ্ঠা):

আমদানি করুন QtQuick 2.0 আমদানি করুন উবুন্টু। উপাদানগুলি 0.1 ট্যাব {শিরোনাম: i18n.tr ("গেম") পৃষ্ঠা {}}

পৃষ্ঠার মধ্যে আমরা নকশায় উল্লিখিত উপাদানগুলির কাঠামো শুরু করব। একটি কলাম যা এর ভিতরে সমস্ত উপাদানকে অন্তর্ভুক্ত করবে (এটি তাদের উল্লম্বভাবে স্থাপন করবে), তারপরে আমরা উপাদানগুলিকে যথাযথভাবে করব: লেবেল, প্রগ্রেসবার, 4 টি বোতাম; এবং বিকল্পগুলি রাখতে, আমরা সারি উপাদানগুলিকে অনুভূমিকভাবে রাখার জন্য ব্যবহার করব।

কলাম {অ্যাঙ্কারস.টপ: গেমপেজ.টপ অ্যাঙ্কারস.টপমার্জিন: 50 স্পেসিং: 15 প্রস্থ: প্যারেন্ট.উইথথ উচ্চতা: প্যারেন্ট.হাইট - 50 লেবেল-আইডি: প্রশ্ন অ্যাঙ্কারস.টপমার্জিন: 500 পাঠ্য: "প্রশ্ন?" অ্যাঙ্কারস.হোরাইজেন্টাল সেন্টার: প্যারেন্ট হোরাইজেন্টাল সেন্টার ফন্টসাইজ: "বৃহত্তর" ফন্ট.বোল্ড: সত্য} প্রগ্রেসবার {আইডি: টাইম অ্যাঙ্কারস হোরাইজেন্টাল সেন্টার: প্যারেন্ট হোরাইজেন্টাল সেন্টার} বাটন {আইডি: রেসপেস টেক্সট: "রেসপন্স 1" অ্যাঙ্কারস হরাইজেন্টাল সেন্টার: প্যারেন্ট হোরাইজেন্টাল সেন্টার} বাটন {আইডি: রেসপেক্স টেক্সট: "রেসপন্স 1" অ্যাঙ্কারস হরাইজেন্টাল সেন্টার: প্যারেন্ট হোরাইজেন্টাল সেন্টার} বাটন {আইডি: রেসপন্স টেক্সট: "রেসপন্স 2" অ্যাঙ্কারস হরাইজেন্টাল সেন্টার: প্যারেন্ট হোরাইজেন্টাল সেন্টার} বাটন {আইডি: রেসপন্স 2 "অ্যাঙ্কারস .horizontalCenter: অভিভাবক horizontalCenter} সারি {ফাঁকা: 3 অ্যাঙ্কারস horizontalCenter: প্যারেন্ট horizontalCenter বাটন iz আইডি: b3 পাঠ্য: "4%"} বোতাম {আইডি: বিঙ্কন পাঠ্য: "হিমায়িত"} বোতাম {আইডি: বি নেক্সট পাঠ্য: " পরবর্তী "} ow সারি {স্পেসিং: 4 অ্যাঙ্কারস হরাইজেন্টাল সেন্টার: প্যারেন্ট হোরাইজেন্টাল সেন্টার লেবেল {আইডি: ব্যর্থতা পাঠ্য:" ব্যর্থতা: 15 "রঙ:" লাল "} লেবেল {আইডি: হিট পাঠ্য:" হিট: 50 "} লেবেল {আইডি : পয়েন্টগুলি পাঠ্য: "পয়েন্টস: 50" ফন্টসাইজ: "মিডিয়াম"}

আসুন দেখুন কীভাবে প্রতিটি এলিমেন্টের মধ্যে তার {del দ্বারা সীমিত করা হয় আমাদের বিভিন্ন বৈশিষ্ট্য রয়েছে, লেবেল এবং বোতামগুলির ক্ষেত্রে আমরা দেখতে পাচ্ছি যে "পাঠ্য" বৈশিষ্ট্যটি এটি প্রদর্শিত পাঠ্য, একটি গুরুত্বপূর্ণ অ-ভিজ্যুয়াল সম্পত্তি হ'ল সনাক্তকারী "আইডি», যা আমরা যখন অ্যাপ্লিকেশন যুক্তি প্রয়োগ করি তখন আমাদের সহায়তা করবে।

শেষে আমরা ফলাফলটি দেখতে পাচ্ছি: