رفع الحالة إلى المكوّن الأب
جزء من قسم إدارة الحالة في رحلة Flutter على Coddy. الدرس 4 من 27.
اضغط على الإبهام في الهاتف: يزداد الرقم بجانبه، لكن الشريط العلوي لا يزال يعرض 0 likes. يحتفظ الزر بالعدد في State الخاص به، ولا يستطيع أي شيء آخر رؤيته.
عندما تحتاج أداتان إلى القيمة نفسها، انقلها إلى أقرب أداة تحتويهما معًا. يُسمى هذا رفع الحالة إلى الأعلى. تملك الصفحة likes، ويصبح الزر StatelessWidget يتلقى القيمة ودالة الاستدعاء:
LikeButton(
likes: likes,
onLike: () {
setState(() {
likes++;
});
},
)أصبح هناك الآن عدد واحد في مكان واحد. يقرأ الشريط العلوي والزر وزر إعادة الضبط هذه القيمة نفسها ويغيّرونها، لذا لا يمكن أن تختلف أبدًا.
اختبار سريع: إذا عُرضت قيمة أو تغيّرت في مكانين، فيجب أن تكون الأداة التي تملكها أعلى منهما معًا.
التحدي
متوسطاجعل الصفحة المالك الوحيد للإعجابات:
- حوّل
LikeButtonإلىStatelessWidgetبحقلين:likesواستدعاء رجعيonLike. - تمرّر الصفحة قيمة
likesالخاصة بها، واستدعاءonLikeالذي يضيف 1 داخلsetState.
بعد ذلك، يتبع الشريط العلوي الزر، ويعيد زر التحديث كليهما إلى الحالة الأصلية.
جرّب بنفسك
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int likes = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('$likes likes'),
actions: [
IconButton(
icon: const Icon(Icons.refresh),
onPressed: () {
setState(() {
likes = 0;
});
},
),
],
),
body: const Center(
child: LikeButton(),
),
);
}
}
class LikeButton extends StatefulWidget {
const LikeButton({super.key});
@override
State<LikeButton> createState() => _LikeButtonState();
}
class _LikeButtonState extends State<LikeButton> {
int likes = 0;
@override
Widget build(BuildContext context) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: const Icon(Icons.thumb_up),
iconSize: 40,
onPressed: () {
setState(() {
likes++;
});
},
),
Text('$likes', style: const TextStyle(fontSize: 32)),
],
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إدارة الحالة
1رفع الحالة إلى المكوّن الأب
تمرير الحالة إلى مكوّن فرعيتمرير دالة رد نداء إلى مكوّن فرعيدوال رد النداء التي ترسل قيمةرفع الحالة إلى المكوّن الأبتدرّب بنفسك: مترجم Flutter عبر الإنترنت