به عنوان یک توسعه دهنده که اپلیکیشن های مختلفی را در اپ استور ها دارد و مشغول بهینه سازی و رسیدگی به هزاران کاربر هست خیلی سخت میشود فریمورک و تکنولوژی هایی که هروز معرفی می شوند را بررسی کرد.اما تغییرات و امکاناتی که تیم فلاتر ارائه میدهند به اندازه کافی جذابیت دارند که هر برنامه نویسی را وادار به امتحان کردن آنها بکنند.در این مطلب قصد داریم راجب ویجت جدیدی که در نسخه Flutter1.7 به نام NavigationRail معرفی شد صحبت کنیم.
NavigationRail چیست؟
اولین نسخه پایدار فلاتر در سال ۲۰۲۰ شامل ویژگی های بسیار جدیدی بود از بهینه شدن برنامه های نوشته شده تا معرفی ابزار های جدید.اما جذاب ترین بخش آن معرفی کامپوننت جدید متریال دیزاین به نام NavigationRail بود که میتواند جایگزین BottomNavigationBar شود.این ویجت در چپ یا راست صفحه به شکل عمودی قرار میگیرد و برای جا به جایی بین صفحات با فرگمنت های استفاده می شود.برای درک بهتر میتونید تصاویر زیر را که توسط بعضی از طراحان تهیه شده است مشاهده کنید.
ساختار معمولی
از NavigationRail در داخل بدنه ویجت Scafold و معمولا انتها یا ابتدای Row استفاده می شود.در این حالت منوی ما و محتوای اصلی صفحه توسط یک خط عمودی جدا می شود.همچنین برای ایجاد سایه و زیبا تر کردن طراحی میتونید از ویژگی elevation نیز در نویگشن ریل استفاده کنید.نکته ای که نباید فراموش کنید در اینجا قرار دادن محتویات اصلی صفحه در ویجت Expanded است که مشکلی بابت نمایش عناصر نداشته باشید.
Scaffold(
body: Row(
children: <Widget>[
NavigationRail(
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
}
);
},
labelType: NavigationRailLabelType.selected,
destinations: [
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text('First'),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
label: Text('Second'),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text('Third'),
),
],
),
VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded( child: Center
(
child: Text('selectedIndex: $_selectedIndex'),
),
)
],
)
,);
ویژگی های NavigationRail
برای اینکه بتونیم از هر ویجت استفاده کنیم باید با ویژگی و امکاناتی که دارد به طور کامل آشنا شویم.اما قبل از بررسی ویژگی ها, یک کلاس هست که باید معرفی کنیم به اسم NavigationRailDestination.
کلاس NavigationRailDestination چیست؟
این کلاس یک کلاس مدل است که برای ساخت آیتم های NavigationRail استفاده می شود.همچنین این کلاس دیتای مقصدی که قصد رفتن به آن دارید را نیز نگهداری میکند.کلاس NavigationRailDestination شامل سه ویژگی است که باهم بررسی میکنیم.
- Icon: این ویژگی یک ویجت از نوع آیکون دریافت میکند و هیچوقت نباید null باشد
- selectedIcon: این ویژگی اختیاری هست و میتونید استفاده نکنید, برای زمانی که میخواید state آیکون انتخاب شده تغییر کند کاربرد دارد.
- label: این فیلد هم اجباری هست و باید یک ویجت تکست برای آن قرار دهید البته میتونید مشخص کنید که لیبل نمایش داده شود یا خیر.
یک آبجکت معمولی از کلاس NavigationRailDestination به شکل زیر می باشد.
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text('First'),
),
اما بریم سراغ ویژگی های کلاس NavigationRail که قرار بود بررسی کنیم.
- destinations: این ویژگی یک لیستی از آبجکت های NavigationRailDestination دریافت میکند. حداقل اندازه لیست باید ۲ باشد.
- selectedIconTheme و unselectedIconTheme: با استفاده از این دو ویژگی میتونید برای حالت های انتخاب شده و غیر انتخابی آیکون ها تم تعریف کنید که شامل رنگ آیکون, اندازه و … می باشد.
- selectedLabelTextStyle و unselectedLabelTextStyle: این مورد هم مثل ویژگی قبلی می باشد اما برای عنوان یا همون لیبل استفاده میشه و میتونی استایل های مختلف و برای دو حالت انتخابی و غیر انتخاب شده تعریف کنید.
- labelType: این ویژگی شامل انتخاب از بین سه گزینه می باشد که حالت نمایش منو را در سمت چپ یا راست تعیین میکند. سه حالت شامل NavigationRailLabelType.none , NavigationRailLabelType.selected,NavigationRailLab elType.all می باشد که در تصویر زیر تفاوت آنها را به خوبی میبینید.
- groupAlignment: از این ویژگی برای مشخص کردن محل قرار گیری آیتم ها استفاده میکنیم. که مقداری بین ۱- تا ۱ دریافت میکند. بصورت پیش فرض این مقدار ۱- می باشد که به معنی قرار گیری آیتم ها در بالای صفحه است, مقدار ۰ محل قرار گیری آیتم ها در وسط و ۱ نیز در انتهای صفحه می باشد.
- leading & trailing: این ویژگی دقیقا به همان شکلی که در دیگر ویجت ها مثل ListTile, AppBar وجود دارد کار میکند. در این ویژگی ما میتونیم هر ویجتی که میخوایم قرار بدیم, برای مثال در تصویر زیر یک Column تعریف کردیم و داخل آن دو ویجت دیگر قرار دادیم. اگر میخواهید ویجت به ابتدای آیتم ها اضافه شود باید از leading استفاده کنید.
- onDestinationSelected: این متد زمانی که روی یکی از آیتم ها کلیک شود اجرا میشود.
