titleController.text = widget.post.title; لماذا نستخدم كلمة widget هنا
هذه من أكثر النقاط التي تسبب حيرة للمبتدئين في Flutter.
لننظر أولاً إلى الكود:
class EditPostPage extends StatefulWidget {
final PostModel post;
const EditPostPage({
super.key,
required this.post,
});
@override
State<EditPostPage> createState() =>
_EditPostPageState();
}هنا المتغير:
postموجود داخل:
EditPostPageوليس داخل:
_EditPostPageStateماذا يحدث عند فتح الصفحة؟
عندما نكتب:
EditPostPage(
post: post,
)يتم إنشاء Widget جديدة.
هذه الـ Widget تحتوي:
final PostModel post;ثم ماذا؟
Flutter تنشئ State خاص بها:
_EditPostPageStateأصبح لدينا كائنان مختلفان:
الكائن الأول
EditPostPageويحتوي:
postالكائن الثاني
_EditPostPageStateويحتوي:
titleController
bodyController
isLoadingالمشكلة
داخل State نحاول الوصول إلى:
postلكن:
postغير موجودة داخل State.
هذا خطأ:
titleController.text =
post.title;لأن State لا تملك متغيراً اسمه post.
كيف أصل للـ Widget من داخل State؟
Flutter توفر متغيراً جاهزاً اسمه:
widgetهذا المتغير يشير إلى:
EditPostPageالحالية.
لذلك:
widget.postتعني:
أعطني post الموجودة داخل EditPostPageصورة ذهنية
تخيل:
EditPostPage
│
├── post
│
└── _EditPostPageState
│
├── titleController
├── bodyController
└── isLoadingعندما يكون State بحاجة للوصول إلى:
postفهو يصعد إلى Widget:
widget.postمثال أبسط
class UserPage extends StatefulWidget {
final String name;
const UserPage({
required this.name,
});
@override
State<UserPage> createState() =>
_UserPageState();
}داخل State:
class _UserPageState
extends State<UserPage> {
@override
void initState() {
super.initState();
print(widget.name);
}
}هنا:
widget.nameتعني:
UserPage.nameلماذا لا نكتب this.post ؟
لأن:
thisتشير إلى:
_EditPostPageStateوليس إلى:
EditPostPageمثال:
print(this.runtimeType);سيطبع:
_EditPostPageStateأما:
widget.runtimeTypeسيطبع:
EditPostPageقاعدة ذهبية
داخل:
StatefulWidgetأي متغير مرسل عبر Constructor مثل:
final PostModel post;يتم الوصول إليه داخل State بواسطة:
widget.postوليس:
postوليس:
this.postلذلك هذا السطر:
titleController.text =
widget.post.title;معناه حرفياً:
خذ عنوان المنشور الموجود داخل EditPostPage
وضعه داخل TextField عند فتح الصفحة.