نحوه ایجاد رابط کاربری مدرن توسط QML در C++‎

[کامبیز اسدزاده]

سلام

خیلی وقته به فکر این بودم یک سری موارد رو برای 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/material-design/introduction.html


تصاویری از کنترل های خلاقانه توسط Material Design برای C++‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎� �‎‎ که تقریبا از کنترل های پر کاربرد عکس گرفتم بقیش رو هم در پوشه demo خواهید دید.

134190
134198
134197
134196
134195
134194
134193
134192
134191
134199

برای استفاده از این Material لینک GitHub رو بررسی کنید : https://github.com/papyros/qml-material
همه چیز خیلی ساده هستش کافیه طبق آموزش ابتدا qml-material.pro (https://github.com/papyros/qml-material/blob/develop/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 موجود هستش ازشون استفاده کنید و لذتشو ببرید.
ادامه‌ی آموزش‌ها در این بخش (https://iostream.ir/forums/forum/8-برنامه-نویسی-در-c-و-%E2%80%8Fc/)

[کامبیز اسدزاده]

به صورت عادی ماژول های موجود برای استایل در QML به صورت زیر هستند :


import QtQuick.Controls.Styles 1.2
import QtQuick.Controls.Styles.Flat 1.0


توسط این دو ماژول شما میتونید رابط های خلاقانه رو به صورت پیشفرض طراحی کنید.

من تصاویری از این استال هارو معرفی کردم ولی باور نید اگه وقت داشتم دونه دونه نحوه استفاده از هر کدوم رو و اینکه چه متد هایی دارند رو میگفتم ولی خب خوشبختانه مستندات کامل هستند و تحت لینک های زیر میتونید به نحوه استایل نویسی در C++‎‎‎‎ برسید:

روش پیشفرض وسط ماژول QtQuick.Controls.Styles در دسترس خواهد بود و شامل تعاریف زیر هستند.
معرفی کنترل ها ی استاندارد : QML : http://doc.qt.io/qt-5/qtquickcontrols-index.html
نحوه استایل نویسی در QML برای Basic Style : http://doc.qt.io/qt-5/qtquick-controls-styles-qmlmodule.html




134200

روش مدرن و تخت یا همان Flat
معرفی کنترل های تحت که در صنعت خودرو سازی و مخصوصا iOS و Android استفاده میشه : http://doc.qt.io/QtQuickEnterpriseControls/index.html
نحوه استایل نویسی برای این نسخه از استایل ها : http://doc.qt.io/QtQuickEnterpriseControls/qtquickenterprisecontrolsstyles-index.html

مثل تصاویر زیر :

134201134202134203134204134205134206

[AliRezaBeytari]

سلام آقای کامبیز اسدزاده.
واقعا از اینکه اینگونه تاپیک های خوب و آموزنده رو قرار میدید ، ممنونم.
اما بهتر نبود اول آموزش QML رو قرار بدید ؟؟!! آخه اصلا هیچ آموزش فارسی در این رابطه وجود نداره !!

خیلی ممنون.
موفق باشید.

[کامبیز اسدزاده]

سلام آقای کامبیز اسدزاده.
واقعا از اینکه اینگونه تاپیک های خوب و آموزنده رو قرار میدید ، ممنونم.
اما بهتر نبود اول آموزش QML رو قرار بدید ؟؟!! آخه اصلا هیچ آموزش فارسی در این رابطه وجود نداره !!

خیلی ممنون.
موفق باشید.


قبول دارم اول آموزش خود QML مهمه ولی من واقعا فرصت آموزش ندارم :افسرده: و مهمتر از همه اینکه آموزش های قبلی راجب Widgets رو هم تو سایت های دیگه بدون ذکر نام کپی کردن و کلا اینجور حرکات تو ایران عادی شده و ترجیح میدم از این پس زیاد راجب آموزش وقت نزارم این مواردی رو هم که هر از گاهی ارسال میکنم در کمترین فرصت آزادی که به دستم میاد سریع اقدام میکنم و اگرنا آموزش QML به صورت فارسی از واجبات هستش.

این تاپیک رو هم زدم به حساب اینکه QML رو یاد گرفتن همچین سخت نیست با توجه به دانش JS و ... نوبت میرسه به طراحی استایل که گفتم یک اشاره ای کنم به آشنایی از این قبیل طرح ها که میشه به راحتی ایجادشون کرد.

انشالله فرصتی باشه یک سری موارد هم راجب QML آموزش میدیم ... ببینیم خدا چی میخواد.:لبخندساده:

[کامبیز اسدزاده]

سلام

امروز داشتم رو قسمت ابزار Power پروژه پانامرا کار میکردم گفتم این بخش از طراحی رو بزارم برای اشتراک ، البته اشاره کنم که به صورت Component نیست.
در این قسمت از Rectangle , MouseArea , Image و Text استفاده کردم و همچنین از NumberAnimation در وضعیت انیمیشنش استفاده شده.
چیزه ساده ای هستش ولی برای مبتدی ها بسیاری از موارد رو روشن خواهد کرد.
درضمن خاصیت های onClick برای Mouse Click هم موجود هست که برای هر کدام از دکمه های Sign Out , Restart , Sleep و Shut down میتونید توابع C++‎‎ خودتون رو صدا بزنید.

این تصاویر مربوط هستش به همین ابزار در پروژه خودم که این بخش رو به صورت یک پروژه جدا براتون ضمیمه کردم.

134785134786

سعی میکنم همچین موارد کوچیک رو از این پس به اشتراک بزارم بستگی به حال و حوصله داره :لبخند:

[alireza.alavi2015]

سلام
فایل زیب موقع باز شدن برای من ارور میده
کسی از دوستان هم این مشکل رو داره؟

[alireza.alavi2015]

آقای اسد زاده عزیز
اگه براتون مقدوره یه مثال برای این عکس زیر بزنید. جالب به نظر میاد
134878

[کامبیز اسدزاده]

آقای اسد زاده عزیز
اگه براتون مقدوره یه مثال برای این عکس زیر بزنید. جالب به نظر میاد
134878

این کار سادست شما روی یک فرم از کنترل های معمولی همین Button استفاده خواهید کرد فقط نکته جالبش امکان نمایش منو روی دکمه هستش که این هم خیلی ساده تسط یک کنترل Menu میشه ایجادش کرد روش کار رو به صورت زیر توضیح میدم البته بدون این استایلی که میبینید اگه نیاز بود بگید یک توضیحی هم راجب استایل بندی ها و قوانینش بدم.

به این کد توجه کنید :


Button {
id: button
text: "MyButton"
}


خیلی واضحه که این کد یک دکمه رو ایجاد میکنه ولی برای اینکه به کنترل Button دسترسی داشته باشیم ابتدا باید ماژول مربوط به کنترل رو وارد پروژه کنیم به روش زیر :


import QtQuick.Controls 1.3


یه توضیحی راجب قوانین import شدن هم بدم اینکه برای وارد کردنش از دستور import استفاده میکنیم نام ماژول در مرحله بعد و نسخه اون مشخص میشه که در نسخه های مختلف Qt اینها متفاوت هستش البته از لحاظ نسخه.
با وارد کردن این گزینه دسترسی به کنترل ها آزاد شده و میتونیم از کنترل های مختلفی استفاده کنیم که در Qt 5.x نسخه 1.3 به بعد دارای کنترل های ذکر شده هستش : http://doc.qt.io/qt-5/qtquick-controls-qmlmodule.html

راجب منو که چطور میشه روی دکمه ازش استفاده کرد خیلی راحته کافیه از خاصیت menu استفاده کنیم که در نسخه 1.4 موجود هست.
بنا براین با در نظر داشتن خاصیت menu برای دکمه میریم سراغ این مطلب.
با توجه به این توضیحات : http://doc.qt.io/qt-5/qml-qtquick-controls-button.html#menu-prop
کار این خاصیت امکان ایجاد منوی ویژه به صورت کشویی هستش که نوع بازگشتی اون هم null خواهد بود به صورت زیر :


Button {
text: "MyButton"
menu: Menu {
MenuItem { text: "Normal"; shortcut: "Ctrl+N" }
MenuSeparator { }
MenuItem { text: "Checkable 1"; checkable: true; checked: true }
MenuItem { text: "Checkable 2"; checkable: true; checked: true }
MenuSeparator { }
}
}


خب کد رو تجزیه تحلیل کنیم...
ابتدا Button رو صدا زدیم در داخل بنده که توسط آکولاد مشخص میشه خاصیت ها و گزینه های مورد نیاز رو وارد میکنیم که میتونه شامل گزینه های مختلفی باشه که در این لینک مشخصه : http://doc.qt.io/qt-5/qml-qtquick-controls-button-members.html
ما به همه اینا نیاز نداریم تنها با menu کار خواهیم کرد.

بنابراین خاصیت menu رو وارد میکنیم و باید توجه کنید که با حروف کوچیک تایپ کنید.

خب منو رو ایجاد میکنیم و بعد نیاز داریم به ایتم هایی که باید منوی ما اونهارو داشته باشه با توجه به کنترل منو در این لینک : http://doc.qt.io/qt-5/qml-qtquick-controls-menu.html میریم از خاصیت های اون هم استفاده کنیم که یکیش هست MenuItem و یه گزینه ای هم به نام MenuSeparator داریم که اینارو لازم خواهیم داشت.

MenuItem امکان افزودن آیتم به منو رو میده و گزینه MenuSeparator امکان ایجاد یک جدا کننده که معمولا به صورت یک خط مشخص میشه رو میدهد.

البته به این اشاره کنم خود MenuItem دارای خاصیت مثلا text و shortcut و ... هستش که در کد مشخص کردیم.
یا مثلا خاصیت checked که با نوع بازگشتی boolian قابل مقدار دهی هستش که مشخص کردیم تیک خورده باشه وقتی مقدار true هستش به صورت انتخابی نمایش داده خواهد شد.
و خاصیت checkable هم که نوع boolian هستش مشخص میکنه که کنترل شما قابلیت انتخاب شدن داشته باشه یا خیر اگر true باشه شما اجازه انتخاب خواهید داشت.


نتیجه نهایی میشه تصویری که بهش اشاره کردید.

کد کامل :


import QtQuick 2.4
import QtQuick.Controls 1.3


ApplicationWindow {
title: qsTr("Modern UI")
width: 300
height: 300
visible: true


Button {
x: 78
y: 145
text: "Checkable"
checkable: true
}
Button {
x: 159
y: 145
text: "MyButton"
menu: Menu {
MenuItem { text: "Normal"; shortcut: "Ctrl+N" }
MenuSeparator { }
MenuItem { text: "Checkable 1"; checkable: true; checked: true }
MenuItem { text: "Checkable 2"; checkable: true; checked: true }
}
}




}




فایل کامل پروژه هم ضمیمه گردید.

[alireza.alavi2015]

اگه نیاز بود بگید یک توضیحی هم راجب استایل بندی ها و قوانینش بدم.

اگه زحمت بکشی ممنون میشم
تشکر الیرم

[کامبیز اسدزاده]

بسیار خب

با توجه به مستندات موجود در نسخه جاری : http://doc.qt.io/qt-5/qtquick-controls-styles-qmlmodule.html
قبل از شروع به این اشاره کنم که راجب همه این کنترل ها توضیح نخواهم داد بنا براین تنها در رابطه با یکی از کنترل ها مانند Button توضیحاتی رو میدم که قوانین و شرایط استایل نویسی مشخص بشه و در تمامی کنترل ها نیز همین قوانین حکم خواهند کرد پس با یاد گیری همین Button و مراجعه به مستندات موجود در رابطه با استایل های هر کدام از کنترل ها میتونیم هر طرحی رو پیاده سازی کنیم.

قضیه اینه که با ریاضیات بازی خواهیم کرد خیلی ساده از اعداد ، اشکال هندسی و توابعی که میتوان در آن بکار برد استفاده میشه که نتیجش همون طرحی هستش که بدست میاد.

برای شروع همین استایل پیشفرض رو توضیح میدم و بعد یک نمونه سفارشی تر رو کار میکنیم : http://doc.qt.io/qt-5/qml-qtquick-controls-styles-buttonstyle.html

برای دسترسی به ماژول استایل باید اون رو به صورت زیر صدا بزنیم :


import QtQuick.Controls.Styles 1.3


نسخه 1.4 دارای استایل بندی بیشتری هستش که در کنترل های پیشرفته کاربرد زیادی خواهد داشت.


Button {
text: "A button"
style: ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
gradient: Gradient {
GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
}
}
}
}


این مثالی هست که در مستندات موجوده که از رنگ بندی گرادینت استفاده کرده میشه این رو ساده تر در نظر گرفت به صورت زیر :


Button {
text: "A button"
style: ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
border.width: control.activeFocus ? 2 : 1
border.color: "#888"
radius: 4
color: control.pressed ? "#aaa" : "#ccc"
}
}
}


خب... بریم سر توضیحات ، در کل هر کنترلی خاصیتی داره به نام style که به شما قابلیت سفارشی سازی استایل کنترل رو میده برای مثال در کنترل Button شما میتونید در خود خاصیت style خاصیت هایی رو اعمال و سفارشی سازی کنید که شامل مثلا : background , control , label و ... که در لیست آمده است :http://doc.qt.io/qt-5/qml-qtquick-controls-styles-buttonstyle-members.html (http://doc.qt.io/qt-5/qml-qtquick-controls-styles-buttonstyle-members.html%D8%A7%DB%8C%D9%86%D9%87%D8%A7) اینها برای کنترل Button ثابت میباشند و شاید در کنترل های دیگر خاصیت های اضافی یا کمتری باشه که نسبت به نوع کنترل مشخص خواهد شد.


در حالت عادی کنترل ما به این صورت هستش با کد زیر :

134991


Button { text: "A button" }


در یک مثال من روی خاصیت background برای کنترل کار میکنیم ، پس در این بخش خاصیت و نوعش رو از Rectangle میگیریم :

background: Rectangle {...}


حالا این Rectangle ما میتونه دارای انواعی از خاصیت ها باشه که اینجا لیست کاملش موجوده : http://doc.qt.io/qt-5/qml-qtquick-rectangle-members.html ما قراراه از چندتاشون استفاده کنیم نه بیشتر.
یک Rectangle میسازم به صورت زیر :




Rectangle {
implicitWidth: 100
implicitHeight: 30
border.color: "#888"
radius: 2


}





خاصیت های implicitWidth و implicitHeight هم طول و عرض رو به صورت ضمنی به Rectangle تخصیص میده البته شاید سوال باشه که چرا از تنها width و height استفاده نکردی خب ای گزینه در حالت تنها Rectangle ایرادی نداره ولی ما چون هدف نهاییمون تخصیص دادن این Rectangle به عنوان پیش زمینه دکمه هستش بنابراین برای اعمال طول و عرضش باید از خاصیت طول و عرض ضمنی استفاده کنیم که همان تخصیص مقدار طول و عرض به صورت مجازی هستش.
با توجه به مباحث CSS خب مشخصه border خاصیت زبانه ها رو مشخص میکنه و اینکه رنگش چی باشه از خاصیت border.color استفاده میشه و مقدارش رنگی هستش که تخصیص خواهیم داد در رابطه با ضخامتش هم که اینجا اشاره نمیکنیم همون border.width خواهد بود که مقدار int مشخص میکنه ضخامتش چقدر باشه در صورت عدم استفاده از این خاصیت ضخامت به صورت پیشفرض 1 خواهد بود.
گزینه radius نیز مشخصه منحنی لبه های شیء هستش با مقدار 2 مشخص میکنیم که به چه اندازه ای لبه های شیء حالت خمیدگی پیدا کنه.


نتیجه حاص از این بخش به صورت زیر خواهد بود :

134992

من این بخش رو کامل کردم و میخوام بقیه مراحلش روی کنترل کار کنیم پس از خاصیت background کنترل استفاده میکنم به صورت زیر :


background: Rectangle {
implicitWidth: 100
implicitHeight: 30
border.color: "#888"
radius: 2

}



در بدنه کنترل به صورت زیر درج خواهد شد :


Button {
x: 100
y: 83
text: "A button"
style: ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 30
border.color: "#888"
radius: 2

}
}
}




کاملا مشخصه که در خاصیت style کنترل و زیر خاصیت اون یعنی background از نوع شیء Rectangle استفاده شده است نتیجه به صورت زیر خواهد بود.

134994

اگر روی دکمه کلیک کنیم نه رنگ و نه ابعاد و نه هیچ تغییری اعمال نخواهد شد بنابراین برای اعمال افکت و غیره میری سراغ خاصیت color که در Button از خاصیت control استفاده میکنیم تا بتونیم مشخصه کلیک شدن رو بگیریم که در رابطه با این خاصیت نیز در این بخش توضیح داده شده : http://doc.qt.io/qt-5/qml-qtquick-controls-button.html#pressed-prop

قرار اینه وقتی کنترل فشار داده میشه رنگش تغییر پیدا کنه و در صورت عدم فشار بر روی کنترل رنگش به حالت قبلی یا یک رنگ دیگه غییر پیدا کنه در این صورت باید از خاصیت control.pressed استفاده کنیم که مقدار باز گشتی اون boolian خواهد بود بنا بر این نوع با یک دستور شرطی میتونیم به صورت زیر کد رو بنویسیم :



color: control.pressed ? "#ccc" : "#fff"


به کد توجه کنید ، خیلی راحت با دستور شرطی مشخص میشه که وقتی فشار داده شده باشه رنگش به کد ccc که معادر رنگ خاکستری هست تغییر و در غیر اینصورت به رنگ سفید با کد fff تغییر رنگ بده.

قبل از کلیک شدن :

134994

هنگام کلیک شدن :

134995

شاید لازم باشه وقتی ماوس میره روی کنترل و خاصیت Mouse Hover اجرا میشه در این حالت یک رنگ ملایمی روی کنترل اعمال بشده برای این کار چکار میکنیم ؟ معمولا رو طراحی های تحت وب CSS3 به این موارد توجه خاصی میکنند به صورت زیر از خاصیت Opacity استفاده میکنم :


opacity: control.hovered ? 0.8 : 1.0


در این کد مشخص شده خاصیت opacity کنترل هنگام شناور شدن ماوس روی اون از 1.0 به 0.8 تغییر پیدا کنه این باعث میشه خاصیت تار بودن یا همون کدر بودن کنترل کاهش پیدا کنه و مشخص بشه که کنترل در حالت شناور ماوس بر روی اون قرار گرفته به صورت زیر کد رو تکمیل میکنیم :


Button {
x: 100
y: 83
text: "A button"
style: ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 30
border.color: "#888"
radius: 2
color: control.pressed ? "#ccc" : "#fff"
opacity: control.hovered ? 0.8 : 1.0


}
}
}


فایل کامل ضمیمه شد.

[کامبیز اسدزاده]

سلامی دوباره...
داشتم رو پروژه ای کار میکردم گفتم تصاویری ازش بزارم تا یکی دیگه از طرح های ساخته شده در C++‎‎‎‎‎‎‎‎ با فناوری QML رو ببینید.

فرض کنیم چندین فرم داریم و برای دسترسی سریع به همه فرم ها ترجیح میدیم از Tab ها استفاده کنیم که این موارد هم یک سری مشکلاتی رو دارند مثلا در یک لحظه همه فیلد های موجود در زبانه ها در دسترس قرار گرفته و یکجورایی دلو روده محتوای زبانه ها بیرونه که من به شخصه با این موضوع کنار نیومدم و به ذهنم یک ایده جالبی رسید که قبل اینکه کاربر مستقیما وارد فرم و پر کردن اونها باشه یک لایه محو مانندی رو ایجاد کنیم مانند راهنما های پیش از استفاده در اندروید و دیگر برنامه ها که دیده ایم و در عین حال دسترسی و انتخاب دیگر زبانه ها نیز فعال باشد و تا زمانی که قصد ورود به محتوای هر زبانه رو نداریم اتفاقی رخ ندهد که میتونه در این قسمت یک علامتی ، توضیحی چیزی بده به صورت زیر :

135715

به این تصویر دقت کنید ، البته چون عکس هستش جلوه نمایشیش مشخص نیست ، من اومدم روی فرم یک همچین طرحی رو به صورت Flat و با Opacity 0.8 مقدار دهی کردم و بهش یک حالت انیمیشن هم دادم که به صورت چشمک زن شیء مربوط به تصویر دست در حالت کلیک در اومده در این حالت قبل از پر کردن فرمی که در داخل زبانه ها ایجاد شده راهنمایی مورد نظر داده میشه یعنی در این قسمت کاربر باید فرمی رو پر کنه و چون تعداد زیادی از زبانه استفاده کردیم بهتره تا زمانی که قصد پر کردن فرم رو نداریم همه فیلد ها نمایش پیدا نکنند. و کلی کارای دیگه میشه انجام داد که بیشتر اینها در طراحی تحت وب مشاهده میشه حال ما این رو روی دسکتاپ هم پیاده سازی کردیم که خیلی جذاب هم هستش. به صورت لمس کردن و یا استفاده از کلیک ماوس فرم آزاد میشه و به صورت زیر میتونیم اطلاعات رو وارد کنیم :

135716

حالا یه ایده جالبی بعد از اینکه فرم پر شد و اقدام به ذخیره کردیم با کلیک بر روی دکمه مثلا ذخیره یه لحظه اتفاق جالبی به صورت زیر خواهد افتاد :

135713

همینکه اقدام به ذخیره میکنم سریعا در وسط همون کادر به صورت Fill شده پیغام ذخیره شد داده میشه و بعد دوباره فرم میره به مرحله افزودن جدید. با همچین خلاقیت های نه چندان سخت میشه طرحی رو ارائه کرد که تکراری نیست و این برای مشتری مهمه.

135714

متاسفانه این کامپوننت ها خیلی تکمیل نشده و دارم سعی میکنم سریعتر نسخه ای از این برنامه رو برای مشتری ارائه بدم ، برای همین امکان ارائه سورس کامپوننت ها رو ندارم :ناراحت: ولی سعی میکنم کم کم از درون پروژه مثال هایی رو مثل این براتون آماده کنم.:چشمک:

[کامبیز اسدزاده]

خب... حال احوالات برنامه نویسای عزیز چطوره ؟

135731

نظرتون راجب همچین طرح ها چیه ؟ :متفکر:

این دو گزینه ای که مشخص کردم رو نوشتم و براتون قرار میدم برین کیف کنید :قهقهه:
دقیقا مثل طرح FX هستش ، حالت Hover رو هم داره که روش میری زبانه کنترل رنگش تغییر پیدا میکنه دقیقا کپی فایرفاکس در آوردمش میتونید تغییرش بدین ، هدف اینه که با نحوه کد نویسی QML آشنا بشیم که چطور با ترکیب JS و CSS میشه غوغا کرد.

اولی Radio Button هستش و دومی CheckBox به صورت زیر :

135735

کد های مربوط به طرح Radio Button :


RadioButton {
id: radioButton1
x: 48
y: 39
text: qsTr("Radio Button")


style: RadioButtonStyle
{
label: Text


{
text: control.text
font.pixelSize: 12
anchors.margins: 0
horizontalAlignment: Text.left
}


indicator: Rectangle


{
implicitWidth: 22
implicitHeight: 22
radius: 16
border.color: control.hovered ? "#2292d0" : "#c1c1c1"
border.width: 1


Rectangle


{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
color: "#2292d0"
visible: control.checked
implicitWidth: 12
implicitHeight: 12
radius: 16
}




}


}
}





اینم مال Check Box :




CheckBox {
id: checkBox1
x: 163
y: 39
text: qsTr("Check Box")


style: CheckBoxStyle


{
label: Text


{
text: control.text
font.pixelSize: 12
horizontalAlignment: Text.left


}


indicator: Rectangle


{


implicitWidth: 20
implicitHeight: 20
radius: 1
border.color: control.hovered ? "#2292d0" : "#c1c1c1"
border.width: 1


Image


{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAA f8/9hAAABNklEQVQ4T6WTwVGDUBRF781CNxBTwu9ArEDsIFZgsg0L pQLpwGwgy2AFjhUQKxA7+HaggRkncYbnwAz4SQxDRpbAPTzOfZ/458Vj8yrMHaBIgIGvPSs+CqAWXwrF9yvJUflhIYLeAPUgI5zkC QmnnlqAl/6AKEsJnBvhN2wstxdAReuY4M2vL/mUja20z48KoBaZC5ElZHCtPSs1xaowm5O4bYVl4NbvUYVZQOK+ kiJIsbWuSnIFDvMJKUsTKMIL8yNUUbYicNn8m0isveFUResxwa ed8LSszrzH0i5PMw3wrIEQAQq5q+uqpgN9PbPmu3vTOKAgObRU AnnUs+Hkr+dNC6aL9th41p49PgRv1bjnA6i6rqV2TlBZN32IvM vWdrrCZWZvkcrDQhYrMbruOnC9NrEL8AOVu4ZhvKxLIgAAAABJ RU5ErkJggg=="
visible: control.checked
width: 16
height: 16
sourceSize.height: 16
sourceSize.width: 16


}
}


}


}




درضمن ماژول زیر رو حتما باید وارد کنید :


import QtQuick.Controls.Styles 1.4


و یک توضیح کوچیکی بدم راجب این کد که شاید جای سوال داشته باشه برای کسانی که آشنا نیستند با این نوع کد ها:


source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAA f8/9hAAABNklEQVQ4T6WTwVGDUBRF781CNxBTwu9ArEDsIFZgsg0L pQLpwGwgy2AFjhUQKxA7+HaggRkncYbnwAz4SQxDRpbAPTzOfZ/458Vj8yrMHaBIgIGvPSs+CqAWXwrF9yvJUflhIYLeAPUgI5zkC QmnnlqAl/6AKEsJnBvhN2wstxdAReuY4M2vL/mUja20z48KoBaZC5ElZHCtPSs1xaowm5O4bYVl4NbvUYVZQOK+ kiJIsbWuSnIFDvMJKUsTKMIL8yNUUbYicNn8m0isveFUResxwa ed8LSszrzH0i5PMw3wrIEQAQq5q+uqpgN9PbPmu3vTOKAgObRU AnnUs+Hkr+dNC6aL9th41p49PgRv1bjnA6i6rqV2TlBZN32IvM vWdrrCZWZvkcrDQhYrMbruOnC9NrEL8AOVu4ZhvKxLIgAAAABJ RU5ErkJggg=="


این کد اگه دقت کنید در داخل سورس یک شیء تصویر قرار گرفته و من دقیقا به جای فایل تصویری با فرمت مثلا png و ... کد تصویر Checked رو به صورت Base64 قرار دادم که از سورس و فایل تصویری استفاده نکنم معمولا در چنین جاها بهترین روش هستش که مزیت هایی رو هم داره.

[sg.programmer]

تشکر واقعا جالبه اقای اسد زاده

اگه ممکنه یک آموزش دز موزد کنترل ها قرار بدید تا علاقه ما بیشتر برای کار با ++C بشه.

[کامبیز اسدزاده]

تشکر واقعا جالبه اقای اسد زاده

اگه ممکنه یک آموزش دز موزد کنترل ها قرار بدید تا علاقه ما بیشتر برای کار با ++C بشه.
در رابطه با نحوه استفاده از کنترل ها پست های بالاتر رو بررسی کنید : http://barnamenevis.org/showthread.php?504614-%D9%86%D8%AD%D9%88%D9%87-%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-%D9%85%D8%AF%D8%B1%D9%86-%D8%AA%D9%88%D8%B3%D8%B7-QML-%D8%AF%D8%B1-C&p=2251747&viewfull=1#post2251747
تقریبا یک سری قوانین موجوده که در تمامی کنترل ها یکسان هست.

سعی کنید کنترلی رو درج کرده و طبق روشی که گفتم استایل نویسی رو بررسی کنید ، حتما لینک های رسمی که بهشون اشاره کردم رو ببینید.

این لینک : http://doc.qt.io/qt-5/qtquickcontrols-index.html
و این لینک : http://doc.qt.io/qt-5/qtquickcontrolsstyles-index.html

فعلا این لینک هارو میتونم پیشنهاد کنم تا شاید فرصتی بشه یک سری آموزش هارو قرار بدم.

[کامبیز اسدزاده]

بنا به درخواست دوستان در بخش های دیگه سعی کردم یک فیلم کوتاهی از خروجی یکی از پروژه هام قرار بدم تا ببینیم C++‎‎‎ و QML یعنی چی :چشمک: اصلا یک حسی بسیار خاصی رو به آدم میده وقتی میبینی ظاهر برنامه جذاب و در پس زمینه یک پرفرمنس وحشتناکی داره برنامت رو حمایت میکنه اصلا ذوق میکنی در حد هوا فضا :خجالت::لبخند:

خدمت شما : http://www.aparat.com/v/OX0RW سعی کنید در حالت HD مشاهده کنید.

[کامبیز اسدزاده]

اینم یک طرح جدید و جالب که 45 دقیقه وقتمو گرفت و به زودی تو پروژه هام استفاده میکنم.
میتونید ازش ایده بگیرید.

دو کامپوننت Card Info و Card Button هستش که میشه در بخش های خاصی ازشون استفاده کرد.

قابلیت هایی که این دو کامپوننت دارند :

کامپوننت Card Info :


امکان کلیک شدن
امکان لمسی
امکان تغییر اندازه و رنگ
امکان تغییر متن اصلی
پشتیبانی از حالت های انیمیت
زیبا و جزاب


کامپوننت Card Box:


امکان کلیک شدن
امکان لمسی
امکان تغییر اندازه و رنگ
امکان تغییر متن اصلی
امکان لینک دهی
امکان منو
امکان فعال و غیر فعال شدن همراه با خاصیت های لمسی ، کلیدی و ماوس
سفارشی سازی با دو دکمه بعدی Edit و Remove
پشتیبانی از حالت های انیمیت
زیبا و جزاب


کاربرد این کامپوننت بستگی داره به سلیقه شما ، مثلا میشه در بخشی که قراره دکمه های بزرگ و شیکی قرار بدین از همچین باکسی استفاده کنید که نسبت به Button از ویژگی های بهتری برخوردار هست.


135919

اینهم فایل ویدیوئی که حالت های انیمیت رو میتونید ببینید : http://www.aparat.com/v/XnTsM

(http://www.aparat.com/v/XnTsM)کد مربوط به Card Info رو قرار میدم تا متوجه نحوه Component نویسی بشید.



/*=============================================
Copyright (C) 2015 Nanosoft Corporation
Programmer & Developer : Kambiz Asadzadeh
*==============================================*/

import QtQuick 2.4
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0


Item {

id: card_general

property alias title : title.text //for title
property alias desc : desc.text //for desc

property alias iconLetterText : icon_letter_text.text //for icon_letter text
property alias iconLetterTextColor : icon_letter_text.color //for icon_letter text
property alias iconLetterColor : icon_letter.color //for icon_letter color
property alias mouseArea : card_item_mouseArea //for mouse area

property alias edit_mouseArea : card_menu_edit_mouseArea //for edit mouse area
property alias turnOff_mouseArea : card_menu_turnoff_mouseArea //for turn on/off mouse area
property alias remove_mouseArea : card_menu_remove_mouseArea //for remove mouse area


width: 190
height: 300

property int turn: 0 // turning on/off status 0 is Enable / 1 is Disable

Rectangle {
id: card_body
width: 190
height: 300
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
radius: 2

Behavior on scale { NumberAnimation { duration: 300 } }
Behavior on color {ColorAnimation{}}

layer.enabled: true
layer.effect: DropShadow {
horizontalOffset: 0;
radius: 8
samples: 16
source: card_item
color: "#20000000"
verticalOffset: 0;
transparentBorder: true
spread: 0
}



}

Rectangle {
id: card_item
width: 190
height: 300
anchors.verticalCenter: card_body.verticalCenter
anchors.horizontalCenter: card_body.horizontalCenter
radius: 2

Behavior on scale { NumberAnimation { duration: 300 } }
Behavior on color {ColorAnimation{}}

Rectangle {
id: card_overlay
x: 1
y: 0
width: 190
height: 190
color: "#ffffff"
anchors.horizontalCenter: parent.horizontalCenter
Behavior on scale { NumberAnimation { duration: 300 } }
Behavior on color {ColorAnimation{}}

Rectangle {
id: icon_letter
width: 150
height: 150
color: "#87cefa"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Behavior on scale { NumberAnimation { duration: 300 } }

Text {
id: icon_letter_text
color: "#ffffff"
text: qsTr("K")
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 90
}
}

}

Item {
id: card_info
x: 0
y: 191
width: 190
height: 105

Text {
id: title
x: 15
y: 14
width: 150
height: 21
text: qsTr("Static pages")
anchors.horizontalCenter: parent.horizontalCenter
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
font.pixelSize: 16
}

Label {
id: desc
x: 20
y: 41
width: 150
height: 32
color: "#888888"
text: qsTr("Module for configurating static pages")
wrapMode: Text.WordWrap
verticalAlignment: Text.AlignTop
horizontalAlignment: Text.AlignLeft
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 12

}
}

MouseArea {
id: card_item_mouseArea
anchors.bottomMargin: 36
anchors.fill: parent

hoverEnabled: true
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

onHoveredChanged: {

if(card_item_mouseArea.containsMouse) {
card_overlay.color = "#e6e6e6"
}

else {
card_overlay.color = "#ffffff"

}
}

onPressedChanged: {

icon_letter.scale = 0.8

}

onClicked: {

icon_letter.scale = 1.0

}

}
}


Rectangle {
id: card_menu_in
x: 5
width: 190
height: 305
color: "#ffffff"
opacity: 0
visible: false
y: 5

NumberAnimation on x{
id: anim_open
running: true
from: 50
to: 5
duration: 200

}


Rectangle {
id: card_menu_edit
x: -3
y: 112
width: 190
height: 36
color: "#00000000"
anchors.horizontalCenter: parent.horizontalCenter

Text {
id: card_menu_edit_text
color: "#333333"
text: qsTr("Edit")
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors.fill: parent
font.pixelSize: 14
Behavior on scale { NumberAnimation{}}
Behavior on color {ColorAnimation{}}
}

MouseArea {
id: card_menu_edit_mouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

onHoveredChanged: {

if(card_menu_edit_mouseArea.containsMouse) {
card_menu_edit.color = "#337AB7"
card_menu_edit_text.color = "#ffffff"
}

else {
card_menu_edit.color = "transparent"
card_menu_edit_text.color = "#333333"
}
}
onPressedChanged: {

card_menu_edit_text.scale = 0.8

}

onClicked: {

card_menu_edit_text.scale = 1.0

}
}
}

Rectangle {
id: card_menu_turnoff
x: -2
y: 148
width: 190
height: 36
color: "#00000000"
anchors.horizontalCenterOffset: 0
anchors.horizontalCenter: parent.horizontalCenter

Text {
id: card_menu_turnoff_text
color: "#333333"
text: ("Turn off")
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 14
Behavior on scale { NumberAnimation{}}
Behavior on color {ColorAnimation{}}
}

MouseArea {
id: card_menu_turnoff_mouseArea
x: 1
y: 3
anchors.fill: parent
hoverEnabled: true
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

onHoveredChanged: {

if(card_menu_turnoff_mouseArea.containsMouse) {
card_menu_turnoff.color = "#337AB7"
card_menu_turnoff_text.color = "#ffffff"
}

else {
card_menu_turnoff.color = "transparent"
card_menu_turnoff_text.color = "#333333"
}
}
onPressedChanged: {

card_menu_turnoff_text.scale = 0.8

}
onClicked: {
card_menu_turnoff_text.scale = 1.0
if (turn === 1){
turn = 0
card_foot.color = "#f6f6f6"
services_over_list.text = "Link"
services_over_list.color = "#337AB7"
card_menu_turnoff_text.text = "Turn off"
card_item_mouseArea.enabled = true
card_info.enabled = false
card_overlay.enabled = false
card_info.opacity = 1.0
card_overlay.opacity = 1.0


} else if (turn === 0){
turn = 1
card_foot.color = "#F54C48"
services_over_list.text = "Off"
services_over_list.color = "#ffffff"
card_menu_turnoff_text.text = "Turn on"
card_item_mouseArea.enabled = false
card_info.opacity = 0.5
card_overlay.opacity = 0.5

}


}
}
}

Rectangle {
id: card_menu_remove
x: 5
y: 182
width: 190
height: 36
color: "#00000000"
anchors.horizontalCenterOffset: 0
anchors.horizontalCenter: parent.horizontalCenter

Text {
id: card_menu_remove_text
color: "#333333"
text: qsTr("Remove")
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 14
Behavior on scale { NumberAnimation{}}
Behavior on color {ColorAnimation{}}
}

MouseArea {
id: card_menu_remove_mouseArea
x: 1
y: 3
anchors.fill: parent
hoverEnabled: true
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

onHoveredChanged: {
if(card_menu_remove_mouseArea.containsMouse) {
card_menu_remove.color = "#337AB7"
card_menu_remove_text.color = "#ffffff"
}

else {
card_menu_remove.color = "transparent"
card_menu_remove_text.color = "#333333"
}
}
onPressedChanged: {

card_menu_remove_text.scale = 0.8

}

onClicked: {

card_menu_remove_text.scale = 1.0

}
}
}
}

Rectangle {
id: card_body_border
width: 190
height: 300
color: "#00000000"
border.color: "#cccccc"
radius: 2
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}

}




اینم فایل main و نحوه فراخوانی کامپوننت :



import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.2

Window {
id: window1


visible: true

width: 1000
height: 1000

Item {

width: 1000
height: 1000
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter

CardInfo {
x: 302
y: 226

mouseArea.onClicked: {
text_card_info.text = "Card info Clicked!" ;
text_card_info.color = "green"

// Call C++‎ Function in here to do anything ! :-)
}



}


Text {
id: text1
x: 322
y: 556
text: qsTr("Card info status:")
font.pixelSize: 12
}

Text {
id: text_card_info
x: 416
y: 556
width: 95
height: 14
text: qsTr("None")
font.pixelSize: 12
}

}

}





میتونید در بخش onClicked تابع مورد نظر خودتون رو از C++‎‎‎‎ صدا بزنید.

[کامبیز اسدزاده]

یک ویدیو در رابطه با Google Material که دیدنش خالی از لطف نیست : http://www.aparat.com/v/UVoZg

[ali_72]

سلام

ممنون از استاد اسدزاده

[Sir-Programmer]

روش مدرن و تخت یا همان Flat
معرفی کنترل های تحت که در صنعت خودرو سازی و مخصوصا iOS و Android استفاده میشه : http://doc.qt.io/QtQuickEnterpriseControls/index.html
نحوه استایل نویسی برای این نسخه از استایل ها : http://doc.qt.io/QtQuickEnterpriseControls/qtquickenterprisecontrolsstyles-index.html

مثل تصاویر زیر :

134201134202134203134204134205134206

سلام ، این کنترل هارو از کجا میشه دانلود کرد ؟؟؟

[ali_72]

سلام ، این کنترل هارو از کجا میشه دانلود کرد ؟؟؟


لینک هایی که آقای اسدزاده گذاشتن رو از ابتدا مطالعه کنید و پروژه ای که در ابتدای تاپیک گفتن رو دانلود کنید

[ali_72]

اینم یک طرح جدید و جالب که 45 دقیقه وقتمو گرفت و به زودی تو پروژه هام استفاده میکنم.
میتونید ازش ایده بگیرید.

دو کامپوننت Card Info و Card Button هستش که میشه در بخش های خاصی ازشون استفاده کرد.

قابلیت هایی که این دو کامپوننت دارند :

کامپوننت Card Info :


امکان کلیک شدن
امکان لمسی
امکان تغییر اندازه و رنگ
امکان تغییر متن اصلی
پشتیبانی از حالت های انیمیت
زیبا و جزاب


کامپوننت Card Box:


امکان کلیک شدن
امکان لمسی
امکان تغییر اندازه و رنگ
امکان تغییر متن اصلی
امکان لینک دهی
امکان منو
امکان فعال و غیر فعال شدن همراه با خاصیت های لمسی ، کلیدی و ماوس
سفارشی سازی با دو دکمه بعدی Edit و Remove
پشتیبانی از حالت های انیمیت
زیبا و جزاب


کاربرد این کامپوننت بستگی داره به سلیقه شما ، مثلا میشه در بخشی که قراره دکمه های بزرگ و شیکی قرار بدین از همچین باکسی استفاده کنید که نسبت به Button از ویژگی های بهتری برخوردار هست.


135919

اینهم فایل ویدیوئی که حالت های انیمیت رو میتونید ببینید : http://www.aparat.com/v/XnTsM

(http://www.aparat.com/v/XnTsM)کد مربوط به Card Info رو قرار میدم تا متوجه نحوه Component نویسی بشید.



/*=============================================
Copyright (C) 2015 Nanosoft Corporation
Programmer & Developer : Kambiz Asadzadeh
*==============================================*/

import QtQuick 2.4
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0


Item {

id: card_general

property alias title : title.text //for title
property alias desc : desc.text //for desc

property alias iconLetterText : icon_letter_text.text //for icon_letter text
property alias iconLetterTextColor : icon_letter_text.color //for icon_letter text
property alias iconLetterColor : icon_letter.color //for icon_letter color
property alias mouseArea : card_item_mouseArea //for mouse area

property alias edit_mouseArea : card_menu_edit_mouseArea //for edit mouse area
property alias turnOff_mouseArea : card_menu_turnoff_mouseArea //for turn on/off mouse area
property alias remove_mouseArea : card_menu_remove_mouseArea //for remove mouse area


width: 190
height: 300

property int turn: 0 // turning on/off status 0 is Enable / 1 is Disable

Rectangle {
id: card_body
width: 190
height: 300
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
radius: 2

Behavior on scale { NumberAnimation { duration: 300 } }
Behavior on color {ColorAnimation{}}

layer.enabled: true
layer.effect: DropShadow {
horizontalOffset: 0;
radius: 8
samples: 16
source: card_item
color: "#20000000"
verticalOffset: 0;
transparentBorder: true
spread: 0
}



}

Rectangle {
id: card_item
width: 190
height: 300
anchors.verticalCenter: card_body.verticalCenter
anchors.horizontalCenter: card_body.horizontalCenter
radius: 2

Behavior on scale { NumberAnimation { duration: 300 } }
Behavior on color {ColorAnimation{}}

Rectangle {
id: card_overlay
x: 1
y: 0
width: 190
height: 190
color: "#ffffff"
anchors.horizontalCenter: parent.horizontalCenter
Behavior on scale { NumberAnimation { duration: 300 } }
Behavior on color {ColorAnimation{}}

Rectangle {
id: icon_letter
width: 150
height: 150
color: "#87cefa"
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Behavior on scale { NumberAnimation { duration: 300 } }

Text {
id: icon_letter_text
color: "#ffffff"
text: qsTr("K")
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 90
}
}

}

Item {
id: card_info
x: 0
y: 191
width: 190
height: 105

Text {
id: title
x: 15
y: 14
width: 150
height: 21
text: qsTr("Static pages")
anchors.horizontalCenter: parent.horizontalCenter
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
font.pixelSize: 16
}

Label {
id: desc
x: 20
y: 41
width: 150
height: 32
color: "#888888"
text: qsTr("Module for configurating static pages")
wrapMode: Text.WordWrap
verticalAlignment: Text.AlignTop
horizontalAlignment: Text.AlignLeft
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 12

}
}

MouseArea {
id: card_item_mouseArea
anchors.bottomMargin: 36
anchors.fill: parent

hoverEnabled: true
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

onHoveredChanged: {

if(card_item_mouseArea.containsMouse) {
card_overlay.color = "#e6e6e6"
}

else {
card_overlay.color = "#ffffff"

}
}

onPressedChanged: {

icon_letter.scale = 0.8

}

onClicked: {

icon_letter.scale = 1.0

}

}
}


Rectangle {
id: card_menu_in
x: 5
width: 190
height: 305
color: "#ffffff"
opacity: 0
visible: false
y: 5

NumberAnimation on x{
id: anim_open
running: true
from: 50
to: 5
duration: 200

}


Rectangle {
id: card_menu_edit
x: -3
y: 112
width: 190
height: 36
color: "#00000000"
anchors.horizontalCenter: parent.horizontalCenter

Text {
id: card_menu_edit_text
color: "#333333"
text: qsTr("Edit")
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
anchors.fill: parent
font.pixelSize: 14
Behavior on scale { NumberAnimation{}}
Behavior on color {ColorAnimation{}}
}

MouseArea {
id: card_menu_edit_mouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

onHoveredChanged: {

if(card_menu_edit_mouseArea.containsMouse) {
card_menu_edit.color = "#337AB7"
card_menu_edit_text.color = "#ffffff"
}

else {
card_menu_edit.color = "transparent"
card_menu_edit_text.color = "#333333"
}
}
onPressedChanged: {

card_menu_edit_text.scale = 0.8

}

onClicked: {

card_menu_edit_text.scale = 1.0

}
}
}

Rectangle {
id: card_menu_turnoff
x: -2
y: 148
width: 190
height: 36
color: "#00000000"
anchors.horizontalCenterOffset: 0
anchors.horizontalCenter: parent.horizontalCenter

Text {
id: card_menu_turnoff_text
color: "#333333"
text: ("Turn off")
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 14
Behavior on scale { NumberAnimation{}}
Behavior on color {ColorAnimation{}}
}

MouseArea {
id: card_menu_turnoff_mouseArea
x: 1
y: 3
anchors.fill: parent
hoverEnabled: true
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

onHoveredChanged: {

if(card_menu_turnoff_mouseArea.containsMouse) {
card_menu_turnoff.color = "#337AB7"
card_menu_turnoff_text.color = "#ffffff"
}

else {
card_menu_turnoff.color = "transparent"
card_menu_turnoff_text.color = "#333333"
}
}
onPressedChanged: {

card_menu_turnoff_text.scale = 0.8

}
onClicked: {
card_menu_turnoff_text.scale = 1.0
if (turn === 1){
turn = 0
card_foot.color = "#f6f6f6"
services_over_list.text = "Link"
services_over_list.color = "#337AB7"
card_menu_turnoff_text.text = "Turn off"
card_item_mouseArea.enabled = true
card_info.enabled = false
card_overlay.enabled = false
card_info.opacity = 1.0
card_overlay.opacity = 1.0


} else if (turn === 0){
turn = 1
card_foot.color = "#F54C48"
services_over_list.text = "Off"
services_over_list.color = "#ffffff"
card_menu_turnoff_text.text = "Turn on"
card_item_mouseArea.enabled = false
card_info.opacity = 0.5
card_overlay.opacity = 0.5

}


}
}
}

Rectangle {
id: card_menu_remove
x: 5
y: 182
width: 190
height: 36
color: "#00000000"
anchors.horizontalCenterOffset: 0
anchors.horizontalCenter: parent.horizontalCenter

Text {
id: card_menu_remove_text
color: "#333333"
text: qsTr("Remove")
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 14
Behavior on scale { NumberAnimation{}}
Behavior on color {ColorAnimation{}}
}

MouseArea {
id: card_menu_remove_mouseArea
x: 1
y: 3
anchors.fill: parent
hoverEnabled: true
cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor

onHoveredChanged: {
if(card_menu_remove_mouseArea.containsMouse) {
card_menu_remove.color = "#337AB7"
card_menu_remove_text.color = "#ffffff"
}

else {
card_menu_remove.color = "transparent"
card_menu_remove_text.color = "#333333"
}
}
onPressedChanged: {

card_menu_remove_text.scale = 0.8

}

onClicked: {

card_menu_remove_text.scale = 1.0

}
}
}
}

Rectangle {
id: card_body_border
width: 190
height: 300
color: "#00000000"
border.color: "#cccccc"
radius: 2
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}

}




اینم فایل main و نحوه فراخوانی کامپوننت :



import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.2

Window {
id: window1


visible: true

width: 1000
height: 1000

Item {

width: 1000
height: 1000
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter

CardInfo {
x: 302
y: 226

mouseArea.onClicked: {
text_card_info.text = "Card info Clicked!" ;
text_card_info.color = "green"

// Call C++‎‎‎‎‎ Function in here to do anything ! :-)
}



}


Text {
id: text1
x: 322
y: 556
text: qsTr("Card info status:")
font.pixelSize: 12
}

Text {
id: text_card_info
x: 416
y: 556
width: 95
height: 14
text: qsTr("None")
font.pixelSize: 12
}

}

}





میتونید در بخش onClicked تابع مورد نظر خودتون رو از C++‎‎‎‎‎‎‎‎ صدا بزنید.

سلام
ایجاد و استفاده از کامپوننت

http://stackoverflow.com/questions/21974272/how-to-make-visible-both-icon-and-text-on-qml-toolbutton

[zidanerfan]

سلام ، این کنترل هارو از کجا میشه دانلود کرد ؟؟؟

سلام دوستان منم میخوام از این کنترل های سبز رنگ استفاده کنم خواهشاااااااااااااااااا رهنماییم کنید چیکار باید بکنم ممننننننون

[ali_72]

سلام دوستان منم میخوام از این کنترل های سبز رنگ استفاده کنم خواهشاااااااااااااااااا رهنماییم کنید چیکار باید بکنم ممننننننون


لینک هایی که آقای اسدزاده گذاشتن رو از ابتدا مطالعه کنید و پروژه ای که در ابتدای تاپیک گفتن رو دانلود کنید

[zidanerfan]

لینک هایی که آقای اسدزاده گذاشتن رو از ابتدا مطالعه کنید و پروژه ای که در ابتدای تاپیک گفتن رو دانلود کنید

دوست عزیز material design رو نمیگم

http://barnamenevis.org/attachment.php?attachmentid=134201&d=1439400284http://barnamenevis.org/attachment.php?attachmentid=134202&d=1439400296http://barnamenevis.org/attachment.php?attachmentid=134203&d=1439400301http://barnamenevis.org/attachment.php?attachmentid=134204&d=1439400306http://barnamenevis.org/attachment.php?attachmentid=134205&d=1439400313http://barnamenevis.org/attachment.php?attachmentid=134206&d=1439400319
اینارو میگم راهنمایی کن لطفااااا ممنون

[introvert]

سلام...
من تازه با qt آشنا شدم و فقط C++‎‎ تنها زبانیه که بلدم و کمی ناآشنا هستم...
اگر بخوام برنامه ام ظاهر گرافیکی داشته باشه باید از QML استفاده کنم، درست متوجه شدم؟!(مثلا Button ها ظاهر زیبایی داشته باشند، یا مثلا تصویرِ یک ضربدرقرمز (آیکن ) بعنوان botton عمل کنه...
میشه پیرامون این موضوع راهنماییم کنید خیلی لازم دارم!
پروژه ای رو دارم با C++ مینویسم، بعد برای طراحی GUI اومدم سمت کیوت، میشه ساده طراحی کنم ولی میخوام گرافیکی و چشم نواز باشه...
ممنون.

[IMAN4k]

سلام...
من تازه با qt آشنا شدم و فقط C++‎‎‎‎‎‎ تنها زبانیه که بلدم و کمی ناآشنا هستم...
اگر بخوام برنامه ام ظاهر گرافیکی داشته باشه باید از QML استفاده کنم، درست متوجه شدم؟!(مثلا Button ها ظاهر زیبایی داشته باشند، یا مثلا تصویرِ یک ضربدرقرمز (آیکن ) بعنوان botton عمل کنه...
میشه پیرامون این موضوع راهنماییم کنید خیلی لازم دارم!
ممنون.
دوست عزیز من تو قضیه حرفه ای نیستم و چند وقت میشه با Qt اشنا شدم.تجربه خودم و میگم:
اول سعی کنید Qt رو اصولی تسلط پیدا کنید.
در مورد ui هم با Qt میشه انجام دادم (تا یه جاهایی) که پیچیدگی خودش داره (کار با event ها و ...) اما طبق گفته ها با qml این کار راحت تره و دست شما رو خیلی باز تر میذاره (مخصوصا در مورد انمیشن ها)
ویدئو های زیر از Pluralsight هم در مورد Qt quick و qml میتونه کمک کنه :

Pluralsight Qt Quick Fundamentals (http://ehsanavr.com/17758/videography/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-qt-quick/)
++Pluralsight Integrating Qt Quick with C (http://ehsanavr.com/18311/videography/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B3%D8%B1%DB%8C%D8%B9-qt-%D8%A8%D8%A7-c/)


اما اگر فقط قصدتون تغییر ظاهر ابتدایی ویجت ها و... فقط به همین بسنده کنید :

Qt Style Sheets (http://doc.qt.io/qt-4.8/stylesheet.html)

[JustCompiler]

این کار سادست شما روی یک فرم از کنترل های معمولی همین Button استفاده خواهید کرد فقط نکته جالبش امکان نمایش منو روی دکمه هستش که این هم خیلی ساده تسط یک کنترل Menu میشه ایجادش کرد روش کار رو به صورت زیر توضیح میدم البته بدون این استایلی که میبینید اگه نیاز بود بگید یک توضیحی هم راجب استایل بندی ها و قوانینش بدم.

فایل کامل پروژه هم ضمیمه گردید.

سلام استاد
فایل خراب هست.
139558

[کامبیز اسدزاده]

سلام استاد
فایل خراب هست.
139558

سلام

نه خراب نیستن بعضی از فایل هارو من با 7zip فشرده کردم برای همین WinRar باهاشون سازگار نیست.
نرم افزار 7Zip رو نصب و با اون اکسترکتش کنید.

[Roia_del]

با سلام .
استاد اسدزاده اون فایلهایی که تو پست اول هست ، از gitHub دانلود کردم ، پروژه رو به نظر میرسه تغییر دادن. چون من پوشه Module ندیدم. امکانش هست راهنمایی بفرمایید. با qpm هم نتونستم اون کارهایی رو گفته بود انجام بدم به dependencies گیر میداد. این پایینی هم عکس پوشه های کد gitHub هست.

140215

https://github.com/papyros/qml-material

[Roia_del]

با سلام .
استاد اسدزاده اون فایلهایی که تو پست اول هست ، از gitHub دانلود کردم ، پروژه رو به نظر میرسه تغییر دادن. چون من پوشه Module ندیدم. امکانش هست راهنمایی بفرمایید. با qpm هم نتونستم اون کارهایی رو گفته بود انجام بدم به dependencies گیر میداد. این پایینی هم عکس پوشه های کد gitHub هست.

140215

https://github.com/papyros/qml-material


البته پس از تغییر Branch از develop به Release اون پوشه ها اومدند. فقط الان بعد کپی اونها هم به پوشه های مذکور که فرمودین ، باز import Material 0.1 v رو نمیشناسه. من Release v 0.1 رو دانلود کردم.

الان مشکل من یعنی از کجاست؟ (در ضمن QtQuick 2.5 هست)

[Hadiir.net]

سلام
ممکنه فایلهای لازمه ( پروژه متریال دیزاین)
رو توی سرور همین سایت هم برای دانلود بذارین، من با دانلود از گیت هاپ مشکل دارم، تشکر

[Hadiir.net]

سلام، وقت بخیر، یک پیشنهاد داشتم ، ممکنه آموزش Qt C++ & Qml رو در قالب یک پروژه پیش ببرین، یک پروژه ساده و اوپن سورس
بعنوان مثال، یک پروژه دفتر تلفن یا برنامه ای برای ثبت اطلاعات اشخاص که کاربرد عمومی خوب و زیادی داره، طراحی فرم ها و ظاهر برنامه با Qml انجام بشه، کدهای اصلی در کیوت و با C++ و همچنین از یک دیتابیس مناسب برای ذخیره و بازیابی اطلاعات استفاده بشه.
بنظرم اینجور تاثیر بیشتری در یادگیری داره و نهایتا خروجی برنامه رو هر کسی میتونه ازش استفاده کنه
و از طرفی چون پروژه اوپن سورس هست ، هرکسی میتونه به روند تکاملش کمک کنه.
تشکر

[barnamenevisjavan]

سلام، وقت بخیر، یک پیشنهاد داشتم ، ممکنه آموزش Qt C++‎ & Qml رو در قالب یک پروژه پیش ببرین، یک پروژه ساده و اوپن سورس
بعنوان مثال، یک پروژه دفتر تلفن یا برنامه ای برای ثبت اطلاعات اشخاص که کاربرد عمومی خوب و زیادی داره، طراحی فرم ها و ظاهر برنامه با Qml انجام بشه، کدهای اصلی در کیوت و با C++‎ و همچنین از یک دیتابیس مناسب برای ذخیره و بازیابی اطلاعات استفاده بشه.
بنظرم اینجور تاثیر بیشتری در یادگیری داره و نهایتا خروجی برنامه رو هر کسی میتونه ازش استفاده کنه
و از طرفی چون پروژه اوپن سورس هست ، هرکسی میتونه به روند تکاملش کمک کنه.
تشکرسلام من هم موافقم

[Ali71321]

سلام

خیلی وقته به فکر این بودم یک سری موارد رو برای 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/material-design/introduction.html


تصاویری از کنترل های خلاقانه توسط Material Design برای C++‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎� �‎‎‎‎ که تقریبا از کنترل های پر کاربرد عکس گرفتم بقیش رو هم در پوشه demo خواهید دید.

134190
134198
134197
134196
134195
134194
134193
134192
134191
134199

برای استفاده از این Material لینک GitHub رو بررسی کنید : https://github.com/papyros/qml-material
همه چیز خیلی ساده هستش کافیه طبق آموزش ابتدا qml-material.pro (https://github.com/papyros/qml-material/blob/develop/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 موجود هستش ازشون استفاده کنید و لذتشو ببرید.
ادامه‌ی آموزش‌ها در این بخش (https://iostream.ir/forums/forum/8-برنامه-نویسی-در-c-و-%E2%80%8Fc/)

خسته نباشید مهندس.
متاسفانه
دو تا پوشه Material و QtQuick مسیری که مشخص کردید وجود نداره