مقدمه ای بر ویجت ها در برنامه نویسی فلاتر

مقدمه ای بر ویجت ها در برنامه نویسی فلاتر

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

اجازه دهید ویجت MyHomePage برنامه Hello World را بررسی کنیم. کد برای این منظور به شرح زیر است –

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar(title: Text(this.title), ), 
         body: Center(child: Text( 'Hello World',)),
      );
   }
}

در اینجا، ما با گسترش StatelessWidget یک ابزارک جدید ایجاد کرده ایم.

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

در کد، عنوان را به عنوان یکی از آرگومان های سازنده و همچنین از Key به عنوان آرگومان دیگر استفاده کرده ایم. عنوان برای نمایش عنوان و Key برای شناسایی ویجت در محیط ساخت استفاده می شود.

در اینجا، متد build و متد ساخت Scaffold را فراخوانی می کند، که به نوبه خود روش ساخت AppBar و Center را برای ایجاد رابط کاربری خود فراخوانی می کند.

سرانجام، روش ساخت مرکز فراخوانی روش ساخت متن است.

برای درک بهتر، Center build همان در زیر آورده شده است:

تجسم ساخت ویجت

همانطور که در زیر ذکر شده است ، در ویندوز ، ابزارک ها را می توان در چندین دسته بر اساس ویژگی های آنها دسته بندی کرد –

• یجت های خاص بستر های نرم افزاری
• یجت های طرح بندی
• یجت های نگهداری State
  ویجت های مستقل / پایه بستر های نرم افزاری

بگذارید اکنون هر یک از آنها را با جزئیات بحث کنیم.

ابزارک های خاص بستر های نرم افزاری

فلاتر دارای ابزارک های خاص برای یک سیستم عامل خاص – Android یا iOS است.

ابزارک های خاص اندروید مطابق با دستورالعمل طراحی مواد توسط سیستم عامل Android طراحی شده اند. ویجت های خاص اندروید را ویجت های ماده می نامند.

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

برخی از عناصر پرکاربرد مواد به شرح زیر است –

• Scaffold
• AppBar
• BottomNavigationBar
• TabBar
• TabBarView
• ListTile
• RaisedButton
• FloatingActionButton
• FlatButton
• IconButton
• DropdownButton
• PopupMenuButton
• ButtonBar
• TextField
• Checkbox
• Radio
• Switch
• Slider
• Date & Time Pickers
• SimpleDialog
• AlertDialog

برخی از پرکاربردترین ویجت های کوپرتینو به شرح زیر است –

• CupertinoButton
• CupertinoPicker
• CupertinoDatePicker
• CupertinoTimerPicker
• CupertinoNavigationBar
• CupertinoTabBar
• CupertinoTabScaffold
• CupertinoTabView
• CupertinoTextField
• CupertinoDialog
• CupertinoDialogAction
• CupertinoFullscreenDialogTransition
• CupertinoPageScaffold
• CupertinoPageTransition
• CupertinoActionSheet
• CupertinoActivityIndicator
• CupertinoAlertDialog
• CupertinoPopupSurface
• CupertinoSlider

ویجت های طرح بندی

در فلاتر با ساخت یک یا چند ویجت می توان ویجت ایجاد کرد. برای ساخت چندین ویجت در یک ویجت، فلاتر تعداد زیادی ویجت را با ویژگی طرح بندی ارائه می دهد. به عنوان مثال، ویجت کودک را می توان با استفاده از ویجت Center در مرکز قرار داد.

برخی از ابزارک های طرح بندی معروف به شرح زیر هستند –

• Container – جعبه ای مستطیلی که با استفاده از ابزارک های BoxDecoration با پس زمینه ، حاشیه و سایه تزئین شده است.
• Center– ابزارک کودک خود را در مرکز قرار دهید.
• Row  – فرزندان خود را در جهت افقی مرتب کنید.
• Column – فرزندان خود را در جهت عمودی مرتب کنید.
• Stack– یکی را بالاتر از دیگری مرتب کنید.

ویجت های نگهداری State

در فلاتر، همه ابزارک ها یا از StatelessWidget یا StatefulWidget گرفته شده اند.

ویجت مشتق شده از StatelessWidget هیچ گونه اطلاعات State ندارد اما ممکن است حاوی ویجت مشتق شده از StatefulWidget باشد. ماهیت پویای برنامه از طریق رفتار تعاملی ابزارک ها است و حالت در هنگام تعامل تغییر می کند. به عنوان مثال، ضربه زدن روی دکمه شمارنده باعث افزایش / کاهش حالت داخلی شمارنده می شود و ماهیت واکنشی ویجت فلاتر باعث ایجاد مجدد خودکار ویجت با استفاده از اطلاعات حالت جدید می شود.

ویجت های مستقل / پایه بستر های نرم افزاری

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

Text

ابزارک متن برای نمایش یک رشته استفاده می شود. سبک رشته را می توان با استفاده از ویژگی style و کلاس TextStyle تنظیم کرد. کد نمونه برای این منظور به شرح زیر است –

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold))

ابزارک Text دارای یک سازنده خاص به نام Text.rich است که کودک از نوع TextSpan را برای تعیین رشته با سبک متفاوت می پذیرد. ابزارک TextSpan ماهیتی بازگشتی دارد و TextSpan را به عنوان فرزند خود قبول می کند. کد نمونه برای این منظور به شرح زیر است –

Text.rich( 
   TextSpan( 
      children: <TextSpan>[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

مهمترین خصوصیات ابزارک Text به شرح زیر است –

• maxLines, int – حداکثر تعداد خطوط برای نشان دادن
• overflow, TextOverFlow – مشخص می کند که چگونه با استفاده از کلاس TextOverFlow، رشته کنترل می شود
• TextOverFlow– با استفاده از کلاس TextStyle سبک رشته را مشخص کنید
• textAlign, TextAlign– تراز بندی متن مانند راست ، چپ ، توجیه و غیره ، با استفاده از کلاس TextAlign
• textDirection, TextDirection – جهت حرکت متن ، از چپ به راست یا راست به چپ

تصویر

ویجت تصویر برای نمایش یک تصویر در برنامه استفاده می شود. ویجت تصویر سازندگان مختلفی را برای دانلود تصاویر از چندین منبع فراهم می کند و آنها به شرح زیر است –

• Image – بارگیری تصویر عمومی با استفاده از ImageProvider
• Image.asset – بارگیری تصویر از دارایی های پروژه فلاتر
• Image.file – بارگیری تصویر از پوشه سیستم
• Image.memory – بارگیری تصویر از حافظه
• Image Networks – بارگیری تصویر از شبکه

ساده ترین گزینه برای بارگذاری و نمایش یک تصویر در فلاتر، گنجاندن تصویر به عنوان دارایی های برنامه و بارگذاری آن در ویجت مورد تقاضا است.

• یک فایل ایجاد کنید، دارایی ها را در فایل پروژه ایجاد کنید و تصاویر لازم را قرار دهید.
• همانطور که در زیر نشان داده شده است ، دارایی ها را در pubspec.yaml مشخص کنید

flutter: 
   assets: 
      - assets/smiley.png

• اکنون ، تصویر را در برنامه بارگیری و نمایش دهید.

Image.asset('assets/smiley.png')

کد منبع کامل ویجت MyHomePage از برنامه hello world و نتیجه به شرح زیر است:

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold( 
         appBar: AppBar( title: Text(this.title), ), 
         body: Center( child: Image.asset("assets/smiley.png")),
      ); 
   }
}

تصویر بارگیری شده به شرح زیر است –

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

• image، ImageProvider – تصویر واقعی برای بارگیری
• width, double  – عرض تصویر
• height, double– ارتفاع تصویر
• alignment ، AlignmentGeometry – نحوه تراز کردن تصویر در محدوده آن

آیکون

ویجت آیکون برای نمایش یک glyph از قلم توصیف شده در کلاس IconData استفاده می شود. کد بارگیری یک آیکون ایمیل ساده به شرح زیر است:

Icon(Icons.email)

کد کامل منبع برای استفاده از آن در برنامه hello world به شرح زیر است:

class MyHomePage extends StatelessWidget { 
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 

   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center( child: Icon(Icons.email)),
      );
   }
}

آیکون بارگیری شده به شرح زیر است:

منبع.

لیست جلسات قبل آموزش برنامه نویسی فلاتر

1. معرفی برنامه نویسی فلاتر
2. آموزش نصب فلاتر
3. اصول ایجاد یک برنامه فلاتر در Android Studio
4. معماری فریم ورک برنامه نویسی فلاتر
5. مقدمه ای بر برنامه نویسی دارت