Menu
CoddyTech
flag Ar iconالعربيةdown icon

يحافظ 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.

challenge icon

التحدي

سهل
  • اجعل حجم الرقم 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),
          ],
        ),
      ),
    );
  }
}
quiz iconاختبر نفسك

يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.

جميع دروس إضافة التفاعلية

تدرّب بنفسك: مترجم Flutter عبر الإنترنت