שליחת נתונים למסך
חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 21 מתוך 33.
מסך פרטים מציג פריט אחד — זה שהקשת עליו. המסך הוא רכיב, ולכן הוא מקבל את הנתונים שלו כמו כל רכיב: דרך הבנאי שלו.
class PlanetScreen extends StatelessWidget {
const PlanetScreen({super.key, required this.planet});
final Planet planet;
...
}המסך שומר את כוכב הלכת בשדה final וקורא אותו ב-build: Text(planet.name). super.key הוא המפתח שכל רכיב יכול לקבל; השאר אותו ראשון.
במקום שבו דוחפים את המסך, מעבירים את כוכב הלכת של השורה שעליה הקישו:
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => PlanetScreen(planet: planet)),
);
},מחלקת מסך אחת מציגה עכשיו כל כוכב לכת. הרשימה קובעת איזה מהם.
אתגר
בינונימקישים על כוכב לכת כלשהו: המסך תמיד מציג את Mercury. יש להגדיר את PlanetScreen כך שיציג את כוכב הלכת שעליו הקישו:
- להוסיף לו שדה
final Planet planet;ופרמטרrequired this.planet - להציג את
planet.nameבסרגל האפליקציה שלו ואתMars has 2 moons(עם שם כוכב הלכת ומספר הירחים שלו) במרכז - להעביר את
planetשעליו הקישו בעת הניווט אליו
נסו בעצמכם
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
final List<Planet> planets = const [
Planet(name: 'Mercury', moons: 0),
Planet(name: 'Venus', moons: 0),
Planet(name: 'Earth', moons: 1),
Planet(name: 'Mars', moons: 2),
Planet(name: 'Jupiter', moons: 95),
Planet(name: 'Saturn', moons: 146),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Planets')),
body: ListView(
children: [
for (Planet planet in planets)
ListTile(
title: Text(planet.name),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const PlanetScreen()),
);
},
),
],
),
);
}
}
class PlanetScreen extends StatelessWidget {
const PlanetScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Mercury')),
body: const Center(
child: Text('Mercury has 0 moons'),
),
);
}
}
class Planet {
final String name;
final int moons;
const Planet({required this.name, required this.moons});
}
השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.
כל השיעורים ביחידה רשימות ומסכים
תרגלו בעצמכם: קומפיילר Flutter אונליין