در 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
، میتوانید وضعیت جدید را ایجاد کرده و رابط کاربری را مجدداً بازسازی کنید تا تغییرات جدیدی که ایجاد شدهاند، در صفحه نمایش نشان داده شوند.