آموزش طرح بندی در برنامه نویسی فلاتر
آموزش طرح بندی در برنامه نویسی فلاتر
از آنجا که مفهوم اصلی برنامه نویسی فلاتر این است که همه چیز ویجت است، فلاتر از قابلیت طرح بندی رابط کاربری در خود ویجت ها استفاده می کند. فلاتر بسیاری از ویجت های خاص مانند Container ، Center ، Align و غیره را فقط با هدف تعیین رابط کاربری ارائه می دهد. ویجت ها با ترکیب سایر ویجت ها ساخته می شوند که معمولاً از ویجت های طرح بندی استفاده می کنند. اجازه دهید از مفهوم طرح بندی در برنامه نویسی فلاتر در این درس از آموزش های برنامه نویسی سایت سورس باران استفاده کنید.
انوع ویجت های طرح بندی برنامه نویسی فلاتر
ابزارک های طرح بندی را می توان بر اساس فرزند خود به دو دسته مجزا تقسیم کرد –
- ویجت پشتیبانی از تک فرزند (Widget supporting a single child)
- ویجت پشتیبانی از چند فرزند (Widget supporting multiple child)
ویجت های تک فرزند
در این دسته، ویجت ها فقط یک ویجت به عنوان فرزند خود دارند و هر ویجت از ویژگی طرح خاصی برخوردار است.
به عنوان مثال، ویجت Center فقط ویجت کودک را با توجه به ویجت والد خود متمرکز می کند و ابزارک Container انعطاف پذیری کامل را برای قرار دادن کودک در هر مکان خاصی در داخل آن با استفاده از گزینه های مختلف مانند بالشتک، دکوراسیون و غیره فراهم می کند ،
ویجت های تک فرزند گزینه های خوبی برای ایجاد ویجت با کیفیت بالا با قابلیت های تک مانند دکمه، تگ و غیره هستند ،
کد ایجاد یک دکمه ساده با استفاده از ابزارک Container به شرح زیر است:
class MyButton extends StatelessWidget {
MyButton({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
left: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
right: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
bottom: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
),
),
child: Container(
padding: const
EdgeInsets.symmetric(horizontal: 20.0, vertical: 2.0),
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)),
left: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)),
right: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)),
bottom: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)),
),
color: Colors.grey,
),
child: const Text(
'OK',textAlign: TextAlign.center, style: TextStyle(color: Colors.black)
),
),
);
}
}
در اینجا، ما از دو ویجت استفاده کرده ایم – یک ویجت Container و یک ویجت Text. نتیجه ویجت به عنوان یک دکمه سفارشی است که در زیر نشان داده شده است
بیایید برخی از مهمترین ویجت های طرح کودک را که توسط فلاتر ارائه شده است بررسی کنیم:
Padding – برای ترتیب دادن ویجت کودک با استفاده از padding داده شده استفاده می شود. در اینجا می توان padding را از کلاس EdgeInsets تهیه کرد.
Align – ابزارک فرزند خود را با استفاده از مقدار ویژگی تراز در داخل خود تراز کنید. مقدار برای ویژگی Align را می توان از کلاس FactionalOffset تهیه کرد. کلاس FactionalOffset از نظر فاصله از بالا سمت چپ مشخص می کند.
برخی از مقادیر احتمالی offset ها به شرح زیر است:
- (FactionalOffset (1.0 ، ۰٫۰ نمایانگر بالا سمت راست است.
- (FactionalOffset (0.0 ، ۱٫۰ نمایانگر پایین سمت چپ است.
در زیر یک کد نمونه در مورد جبران ها نشان داده شده است
Center(
child: Container(
height: 100.0,
width: 100.0,
color: Colors.yellow, child: Align(
alignment: FractionalOffset(0.2, 0.6),
child: Container( height: 40.0, width:
۴۰٫۰, color: Colors.red,
),
),
),
)
- FittedBox – ویجت کودک را مقیاس بندی می کند و سپس آن را مطابق با تناسب مشخص شده قرار می دهد.
- AspectRatio – سعی می کند ابزارک کودک را به نسبت ابعادی مشخص شده اندازه کند
- ConstrainedBox
- Baseline
- FractinallySizedBox
- IntrinsicHeight
- IntrinsicWidth
- LiimitedBox
- OffStage
- OverflowBox
- SizedBox
- SizedOverflowBox
- Transform
- CustomSingleChildLayout
برنامه hello world از ویجت های طرح بندی متریال برای طراحی صفحه اصلی استفاده می کند. اجازه دهید برنامه hello world را برای ساختن صفحه اصلی با استفاده از ویجت های طرح بندی اولیه که در زیر مشخص شده است ، اصلاح کنیم –
Generic, single child, box based container widget with alignment, padding, border and margin –Containerبه همراه ویژگی های یک ظاهر طراحی غنی.
Center – ویجت Single child container، که ویجت فرزند خود را در مرکز خود قرار می دهد.
کد اصلاح شده ویجت MyHomePage و MyApp به شرح زیر است
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MyHomePage(title: "Hello World demo app");
}
}
class MyHomePage extends StatelessWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: Colors.white,),
padding: EdgeInsets.all(25), child: Center(
child:Text(
'Hello World', style: TextStyle(
color: Colors.black, letterSpacing: 0.5, fontSize: 20,
),
textDirection: TextDirection.ltr,
),
)
);
}
}
ویجت Container بالاترین سطح قرار دارد. ویجت Container با استفاده از خاصیت decoration و خاصیت padding برای طرح بندی محتوای آن پیکربندی شده است.
BoxDecoration دارای خواص زیادی مانند رنگ، حاشیه و غیره است ، برای تزئین ویجت Container و در اینجا، رنگ برای تنظیم رنگ ظرف استفاده می شود.
padding از ویجتContainer با استفاده از کلاس dgeInsets تنظیم می شود، که گزینه تعیین مقدار padding را فراهم می کند.
Center ویجت کودک از ویجت Container است. باز هم، متن فرزند ویجت Center است. متن برای نشان دادن پیام و Center برای مرکزیت پیام متنی با توجه به ویجت والد، از Container استفاده می شود.
نتیجه نهایی کد داده شده در بالا یک نمونه طرح است که در زیر نشان داده شده است –
ویجت چند فرزندی
در این دسته، یک ویجت مشخص بیش از یک ویجت کودک خواهد داشت و طرح بندی هر ویجت منحصر به فرد است.
به عنوان مثال، ویجت Row اجازه می دهد تا فرزندان خود را در جهت افقی قرار دهیم، در حالی که ویجت Column اجازه می دهد تا فرزندان خود را در جهت عمودی قرار دهد. با ترکیب سطر و ستون، ویجت با هر سطح از پیچیدگی می تواند ساخته شود.
اجازه دهید برخی از ویجت های متداول در این بخش را بیاموزیم.
- Row – اجازه می دهد تا فرزندان خود را به صورت افقی مرتب کند.
- Column– اجازه می دهد تا فرزندان خود را به روشی عمودی مرتب کند.
- ListView – اجازه می دهد تا فرزندان خود را به عنوان لیست مرتب کند.
- GridView – اجازه می دهد تا کودکان خود را به عنوان گالری مرتب کند.
- Expanded – برای ایجاد ویجت ردیف و ستون برای استفاده از حداکثر سطح ممکن استفاده می شود.
- Table – ویجت مبتنی بر جدول.
- Flow – ویجت مبتنی بر جریان.
- Stack – ویجت مبتنی بر پشته.
برنامه چیدمان پیشرفته
در این بخش، می آموزیم که چگونه یک رابط کاربری پیچیده از لیست محصولات با طراحی سفارشی با استفاده از هر دو ویجت single Child widget و multiple widget ایجاد کنیم.
برای این منظور، توالی زیر را دنبال کنید –
- یک برنامه فلاتر جدید در Android studio ، product_layout_app ایجاد کنید.
- کد main.dart را با کد زیر جایگزین کنید:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo', theme: ThemeData(
primarySwatch: Colors.blue,),
home: MyHomePage(title: 'Product layout demo home page'),
);
}
}
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', )),
);
}
}
ویجت MyHomePage را با گسترش StatelessWidget به جای StatefulWidget پیش فرض ایجاد کرده و کد مربوطه را حذف کرده ایم.
اکنون، با توجه به طراحی مشخص شده در زیر ، یک ویجت جدید، ProductBox ایجاد کنید.
کد ProductBox به شرح زیر است
class ProductBox extends StatelessWidget {
ProductBox({Key key, this.name, this.description, this.price, this.image})
: super(key: key);
final String name;
final String description;
final int price;
final String image;
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(2), height: 120, child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[
Image.asset("assets/appimages/" +image), Expanded(
child: Container(
padding: EdgeInsets.all(5), child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(this.name, style: TextStyle(fontWeight:
FontWeight.bold)), Text(this.description),
Text("Price: " + this.price.toString()),
],
)
)
)
]
)
)
);
}
}
لطفا موارد زیر را در کد مشاهده کنید:
ProductBox از چهار آرگومان استفاده کرده است که در زیر مشخص شده است –
- name – نام محصول
- description – توضیحات محصول
- price- قیمت محصول
- image – تصویر محصول
ProductBox از هفت ویجت داخلی استفاده می کند که در زیر مشخص شده است –
- Container
- Expanded
- Row
- Column
- Card
- Text
- Image
ProductBox با استفاده از ویجت فوق الذکر طراحی شده است. ترتیب یا سلسله مراتب ویجت در نمودار نشان داده شده در زیر مشخص شده است –
اکنون، برای ساختن اطلاعات مربوط به محصول، برخی از تصاویر ساختگی (زیر را مشاهده کنید) قرار دهید و پوشه assets را در فایل pubspec.yaml پیکربندی کنید، همانطور که در زیر نشان داده شده است
assets: - assets/appimages/floppy.png - assets/appimages/iphone.png - assets/appimages/laptop.png - assets/appimages/pendrive.png - assets/appimages/pixel.png - assets/appimages/tablet.png
سرانجام ، از ابزارک ProductBox در ابزارک MyHomePage همانطور که در زیر مشخص شده استفاده کنید –
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("Product Listing")),
body: ListView(
shrinkWrap: true, padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),
children: <Widget> [
ProductBox(
name: "iPhone",
description: "iPhone is the stylist phone ever",
price: 1000,
image: "iphone.png"
),
ProductBox(
name: "Pixel",
description: "Pixel is the most featureful phone ever",
price: 800,
image: "pixel.png"
),
ProductBox(
name: "Laptop",
description: "Laptop is most productive development tool",
price: 2000,
image: "laptop.png"
),
ProductBox(
name: "Tablet",
description: "Tablet is the most useful device ever for meeting",
price: 1500,
image: "tablet.png"
),
ProductBox(
name: "Pendrive",
description: "Pendrive is useful storage medium",
price: 100,
image: "pendrive.png"
),
ProductBox(
name: "Floppy Drive",
description: "Floppy drive is useful rescue storage medium",
price: 20,
image: "floppy.png"
),
],
)
);
}
}
- در اینجا ، ما از ProductBox به عنوان فرزندان ویجت ListView استفاده کرده ایم.
- کد کامل (main.dart) برنامه طرح بندی محصول (product_layout_app) به شرح زیر است:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo', theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Product layout demo home page'),
);
}
}
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("Product Listing")),
body: ListView(
shrinkWrap: true,
padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),
children: <Widget>[
ProductBox(
name: "iPhone",
description: "iPhone is the stylist phone ever",
price: 1000,
image: "iphone.png"
),
ProductBox(
name: "Pixel",
description: "Pixel is the most featureful phone ever",
price: 800,
image: "pixel.png"
),
ProductBox(
name: "Laptop",
description: "Laptop is most productive development tool",
price: 2000,
image: "laptop.png"
),
ProductBox(
name: "Tablet",
description: "Tablet is the most useful device ever for meeting",
price: 1500,
image: "tablet.png"
),
ProductBox(
name: "Pendrive",
description: "Pendrive is useful storage medium",
price: 100,
image: "pendrive.png"
),
ProductBox(
name: "Floppy Drive",
description: "Floppy drive is useful rescue storage medium",
price: 20,
image: "floppy.png"
),
],
)
);
}
}
class ProductBox extends StatelessWidget {
ProductBox({Key key, this.name, this.description, this.price, this.image}) :
super(key: key);
final String name;
final String description;
final int price;
final String image;
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(2),
height: 120,
child: Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Image.asset("assets/appimages/" + image),
Expanded(
child: Container(
padding: EdgeInsets.all(5),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
this.name, style: TextStyle(
fontWeight: FontWeight.bold
)
),
Text(this.description), Text(
"Price: " + this.price.toString()
),
],
)
)
)
]
)
)
);
}
}
خروجی نهایی برنامه به شرح زیر است
لیست جلسات قبل آموزش برنامه نویسی فلاتر
.svg)
دیدگاه شما