يحافظ Hot Reload على الحالة
جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 14 من 34.
توجد في المعاينة طريقتان لتطبيق تغييراتك. يبدأ Run تشغيل التطبيق من البداية. ويستبدل Hot reload التعليمات البرمجية الجديدة بينما يظل التطبيق قيد التشغيل، ويحافظ على الحالة: يظل العداد محتفظًا برقمه.
جرّب ذلك: اضغط على زر الجمع بضع مرات، وغيّر لون الرقم، ثم اضغط على Hot reload. سيظهر اللون الجديد، وسيظل العدد كما هو. وأثناء تنسيق شاشة، يوفر عليك ذلك النقر مرارًا للعودة إلى الموضع الذي كنت فيه.
يعيد Hot reload بناء الشاشة باستخدام التعليمات البرمجية الجديدة، لكنه لا ينشئ حالة جديدة. لذلك، لا يظهر تغيير القيمة الابتدائية، مثل التغيير من int _count = 0; إلى int _count = 10;، لأن هذا السطر لا يعمل إلا عند إنشاء الحالة. اضغط على Run لرؤية التغيير.
وينطبق الأمر نفسه على main، وعلى تحويل StatelessWidget إلى StatefulWidget. عندما لا يظهر تغيير بعد Hot reload، اضغط على Run.
التحدي
سهل- اجعل حجم الرقم
64ولونهColors.deepPurple. اضغط زر الجمع بضع مرات أولًا، ثم استخدم إعادة التحميل السريع ولاحظ بقاء العدد كما هو. - اجعل العداد يبدأ من
10. لاحظ أن إعادة التحميل السريع لا تعرض ذلك، بينما يعرضه التشغيل.
جرّب بنفسك
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _count = 0;
void _increase() {
setState(() {
_count++;
});
}
void _decrease() {
setState(() {
_count--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter')),
body: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
Text('$_count', style: TextStyle(fontSize: 48)),
IconButton(icon: Icon(Icons.add), onPressed: _increase),
],
),
),
);
}
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس إضافة التفاعلية
1الأزرار
زرّك الأولالطباعة في وحدة التحكمالأزرار النصية والمحددة بإطارأزرار الأيقوناتزر الإجراء العائم7مفاتيح التبديل وشرائح التمرير
التشغيل والإيقاف باستخدام مفتاححدّد مربع الاختياراختر قيمة باستخدام شريط التمرير3عناصر واجهة ذات حالة
صنف Widget خاص بكعرض SnackBarيعيد setState رسم الشاشةاكتب StatefulWidgetعدّاد تصاعدي وتنازلييحافظ Hot Reload على الحالةتدرّب بنفسك: مترجم Flutter عبر الإنترنت