setState מצייר מחדש את המסך

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 11 מתוך 34.

לחץ/י על Add one באפליקציה הזאת וצפה/י במסוף: 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, שנכתב בצורת החץ מתוך Functions That Return Values). _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'),
            ),
          ],
        ),
      ),
    );
  }
}