يعيد setState رسم الشاشة

جزء من قسم إضافة التفاعلية في رحلة Flutter على Coddy. الدرس 11 من 34.

اضغط على إضافة واحد في هذا التطبيق وراقب وحدة التحكم: 1، 2، 3. يبقى الرقم على الشاشة 0. أنشأ Flutter الشاشة مرة واحدة، ولم يُخبره أي شيء بإنشائها مجددًا.

لا يتغير StatelessWidget أبدًا. أما الشاشة التي تتغير فهي StatefulWidget، وتُكتب على شكل فئتين:

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Text('$_count');
  }
}

تحدد HomePage فقط أي State يجب إنشاؤها (createState، المكتوبة بصيغة السهم التي تعلمتها في «الدوال التي تُرجع قيمًا»). أما _HomePageState فتتولى العمل: تحتفظ ببيانات الشاشة في متغيرات في بدايتها، مثل _count، وتنشئ الشاشة. وتظل موجودة ما دامت الشاشة موجودة، لذا تحتفظ _count بقيمتها من عملية إنشاء إلى أخرى.

لتغيير الشاشة، غيّر البيانات داخل setState. فهي تخبر Flutter بأن «هذا قد تغيّر، أعد الإنشاء»، ويعرض Text الرقم الجديد:

setState(() {
  _count = _count + 1;
});

تجعل الشرطة السفلية في بداية _HomePageState و_count الاسم خاصًا: لا يمكن استخدامه إلا في هذا الملف. عادةً ما تبدأ فئات الحالة ومتغيراتها بشرطة سفلية.

التحدي

متوسط

اجعل الرقم على الشاشة يزداد بمقدار واحد عند كل ضغطة على Add one: ضع التغيير على _count داخل 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 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;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                _count = _count + 1;
                print(_count);
              },
              child: Text('Add one'),
            ),
          ],
        ),
      ),
    );
  }
}