ویجت ها در فلاتر

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

در این فصل ، بگذارید مفهوم واقعی ایجاد ابزارک ها یا ویجت ها و انواع مختلف ابزارک های موجود در فریمورک Flutter را درک کنیم.

بگذارید ویجت 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',)),
      );
   }
}

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 تنها نیاز به یک متد build برای اجرا از کلاس مشتق شده نیاز دارد. متد build – context لازم را برای ساخت ویدجت از طریق پارامتر BuildContext برمی گرداند و ویجت آن را می سازد.

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

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

سرانجام ، متد ساخت Center ، متد ساخت Text برای ایجاد متن فراخوانی می کند.

نکته : به هریک از متدهای زیرمجموعه build می گوییم . build method یا متد ساخت

برای درک بهتر ، به تصویر زیر توجه کنید:

مقالات

تجسم یا تصور ویجت Build

در فلاتر ، ویجت ها را می توان بر اساس ویژگیهای آنها ، طبق موارد زیر ، به چند گروه تقسیم بندی کرد –

ویجت های پلتفرم خاص – Platform specific
ویجت های طرح بندی – Layout widgets
ویجت های نگهداری State maintenance
ویجت ها بستر مستقل و اساسی Platform independent / basic

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

ویجت های پلتفرم خاص – Platform specific widgets

Flutter دارای ویجت هایی خاص برای یک سیستم عامل خاص – Android یا iOS – است.

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

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

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

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

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

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

ویجت طرح بندی Layout widgets فلاتر

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

برخی از ویجت های لایه بندی Layout معروف به شرح زیر است –

Container – یک جعبه مستطیل شکل با استفاده از ویجت های BoxDecoration با background ، border و shadow تزئین شده است .

Center – ویجت فرزند را وسط قرار میدهد.

Row – فرزندان ( اصطلاحی در برنامه نویسی بخش ارث بری می باشد) خود را در جهت افقی ترتیب دهید.

Column – فرزندان خود را در جهت عمودی ترتیب دهید.

Stack – یکی را بالای دیگری قرار میدهد.

در بخش معرفی ویجت ها طرح بندی در مورد ویجت های لایه بندی یا layout widget بصورت تفصیلی بحث خواهیم کرد.

ویجت های تعمیر و نگهداری State maintenance widgets

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

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

ویجت های Platform independent / basic

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

ویجت Text

از ویجت text برای نمایش یک قطعه String استفاده می شود. استایل رشته را می توان با استفاده از style property و کلاس TextStyle تنظیم کرد . کد زیر را ببینید.

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

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

ویجت Text دارای یک سازنده ویژه ، Text.rich است که فرزند از نوع TextSpan را می پذیرد تا String را با استایلی متفاوت مشخص کند. ویجت TextSpan بصورت طبیعی بازگشتی است و TextSpan را به عنوان فرزندان خود می پذیرد . کد زیر را ببینید.

Text.rich( 
   TextSpan( 
      children: &lt;TextSpan&gt;[ 
         TextSpan(text: "Hello ", style:  
         TextStyle(fontStyle: FontStyle.italic)),  
         TextSpan(text: "World", style: 
         TextStyle(fontWeight: FontWeight.bold)),  
      ], 
   ), 
)

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 اداره می شود
style، TextStyle – با استفاده از کلاس TextStyle استایل رشته یا String را مشخص کنید
textAlign، TextAlign – تراز کردن متن مانند راست ، چپ و غیره ، با استفاده از کلاس TextAlign
textDirection، TextDirection – جهت جریان متن ، از چپ به راست یا راست به چپ

ویجت Image

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

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

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

یک پوشه ، asset را در پوشه پروژه ایجاد کرده و تصاویر لازم را در آن قرار دهید.
asset های موجود در pubspec.yaml را مانند تصویر زیر مشخص کنید –

flutter: 
   assets: 
      - assets/smiley.png

flutter:

assets:

- assets/smiley.png

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

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

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

کد منبع کامل ویجت MyHomePage از برنامه HelloWorld و نتیجه مطابق شکل زیر است -.

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")),
      ); 
   }
}

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 به شرح زیر است –

image, ImageProvider − – تصویر حقیقی برای بارگذاری

width, double – عرض تصویر

height, double – ارتفاع تصویر

alignment, AlignmentGeometry چگونه می توان تصویر را در محدوده آن تراز کرد

ویجت Icon

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

Icon(Icons.email)

1	Icon(Icons.email)

کد منبع کامل برای استفاده از آن در برنامه Hello به شرح زیر است –

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)),
      );
   }
}

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)),

);

}

خروجی آیکون را مشاهده کنید:

5/5 - (1 امتیاز)

ویجت ها در فلاتر – flutter widget

تجسم یا تصور ویجت Build

ویجت های پلتفرم خاص – Platform specific widgets

ویجت طرح بندی Layout widgets فلاتر

ویجت های Platform independent / basic

ویجت Text

ویجت Image

ویجت Icon

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

تجسم یا تصور ویجت Build

ویجت های پلتفرم خاص – Platform specific widgets

ویجت طرح بندی Layout widgets فلاتر

ویجت های Platform independent / basic

ویجت Text

ویجت Image

ویجت Icon

مطالب زیر را حتما مطالعه کنید

آموزش فلاتر – Flutter

ابزار توسعه فلاتر – Flutter

تبدیل اپلیکیشن فلاتر به اندروید و IOS

تست کردن در فلاتر – Flutter testing

ترجمه اپلیکیشن ها در فلاتر – Flutter

کار با دیتابیس در فلاتر -Flutter

دیدگاهتان را بنویسید لغو پاسخ