نوشته شده توسط
alireza.alavi2015
این کار سادست شما روی یک فرم از کنترل های معمولی همین 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-co...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-co...n-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 }
}
}
}
فایل کامل پروژه هم ضمیمه گردید.
قوانین ایجاد تاپیک در تالار
پاسخ با نقل قول