macos_ui
Version 2.1.0
تطفو الحاجيات والموضوعات التي تنفذ لغة تصميم MACOS الحالية.
تحقق من معرض القطعة التفاعلية الخاصة بنا على الإنترنت على https://macosui.github.io/macos_ui/#/
يمكن العثور على الأدلة ، codelabs ، وغيرها من الوثائق على https://macosui.dev
تم تطوير macos_ui ضد قناة Flutter stable . لضمان تجربة تطوير سلسة مع macos_ui ، يجب عليك إنشاء تطبيقك على قناة Flutter stable .
يوضح Pub.Dev أن macos_ui يدعم MacOS فقط. وذلك لأن macos_ui يستدعي بعض التعليمات البرمجية الأصلية ، وبالتالي يحدد MacOS كمنصة مكون الإضافي في ملف pubspec.yaml .
ستعمل macos_ui تقنيًا على أي منصة تدعمها Flutter ، لكنك ستحصل على أفضل النتائج على MacOS . دعم منصة غير MACOS غير مضمون.
ميزات macos_ui التي لن تعمل على منصات أخرى غير MACOS بسبب استدعاء الكود الأصلي هي:
macos_window_utilsMacosColors.controlAccentColor()MacosColorWellنظرًا لأن Flutter في هذا الوقت لا يسمح عناصر واجهة المستخدم بتدفق حدود النافذة ، فإن النوافذ المنبثقة مقيدة بالمساحة المتاحة.
لذلك ، إذا كنت تستخدم أجهزة توجيهي تنشئ منبثقة في شريط الأدوات الخاص بك ، مثل ToolBarPopupButton ، فيجب عليك تجنب السماح بتغيير حجم نافذة التطبيق الخاصة بك تحت ارتفاع أطول منبثقة.
macos_ui يرحب بالمساهمات! يرجى الاطلاع على CONTRIBUTING.md لمزيد من المعلومات.
MacosWindow هو الإطار الأساسي لتخطيط على طراز MacOS.
وهو يدعم Sidebar على اليسار ، TitleBar اختياري في الأعلى ، ويتم ملء ما تبقى من النافذة عادة مع MacosScaffold .
يتم توفير نطاق لـ MacosWindow بواسطة MacosWindowScope . يمكن تبديل الشريط الجانبي باستخدام MacosWindowScope.of(context).toggleSidebar() . يرجى ملاحظة أنه يجب عليك لف MacosScaffold الخاص بك في أداة Builder من أجل العمل بشكل صحيح.
يتيح الشريط الجانبي التنقل في التطبيق ويوفر وصولًا سريعًا إلى مجموعات المحتوى العليا في تطبيقك.
يمكن وضع الأشرطة الجانبية على اليسار أو يمين تطبيقك. لوضع شريط جانبي على اليسار ، استخدم خاصية MacosWindow.sidebar . لوضع شريط جانبي على اليمين ، استخدم خاصية MacosWindow.endSidebar .
مثال الاستخدام:
int pageIndex = 0 ;
...
MacosWindow (
sidebar : Sidebar (
minWidth : 200 ,
builder : (context, scrollController) {
return SidebarItems (
currentIndex : pageIndex,
scrollController : scrollController,
itemSize : SidebarItemSize .large,
onChanged : (i) {
setState (() => pageIndex = i);
},
items : const [
SidebarItem (
label : Text ( 'Page One' ),
),
SidebarItem (
label : Text ( 'Page Two' ),
),
],
);
},
),
endSidebar : Sidebar (
startWidth : 200 ,
minWidth : 200 ,
maxWidth : 300 ,
shownByDefault : false ,
builder : (context, _) {
return const Center (
child : Text ( 'End Sidebar' ),
);
},
),
), MacosScaffold هو ما قد تسميه "صفحة".
السقالة لديها خاصية toolbar وممتلكات children . يقبل children عنصر واجهة مستخدم ContentArea و ResizablePane متعددة. للقبض على التنقل أو الطرق الموجودة أسفل السقالة ، فكر في لف MacosScaffold في CupertinoTabView . من خلال القيام بذلك ، سيتم عرض التنقل داخل MacosScaffold داخل منطقة MacosScaffold بدلاً من تغطية النافذة بأكملها. لدفع طريق خارج MacosScaffold ملفوف في CupertinoTabView ، استخدم Root Navigator Navigator.of(context, rootNavigator: true)
راجع وثائق التخصيصات وأمثلة ToolBar .
تم تقديم نظرة جديدة على تطبيقات MacOS في Big Sur (MacOS 11). لمطابقة هذا الظهور في تطبيق Flutter الخاص بك ، يعتمد MacOS_UI على MacOS_Window_utils ، والذي يتطلب الحد الأدنى من هدف نشر MacOS وهو 10.14.6. لذلك ، تأكد من فتح مجلد macos/Runner.xcworkspace في مشروعك باستخدام Xcode والبحث عن Runner.xcodeproj . انتقل إلى Info > Deployment Target وقم بتعيين macOS Deployment Target على 10.14.6 أو أعلى. بعد ذلك ، افتح Podfile لمشروعك (إذا لم يظهر في Xcode ، يمكنك العثور عليه في دليل macos الخاص بمشروعك عبر VS Code) وضبط الحد الأدنى من إصدار النشر في السطر الأول إلى 10.14.6 أو أعلى:
platform :osx , '10.14.6' قد تحتاج أيضًا إلى فتح Runner.xcodeproj في XCode وتعيين الحد الأدنى لنسخة النشر هناك.
الآن ، قم بتكوين نافذتك داخل main() على النحو التالي:
/// This method initializes macos_window_utils and styles the window.
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .unified,
);
await config. apply ();
}
void main () async {
await _configureMacosWindowUtils ();
runApp ( const YourAppHere ());
} يرجى ملاحظة أنه إذا كنت تستخدم شريط العنوان ( TitleBar ) في MacosWindow ، فيجب عليك تعيين toolbarStyle الخاص بك على NSWindowToolbarStyle.expanded ، من أجل محاذاة الأزرار الإغلاق بشكل صحيح ، وتقليل ، وتكبير الأزرار: التكبير: التكبير:
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .expanded,
);
await config. apply ();
} في أي حالة أخرى ، يجب عليك الاحتفاظ بها مثل NSWindowToolbarStyle.unified .
يخلق شريط أدوات في MacosScaffold . يظهر شريط الأدوات أسفل شريط العنوان (إن كان موجودًا) لتطبيق MacOS أو يتكامل معه ، باستخدام خاصية title به.
يوفر شريط الأدوات وصولًا مناسبًا إلى الأوامر والميزات المستخدمة بشكل متكرر (عناصر شريط الأدوات). يمكن أن تحتوي الطرق المختلفة لتطبيقك على أشرطة أدوات مختلفة.
تتضمن عناصر شريط الأدوات ToolBarIconButton و ToolBarPulldownButton وأدوات ToolBarSpacer ، ويجب توفيرها عبر خاصية items . يجب أيضًا توفير إجراء كل عنصر شريط أدوات كأمر شريط قائمة في تطبيقك.
تبدو أشرطة الأدوات أفضل وأسهل لفهمها عندما تحتوي على عناصر من نفس النوع (لذلك إما استخدام الملصقات لكل عنصر شريط أدوات أو لا).
يمكنك استخدام أجهزة تدوينات ToolBarSpacer لضبط تجميع إجراءات شريط الأدوات المختلفة.
سيكون شريط أدوات مثال:
ToolBar (
title : const Text ( 'Untitled Document' ),
titleWidth : 200.0 ,
leading : MacosBackButton (
onPressed : () => debugPrint ( 'click' ),
fillColor : Colors .transparent,
),
actions : [
ToolBarIconButton (
label : "Add" ,
icon : const MacosIcon (
CupertinoIcons .add_circled,
),
onPressed : () => debugPrint ( "Add..." ),
showLabel : true ,
),
const ToolBarSpacer (),
ToolBarIconButton (
label : "Delete" ,
icon : const MacosIcon (
CupertinoIcons .trash,
),
onPressed : () => debugPrint ( "Delete" ),
showLabel : false ,
),
ToolBarPullDownButton (
label : "Actions" ,
icon : CupertinoIcons .ellipsis_circle,
items : [
MacosPulldownMenuItem (
label : "New Folder" ,
title : const Text ( "New Folder" ),
onTap : () => debugPrint ( "Creating new folder..." ),
),
MacosPulldownMenuItem (
label : "Open" ,
title : const Text ( "Open" ),
onTap : () => debugPrint ( "Opening..." ),
),
],
),
]
),هذا يبني شريط الأدوات البسيط هذا:
أمثلة شريط أدوات أخرى:
يمكنك أيضًا إنشاء CustomToolbarItem الخاص بك لتضمين أي نوع من القطعة في شريط الأدوات:
// Add a grey vertical line as a custom toolbar item:
CustomToolbarItem (
inToolbarBuilder : (context) => Padding (
padding : const EdgeInsets . all ( 8.0 ),
child : Container (color : Colors .grey, width : 1 , height : 30 ),
),
inOverflowedBuilder : (context) =>
Container (color : Colors .grey, width : 30 , height : 1 ),
),SliverToolBar SliverToolbar هو متغير من ToolBar القياسي ، حيث يكون الفرق الرئيسي هو أنه (كما يوحي الاسم) ، فهو متوافق مع أجهزة توجيه قابلة للتمرير مثل CustomScrollView و NestedScrollView . هناك ثلاث خصائص إضافية على SliverToolBar :
pinned ، والذي يحدد ما إذا كان يجب أن يظل شريط الأدوات مرئيًا أثناء التمريرfloating ، والتي تحدد ما إذا كان يجب أن يصبح شريط الأدوات مرئيًا بمجرد أن يبدأ الاستخدام في التمرير لأعلىopacity ، الذي يدير تأثير الشفافة لشريط الأدواتتتيح هذه القطعة للمطورين تحقيق سلوكيات شريط الأدوات التي شوهدت في متجر تطبيقات Apple.
استخدام العينة:
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); عنصر واجهة مستخدم يهدف إلى تقريب أداة ListTile الموجودة في مكتبة مواد Flutter.
استخدام العينة:
MacosListTile (
leading : const Icon ( CupertinoIcons .lightbulb),
title : Text (
'A robust library of Flutter components for macOS' ,
style : MacosTheme . of (context).typography.headline,
),
subtitle : Text (
'Create native looking macOS applications using Flutter' ,
style : MacosTheme . of (context).typography.subheadline. copyWith (
color : MacosColors .systemGrayColor,
),
),
), واجهة متعددة تعرض صفحة واحدة في وقت واحد. يجب استخدامها في StatefulWidget .
يمكنك التحكم في وضع علامات التبويب باستخدام خاصية position .
الاستخدام:
final _controller = MacosTabController (
initialIndex : 0 ,
length : 3 ,
);
...
MacosTabView (
controller : _controller,
tabs : const [
MacosTab (
label : 'Tab 1' ,
),
MacosTab (
label : 'Tab 2' ,
),
MacosTab (
label : 'Tab 3' ,
),
],
children : const [
Center (
child : Text ( 'Tab 1' ),
),
Center (
child : Text ( 'Tab 2' ),
),
Center (
child : Text ( 'Tab 3' ),
),
],
),
MacosIcon متطابق مع Icon منتظمة بكل طريقة باستثناء واحد - إنه يحترم MacosTheme . استخدمه بنفس الطريقة التي ستقوم بها أيقونة منتظمة:
MacosIcon (
CupertinoIcons .add,
// color: CupertinoColors.activeBlue.color,
// size: 20,
),مربع الاختيار هو نوع من الزر يتيح للمستخدم الاختيار بين حالتين أو إجراءتين أو قيم. يتم النظر في مربع الاختيار المحدد عند يحتوي على علامة اختيار وإيقافها عندما تكون فارغة. يتبع مربع الاختيار دائمًا عنوانًا ما لم يظهر في قائمة التحقق. يتعلم أكثر
| غير محدد | فحص | مختلط |
|---|---|---|
إليك مثال على كيفية إنشاء مربع اختيار أساسي:
bool selected = false ;
MacosCheckbox (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
) لعمل مربع اختيار في الحالة mixed ، قم بتعيين value على null .
يظهر زر التعليمات ضمن عرض ويفتح وثائق المساعدة الخاصة بالتطبيق عند النقر عليها. جميع أزرار المساعدة دائرية ، أزرار ذات حجم ثابت تحتوي على أيقونة علامة استفهام. يتعلم أكثر
إليك مثال على كيفية إنشاء زر مساعدة:
HelpButton (
onPressed : () {
print ( 'pressed help button' ),
},
) يمكنك تخصيص مظهر زر المساعدة وسلوكه باستخدام HelpButtonTheme ، ولكن لا ينصح به Apple لتغيير مظهر زر المساعدة.
زر الراديو هو زر دائري صغير متبوعًا بعنوان. عادة ما يتم تقديمها في مجموعات من اثنين إلى خمسة ، توفر أزرار الراديو للمستخدم مجموعة من الخيارات ذات الصلة ولكن الحصرية متبادلة. حالة زر الراديو إما على (دائرة مملوءة) أو إيقاف (دائرة فارغة). يتعلم أكثر
إليك مثال على كيفية إنشاء زر راديو أساسي:
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),زر المنسدلة (يشار إليه غالبًا باسم قائمة المنسدلة) هو نوع من الزر المنبثق ، عند النقر عليه ، يعرض قائمة تحتوي على قائمة بالخيارات. تظهر القائمة أسفل الزر. بمجرد عرض القائمة على الشاشة ، يبقى مفتوحًا حتى يختار المستخدم عنصر قائمة أو ينقر خارج القائمة أو التبديل إلى تطبيق آخر أو إنهاء التطبيق ؛ أو حتى يعرض النظام تنبيهًا. يتعلم أكثر
استخدم زر المنسدلة لتقديم قائمة بالأوامر. يمكن للزر المنسول إما أن يعرض title أو icon لوصف محتويات قائمة الزر. إذا كنت تستخدم أيقونة ، فتأكد من توصيل الغرض من الزر بوضوح.
إذا كانت items خالية ، فسيتم تعطيل الزر (رمادي).
يجب تقديم title أو icon ، ليتم عرضه كعنوان زر الانخفاض ، ولكن ليس كلاهما في نفس الوقت.
يمكن أيضًا التنقل في القائمة بمفاتيح أعلى/لأسفل وإجراء محدد باستخدام مفتاح الإرجاع.
يمكن أن يظهر أيضًا في شريط الأدوات ، عبر عنصر ToolBarPulldownButton باستخدام عنصر واجهة المستخدم.
| موضوع مظلم | موضوع الضوء |
|---|---|
إليك مثال على كيفية إنشاء زر انسحاب أساسي:
MacosPulldownButton (
title : "Actions" ,
// Or provide an icon to use as title:
// icon: CupertinoIcons.ellipsis_circle,
items : [
MacosPulldownMenuItem (
title : const Text ( 'Save' ),
onTap : () => debugPrint ( "Saving..." ),
),
MacosPulldownMenuItem (
title : const Text ( 'Save as...' ),
onTap : () => debugPrint ( "Opening Save As dialog..." ),
),
const MacosPulldownMenuDivider (),
MacosPulldownMenuItem (
enabled : false ,
title : const Text ( 'Export' ),
onTap : () => debugPrint ( "Exporting" ),
),
],
),الزر المنبثق (الذي يشار إليه غالبًا باسم قائمة منبثقة) هو نوع من الزر ، عند النقر فوقه ، يعرض قائمة تحتوي على قائمة بالخيارات الحصرية المتبادلة. تظهر القائمة أعلى الزر. مثل الأنواع الأخرى من القوائم ، يمكن أن تشمل قائمة الزر المنبثق فواصل ورموز مثل علامات الفحص. بعد الكشف عن القائمة ، يبقى مفتوحًا حتى يختار المستخدم عنصر قائمة ، أو ينقر خارج القائمة ، أو يتحول إلى تطبيق آخر ، أو إنهاء التطبيق ؛ أو حتى يعرض النظام تنبيهًا. يتعلم أكثر
نوع T من MacosPopupButton هو نوع القيمة التي يمثلها كل عنصر قائمة منبثقة. يجب أن تمثل جميع الإدخالات في قائمة معينة القيم مع أنواع متسقة. عادة ، يتم استخدام enum . يجب أن تكون كل MacosPopupMenuItem في العناصر متخصصة مع نفس الوسيطة.
يجب أن يقوم رد الاتصال onChanged بتحديث متغير الحالة الذي يحدد قيمة القائمة المنبثقة. يجب أيضًا استدعاء State.setState لإعادة بناء زر المنبثقة بالقيمة الجديدة.
عندما تكون هناك عناصر قائمة لا يمكن عرضها ضمن قيود القائمة المتاحة ، يتم عرض سيارة إلكترونية في أعلى أو أسفل القائمة المفتوحة للإشارة إلى أن هناك عناصر غير مرئية حاليًا.
يمكن أيضًا التنقل في القائمة بمفاتيح أعلى/لأسفل وعنصر محدد به مفتاح الإرجاع.
| موضوع مظلم | موضوع الضوء |
|---|---|
إليك مثال على كيفية إنشاء زر منبثق أساسي:
String popupValue = 'One' ;
MacosPopupButton < String >(
value : popupValue,
onChanged : ( String ? newValue) {
setState (() {
popupValue = newValue ! ;
});
},
items : < String > [ 'One' , 'Two' , 'Three' , 'Four' ]
. map < MacosPopupMenuItem < String >>(( String value) {
return MacosPopupMenuItem < String >(
value : value,
child : Text (value),
);
}). toList (),
),أزرار الضغط هي نوع الزر القياسي في MacOS. تحتوي أزرار الدفع على نص - وليس أيقونات - وغالبًا ما تفتح نافذة أو مربع حوار منفصل أو تطبيق حتى يتمكن المستخدم من إكمال المهمة. يتعلم أكثر
| موضوع مظلم | موضوع الضوء |
|---|---|
ملاحظة يمكن تصميم أزرار الدفع الأصلي كنص فقط أو نص برمز أو أيقونة فقط. حاليًا ، يتم دعم أزرار الدفع النصية فقط. لإنشاء زر رمز فقط ، استخدم عنصر واجهة مستخدم MacosIconButton .
إليك مثال على كيفية إنشاء زر ضغط أساسي:
PushButton (
child : Text ( 'button' ),
controlSize : ControlSize .regular,
onPressed : () {
print ( 'button pressed' );
},
),المفتاح (المعروف أيضًا باسم التبديل) هو عنصر تحكم يوفر اختيارًا ثنائيًا بين حالتين حصريتين للطرفين - وإيقاف تشغيله. يوضح المفتاح أنه يتم تشغيله عندما يكون لون اللكنة مرئيًا وإيقاف تشغيل المفتاح بدون لون.
يمكن تمرير تعداد ContolSize إلى خاصية size للتحكم في حجم المفتاح. يدعم MacosSwitch أحجام التحكم التالية:
minismallregular| عن | على |
|---|---|
إليك مثال على كيفية إنشاء مفتاح تبديل أساسي:
bool switchValue = false ;
MacosSwitch (
value : switchValue,
onChanged : (value) {
setState (() => switchValue = value);
},
),تعرف على المزيد حول المفاتيح هنا.
يعرض علامات تبويب واحدة أو أكثر في مجموعة أفقية واحدة. يستخدم بواسطة MacosTabView للتنقل بين علامات التبويب المختلفة لشريط علامة التبويب.
الاستخدام النموذجي لهذه القطعة من قبل MacosTabView ، للسيطرة على التنقل في أطفالها. لا تحتاج إلى تحديد جهاز MacosSegmentedControl مع MacosTabView الخاص بك ، حيث تم تصميمه بواسطة تلك القطعة.
الاستخدام:
showMacosAlertDialog (
context : context,
builder : (_) => MacosAlertDialog (
appIcon : FlutterLogo (size : 64 ),
title : Text (
'Alert Dialog with Primary Action' ,
style : MacosTheme . of (context).typography.headline,
),
message : Text (
'This is an alert dialog with a primary action and no secondary action' ,
textAlign : TextAlign .center,
style : MacosTypography . of (context).headline,
),
primaryButton : PushButton (
controlSize : ControlSize .large,
child : Text ( 'Primary' ),
onPressed : () {},
),
),
);الاستخدام:
showMacosSheet (
context : context,
builder : (_) => const MacosuiSheet (),
);حقل النص عبارة عن منطقة مستطيلة يدخل فيها المستخدم أو يقوم بتحرير خط واحد أو أكثر من النص. يمكن أن يحتوي حقل النص على نص عادي أو مصمم.
إليك مثال على كيفية إنشاء حقل نص أساسي:
MacosTextField (
placeholder : 'Type some text here' ,
)حقل البحث هو نمط من حقل النص المحسّن لأداء عمليات البحث المستندة إلى النص في مجموعة كبيرة من القيم.
عندما يبدأ المستخدم في الكتابة في حقل البحث ، تظهر قائمة بالنتائج القابلة للتحديد في تراكب أدناه (أو أعلاه) الحقل.
| موضوع مظلم | موضوع الضوء |
|---|---|
إليك مثال على كيفية إنشاء حقل بحث:
MacosSearchField (
placeholder : 'Search for a country...' ,
results : countries. map ((e) => SearchResultItem (e)). toList (),
onResultSelected : (resultItem) {
debugPrint (resultItem.searchKey);
},
) تحقق من examples/fields_page لمزيد من الأمثلة.
تعد الملصقات وصفًا قصيرًا لما يفعله عنصر على الشاشة.
تصف تلميحات الأدوات بإيجاز كيفية استخدام عناصر التحكم دون تحويل تركيز الناس بعيدًا عن الواجهة الأولية. تظهر علامات المساعدة عندما يقوم المستخدم بوضع المؤشر على عنصر تحكم لبضع ثوان. تظل تلميح الأدوات مرئيًا لمدة 10 ثوانٍ ، أو حتى ينتقل المؤشر بعيدًا عن السيطرة.
| موضوع مظلم | موضوع الضوء |
|---|---|
لإنشاء تلميح الأدوات ، لف أي عنصر واجهة مستخدم على MacosTooltip :
MacosTooltip (
message : 'This is a tooltip' ,
child : Text ( 'Hover or long press to show a tooltip' ),
), يمكنك تخصيص تلميح الأدوات بالطريقة التي تريدها من خلال تخصيص Thould TooltipTheme . تتكيف تلميح الأدوات تلقائيًا مع بيئتها ، وتستجيب لأحداث اللمس والمؤشر. لاستخدام تلميح الأدوات مع عنصر شريط الأدوات ، زودها بخاصية tooltipMessage .
لا تجعل الناس يجلسون حول الشاشة الثابتة في انتظار تطبيقك لتحميل المحتوى أو إجراء عمليات معالجة البيانات المطولة. استخدم مؤشرات التقدم للسماح للأشخاص بمعرفة أن تطبيقك لم يتوقف ويمنحهم فكرة عن المدة التي ينتظرون فيها.
مؤشرات التقدم لها نمطان متميزان:
لا يتفاعل الناس مع مؤشرات التقدم ؛ ومع ذلك ، غالبًا ما يكون مصحوبًا بزر لإلغاء العملية المقابلة. يتعلم أكثر
يمكن أن يكون ProgressCircle إما تحديد أو غير محدد.
| تحديد دائرة التقدم | دائرة التقدم غير المحددة |
|---|---|
إليك مثال على كيفية إنشاء دائرة تقدم غير محددة:
ProgressCircle (
value : null ,
), يمكنك توفير قيمة غير فنية value لتحديد دائرة التقدم.
لا يمكن تحديد ProgressBar إلا.
إليك مثال على كيفية إنشاء شريط التقدم المحدد:
ProgressBar (
value : 30 ,
)يمثل مؤشر المستوى بيانياً قيمة محددة ضمن نطاق من القيم الرقمية. إنه يشبه شريط التمرير في الغرض ، ولكنه أكثر بصرية ولا يحتوي على عنصر تحكم متميز لاختيار قيمة - الانتقال والسحب عبر مؤشر المستوى نفسه لتحديد قيمة يتم دعمها. يمكن أن يتضمن مؤشر المستوى أيضًا علامات علامة ، مما يجعل من السهل على المستخدم تحديد قيمة محددة في النطاق. هناك ثلاثة أنماط مختلفة من مؤشرات المستوى ، ولكل منها مظهر مختلف ، لتوصيل السعة والتصنيف والأهمية.
يوضح مؤشر السعة المستوى الحالي فيما يتعلق بالقدرة المحدودة. غالبًا ما تستخدم مؤشرات السعة عند توصيل العوامل مثل القرص واستخدام البطارية. يتعلم أكثر
إليك مثال على كيفية إنشاء مؤشر سعة مستمر تفاعلي:
double value = 30 ;
CapacityIndicator (
value : value,
discrete : false ,
onChanged : (v) {
setState (() => value = v);
},
), يمكنك ضبط discrete على true لجعله مؤشر سعة منفصلة.
شريط التمرير هو عنصر تحكم يتيح للأشخاص اختيار قيمة من نطاق مستمر أو منفصل من القيم عن طريق تحريك الإبهام المنزلق.
| مستمر | منفصلة |
|---|---|
| شريط منزلق أفقي حيث يمكن تحديد أي قيمة مستمرة بين الدقيقة والحد الأقصى | شريط منزلق أفقي حيث يمكن تحديد القيم المنفصلة فقط بين دقيقة وحد أقصى. غالبًا ما يتم عرض علامات القراد لتوفير السياق. |
فيما يلي مثال على كيفية إنشاء شريط منزلق مستمر تفاعلي:
double value = 0.5 ;
MacosSlider (
value : value,
onChanged : (v) {
setState (() => value = v);
},
),يستخدم مؤشر التقييم سلسلة من الرموز الرسومية المرتبة أفقياً لتوصيل مستوى التصنيف. الرمز الافتراضي هو نجمة.
لا يعرض مؤشر التقييم رموزًا جزئية - يتم تقريب القيمة من أجل عرض رموز كاملة فقط. ضمن مؤشر التقييم ، تكون الرموز دائمًا بنفس المسافة بينها ولا تتوسع أو تتقلص لتناسب التحكم. يتعلم أكثر
إليك مثال على كيفية إنشاء مؤشر تصنيف تفاعلي:
double value = 3 ;
RatingIndicator (
amount : 5 ,
value : value,
onChanged : (v) {
setState (() => value = v);
}
)يتيح للمستخدم اختيار تاريخ.
هناك ثلاثة أنماط من MacosDatePickers :
textual : منتقي تاريخ النص فقط حيث يجب على المستخدم تحديد اليوم أو الشهر أو السنة واستخدام أزرار السيطرة على السيارات لتغيير القيمة. هذا مفيد عندما تكون المساحة في تطبيقك مقيدًا.graphical : منتقي تاريخ مرئي حيث يمكن للمستخدم التنقل من خلال واجهة تشبه التقويم لتحديد تاريخ.combined : يوفر كل من الواجهات textual graphical . يتم دعم توطين Time Picker من قبل المعلمات المعلمات monthAbbreviations weekdayAbbreviations (على سبيل المثال localizations.narrowWeekdays() من أجل مطابقة مواصفات Apple).
weekdayAbbreviations هي قائمة من 7 سلاسل ، واحدة لكل يوم من أيام الأسبوع ، بدءًا من يوم الأحدmonthAbbreviations قائمة 12 سلاسل ، واحدة لكل شهر من السنة ، بدءًا من يناير يمكنك أيضًا تحديد dateFormat لتغيير طريقة عرض التواريخ في الواجهة النصية. يستغرق سلسلة من الرموز (غير حساسة للحالة) ويحل محلها بقيمها المقابلة. يتم دعم الرموز التالية:
D : يوم الشهر (1-31)DD : يوم الشهر (01-31)M : شهر العام (1-12)MM : شهر العام (01-12)YYYY : السنة (0000-9999)/ ، - ، . ) التنسيق الافتراضي هو M/D/YYYY .
مثال الاستخدام:
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),يتيح للمستخدم اختيار وقت.
هناك ثلاثة أنماط من MacosTimePickers :
textual : منتقي زمني فقط للنص حيث يجب على المستخدم تحديد الساعة أو الدقيقة واستخدام أزرار السيطرة على السيارات لتغيير القيمة. هذا مفيد عندما تكون المساحة في تطبيقك مقيدًا.graphical : منتقي الوقت المرئي حيث يمكن للمستخدم تحريك أيدي واجهة تشبه الساعة لتحديد وقت.combined : يوفر كل من الواجهات textual graphical .مثال الاستخدام:
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),يتيح للمستخدم اختيار لون عبر منتقي ألوان MacOS الأصلي.
يمكنك اختيار الوضع الذي يجب تشغيله للمنتقي في استخدام ColorPickerMode Enum. الافتراضي هو ColorPickerMode.wheel
لن تعمل هذه القطعة على منصات أخرى غير MacOS!
مثال الاستخدام:
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
