سلام
خیلی وقته به فکر این بودم یک سری موارد رو برای QML معرفی کنم یا یجورایی ملت رو با توانایی ها و کیفیت QML آشنا کنم چون راستشو بخوایید تا به طرفش نریم و باهاش کار نکنیم اصلا نمیفهمیم تا چه حدی ظاهر برنامه ها رو با QML میشه توسعه داد.
شاید یکی از دلایلی که باعث میشه خیلی ها سراغ C++ نروند سخت بودن پیاده سازی رابط های گرافیکی هستش که بر اساس تجربه شخصی میتونم بگم این به سختی زبان بر نمیگرده به تنبلی و عدم شناخت کافیه برنامه نویس بر میگرده چرا که یا کمی پشت کار کتابخانه ای مثل Qt رو پیدا میکنه حال توسط معرفیه یکی از نمونه های QML نشون میدم که چطور سختی C++ براتون جذابیت پیدا خواهد کرد ! در نتیجه هر چیز سختی نتیجه خارق العاده ای رو خواهد داشت.
برای اینکه روشن بشید و قبول کنید که طراحی رابط کاربری با QML خیلی فراتر از HTML5 و CSS3 هستش هرچند اینهارم پشتیبانی میکنه در خودش ولی در کل استایل نویسی توسط QML خیلی جذابیت و قدرت خاص خودش رو داره که عمرا تو WPF یا فناوری های دات نتی بشه همچین چیزی رو به سادگی خلق کرد.
خیلی ساده در یک جمله معرفیش میکنم QML یک زبان برنامه نویسی برای طراحی رابط گرافیکی هستش که بر پایه JavaScript ارائه شده و برای طراحی رابط کاربری توسط C++ پشتیبانی میشه در کل هدفش اینه که سرعت بده به طراحی و حل کنه مشکلات برنامه نویس بدبخت رو در لایه UI :افسرده: برای مثال توسط QML ظاهر برنامه رو طراحی کرده و سپس توسط C++ کلاس ها و توابعتون رو پیاده سازی کنید کلی وقت آزاد میشه و کاملا معماری چند لایه رعایت خواهد شد.
کیفیت و سرعت QML خیلی بهتر از Widget هستش یکم اولش سخته ولی اگه میخواهید برنامه های زیبا و جذابی رو طراحی کنید که هیچ چیزی به گرد پاشم نرسه از همین QML استفاده کنید که خارق العادست.
نکته : اگر تجربه کار با JavaScrip و HTML , CSS رو داشته باشید QML رو بهتر درک خواهید کرد که چطور به کمک C++ میاد دقیقا مثل JavaScript و HTML که به کمک PHP میروند.
بنابراین میرم برای معرفی اولین استایل که بعد ها موارد بهتر و بیشتری رو هم معرفی خواهیم کرد و امیدوارم مدیران عزیز هم از معرفی طرح های جذاب در این زمینه دریغ نکنند که بزرگترین سوال برای مبتدیان نحوه طراحی ظاهر در C++ هستش.
احتمالا میدونید که ظاهر کاربری Android 5.X بسیار بهتر از قبل و دلنشینتر شده و این طوریه که گوگل اومده یک سری متد و طرح های جالبی رو عرضه کرده با عنوان
Material design که ما این طراحی و سبک کاملا دلنشین و آرام بخش هستش حداقل که برای شخصه من اینطور بوده :لبخندساده: لینک در رابطه با Material design :
https://www.google.com/design/spec/m...roduction.html
برای استفاده از این Material لینک GitHub رو بررسی کنید :
https://github.com/papyros/qml-material
همه چیز خیلی ساده هستش کافیه طبق آموزش ابتدا
qml-material.pro رو کامپایل کنید و برای اینکه بتونید از این Material ها در طراحی های خودتون استفاده کنید توضیحاتی داده ولی شاید گنگ باشه برای همین به صورت زیر یه توضیحی میدم تا انشالله به نتیجه برسید.
- وارد پوشه Module در پروژه ای بشید که از GitHub دانلود میکنید که داخلش دو تا پوشه Material و QtQuick وجود داره اینارو باید کپی کنید در آدرس های فوق بر اساس نوع کامپایلرتون :
- C:\Qt\Qt5.5.0-MSVC-x64\5.5\msvc2013_64\qml
- C:\Qt\Qt5.5.0-Mingw\5.5\mingw492_32\qml
- C:\Qt\Qt5.5.0\5.5\msvc2013\qml
- و برای اندروید : C:\Qt\Qt5.5.0-Android\5.5\android_armv7\qml
خب تقریبا مسیر ها یکی هستن یعنی داخل پوشه qml طبق چیزی که میبینید.
بعدش کافیه یک پروژه ی جدیدی ایجاد کنید از نوع QML Application کدتون معمولا به صورت زیر خواهد بود :
importQtQuick2.4importQtQuick.Window2.2
Window {
visible:true
}
حالا من این میخوام از استایل Button که Material Design هستش استفاده کنم کافیه ماژول Material رو وارد فایل کنم به صورت زیر :
import Material 0.1
و یه کدی که شامل چند نمونه Button هستش به صورت زیر :
import QtQuick 2.4
import QtQuick.Window 2.2
import Material 0.1
Window {
visible: true
Item {
anchors.centerIn: parent
anchors.fill: parent
Column {
anchors.centerIn: parent
spacing: Units.dp(20)
Button {
text: "Simple Button"
anchors.horizontalCenter: parent.horizontalCenter
onClicked: snackbar.open("Simple, isn't it?")
}
Button {
text: "Raised Button"
elevation: 1
anchors.horizontalCenter: parent.horizontalCenter
onClicked: snackbar.open("This is a snackbar")
}
Button {
text: "Disabled Raised Button"
elevation: 1
enabled: false
anchors.horizontalCenter: parent.horizontalCenter
}
Button {
text: "Wide Button"
width: Units.dp(200)
elevation: 1
anchors.horizontalCenter: parent.horizontalCenter
onClicked: snackbar.open("That button is wide, and so is this snackbar!")
}
Button {
id: focusableButton
text: "Focusable with really long text"
elevation: 1
activeFocusOnPress: true
anchors.horizontalCenter: parent.horizontalCenter
onClicked: snackbar.open("The text is really very very very very very long and now it needs to wrap, so this should show as two lines!")
}
Button {
text: "Colored button"
textColor: Theme.accentColor
anchors.horizontalCenter: parent.horizontalCenter
onClicked: snackbar.open("That button is colored!")
}
Button {
text: "Focusable button #2"
elevation: 1
activeFocusOnPress: true
backgroundColor: Theme.primaryColor
anchors.horizontalCenter: parent.horizontalCenter
onClicked: snackbar.open("That button is colored!")
}
}
ActionButton {
anchors {
right: parent.right
bottom: snackbar.top
margins: Units.dp(32)
}
iconName: "content/add"
}
Snackbar {
id: snackbar
}
}
}
خیلی ترو تمیز به همین راحتی...
برای ادامه نمونه استایل هاش نیازی نیست همرو اینجا آموزش بدم چون همشون تو پوشه demo موجود هستش ازشون استفاده کنید و لذتشو ببرید.
ادامه‌ی آموزش‌ها در این بخش
