محمد پوربافرانی
محمد پوربافرانی
خواندن ۲ دقیقه·۲ سال پیش

آشنایی با state management(مدیریت وضعیت) StatefulWidget در فلاتر

در Flutter، هر برنامه شامل وضعیت‌هایی است که می‌توانند تغییر کنند و در نتیجه باعث تغییر در رابط کاربری شود. به طور مثال، فرض کنید که شما یک اپلیکیشن تحت وب دارید که در آن کاربران می‌توانند به یک لیست پست‌های بلاگرها دسترسی داشته باشند. اگر یکی از این پست‌ها را باز کنید، نظرات کاربران به صورت دینامیک در بخش نظرات باید نمایش داده شود. در اینجا، وضعیت نظرات، یک مثال از وضعیت‌هایی است که ممکن است در یک برنامه Flutter تغییر کند.

در این نوع مدیریت وضعیت برای مدیریت وضعیت‌ها از setState استفاده می‌شود. وقتی که یک وضعیت تغییر می‌کند، setState فراخوانی می‌شود و سپس Flutter به صورت خودکار رابط کاربری را بازسازی می‌کند و این عمل به این معنی است که درخت widget با تمام فرزندانش از نو بازسازی میشوند تا تغییرات جدیدی که ایجاد شده‌اند، در صفحه نمایش نشان داده شوند.
خب از همین اقدام setstate می شود نتیجه گرفت که این نوع مدیریت وضعیت مناسب اپلیکیشن های با درخت widget کوچک می باشد چون باز سازی آن ها زمان کمتری نیاز دارد و زیاد در پرفورمنس برنامه تاثیر بسزایی ندارد.به طور کلی، استفاده از setState به این شکل است که شما باید وضعیت جدیدی را ایجاد کنید و سپس آن را به عنوان ورودی به setState بدهید تا رابط کاربری مجددا بازسازی شود. به عنوان مثال، فرض کنید که شما یک پروژه Flutter دارید که دارای یک دکمه است و هر بار که این دکمه فشار داده می‌شود، یک متن به عنوان وضعیت جدید نمایش داده می‌شود. کد زیر نشان می‌دهد که چگونه setState می‌تواند برای این منظور استفاده شود:


import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _displayText = 'Initial Text';
void _changeText() {
setState(() {
_displayText = 'New Text';
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Example App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
_displayText,
style: TextStyle(fontSize: 20),
),
RaisedButton(
child: Text('Change Text'),
onPressed: _changeText,
)
],
),
),
),
);
}
}


در این کد، یک وضعیت displayText_ به عنوان متن اولیه مشخص شده است. همچنین یک دکمه وجود دارد که هر بار که فشار داده می‌شود، متن displayText_ به "New Text" تغییر می‌کند. این تغییر در وضعیت با استفاده از setState صورت می‌گیرد.

به طور خلاصه، setState یک روش برای تغییر وضعیت‌ها در Flutter است. با استفاده از setState، می‌توانید وضعیت جدید را ایجاد کرده و رابط کاربری را مجدداً بازسازی کنید تا تغییرات جدیدی که ایجاد شده‌اند، در صفحه نمایش نشان داده شوند.

statefulwidgetflutterstate managementsetstateرابط کاربری
شاید از این پست‌ها خوشتان بیاید