إرسال بيانات إلى شاشة
جزء من قسم القوائم والشاشات في رحلة 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});
}
يتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس القوائم والشاشات
1قوائم قابلة للتمرير
قائمة قابلة للتمريرعناصر القائمةالبداية والنهايةاضغط على عنصر قائمةفواصل بين الصفوف6علامات التبويب والأدراج والتمرير بالسحب
علامات التبويب مع شريط تنقلأيقونات ممتلئة لعلامة التبويب المفتوحةدرج جانبياسحب للحذفالتراجع عن السحبتدرّب بنفسك: مترجم Flutter عبر الإنترنت