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),
],
),
),
);
}
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה הוספת אינטראקטיביות
תרגלו בעצמכם: קומפיילר Flutter אונליין