0

ویجت Stack و ویژگی ها آن با مثال

 

فلاتر به ویجت ها بستگی دارد. به طور عمده ، Flutter به عنوان یک چارچوب توسعه front  معرفی می شود در حالی که ساختمان اصلی Widgets است. بنابراین شما باید دانش گسترده ای در مورد ویجت ها جمع‌آوری کنید از اهمیت بیشتری برخوردار است. در این مقاله ، من قصد دارم در مورد Stack Widget در Flutter با مثالهایی صحبت کنم.

stack ویجتی است که شامل بسیاری از ویجت های دیگر است. در اینجا ، ویجت ها با هم همپوشانی دارند و هر زمان که بخواهد نمایش می دهند. همه ابزارک ها از پایین به بالا به طور معمول در ساختار داده های stack قرار می گیرند. به همین ترتیب می توانیم از ابزارک های CustomMultiChildLayout و CustomSingleChildLayout برای دستیابی به همان نتیجه استفاده کنیم. ما می توانیم Stack ایجاد کنیم و از خصوصیات آنها به شرح زیر استفاده کنیم.

ویجت ها در داخل ویجت statck میتوانندبه دو سورت قرار بگیرند  positioned and non-positioned. (موقعیتی و غیر موقعیتی).

عناصر موقعیت دار به همان شکلی که هستند مرتب می شوند و عناصر غیر موقعیت دار معمولاً در بالای چپ stack قرار می گیرند. ابتدا ، نحوه رفتار اساسی یک  ویجت stack را بررسی می کنیم.

مثال 1

در اینجا می توانید سه کانتینر (container) بدون موقعیت را در داخل Stack مشاهده کنید. و نتیجه تصویر را به صورت زیر نشان می دهد.

 

 

 

import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatefulWidget {
 @override
 _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 appBar: AppBar(
 title: Text('Flutter - Stack Widget'),
 ),
 body: Container(
 child: Stack(
 children: <Widget>[
 Container(
 width: 100,
 height: 100,
 color: Colors.red,
 ),
 Container(
 width: 90,
 height: 90,
 color: Colors.green,
 ),
 Container(
 width: 80,
 height: 80,
 color: Colors.blue,
 ),
 ],
 )),
 ),
 );
 }
}

 

خروجی کدهای بالا

 ویژگی های Stack Widget

 

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

Stack({
 Key key,
 this.alignment = AlignmentDirectional.topStart,
 this.textDirection,
 this.fit = StackFit.loose,
 this.overflow = Overflow.clip,
 this.clipBehavior = Clip.hardEdge,
 List<Widget> children = const <Widget>[],
}

پنج ویژگی برای برسی ویجت stack در فلاتر وجود دارد

  1. alignment
  2. textDirection
  3. fit
  4. overflow
  5. clipBehavior

alignment

این ویژگی برای تعریف موقعیت عناصر موجود استفاده می شود. مقدار پیش فرض topStart است. مقادیر دیگر در اینجا نشان داده می شوند:

topLeft - The top left corner. //بالا سمت چپ
topCenter - The center point along the top edge.//بالا وسط
topRight - The top right corner.//بالا راست
centerLeft - The center point along the left edge.//وسط سمت چپ
center - The center point, both horizontally and vertically.//وسط
centerRight - The center point along the right edge.//وسط سمت راست
bottomLeft - The bottom left corner.//پایین سمت چپ

textDirection

جهت متن به عنوان ltr (چپ به راست) یا rtl (راست به چپ)  است.

fit

برای تعیین نحوه تغییر اندازه عناصر غیر موقعیتی متناسب با stack استفاده خواهد شد. سه ویژگی از این ویژگی وجود دارد: loose ، expand و passthrough.

  • loose: اندازه ویجت child را کوچک و همانطور که اندازه اصلی است تنظیم کنید
  • expand: اندازه children را تا حد ممکن گسترش دهید
  • passthrough: ابزارک child براساس موقعیت والدین در یک موقعیت نسبی تنظیم می شود

overflow

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

clipBehaviour

این ویژگی تعیین می کند که آیا محتوا کوتاه شود یا خیر.

Positioned

این یک عنصر دیگر به جای یک ویژگی است که می توانیم از آن در داخل Stack استفاده کنیم. می توانیم موقعیت عنصر را در داخل Stack تعیین کنیم.

 

Positioned(
 top: 50,
 left: 50,
 child: Container(
 width: 50,
 height: 50,
 color: Colors.blue,
 ),
)

مثال دوم

در این مثال از خصوصیات ویجت stack و Positioned در داخل ویجت استفاده شده است. تصویر کد مثال زیر را توضیح می دهد.

child: Stack(
 alignment: Alignment.topCenter,
 fit: StackFit.passthrough,
 clipBehavior: Clip.antiAliasWithSaveLayer,
 overflow: Overflow.visible,
 children: <Widget>[
 new Text(
 'Here is a Text Field at the bottom',
 style: new TextStyle(
 fontSize: 20.0,
 fontFamily: 'Roboto',
 color: Colors.black,
 )
 ),
 Container(
 width: 100,
 height: 100,
 color: Colors.red,
 ),
 Container(
 width: 90,
 height: 90,
 color: Colors.green,
 ),
 Container(
 width: 50,
 height: 50,
 color: Colors.yellow,
 ),
 Positioned(
 top: 50,
 left: 50,
 child: Container(
 width: 50,
 height: 50,
 color: Colors.blue,
 ),
 ),
 ],
)

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *