Kodokon kodokon.com

التنقّل بين الشاشات باستخدام Navigator

ادفع الشاشات وأزلها باستخدام Navigator.push وpop، ومرِّر البيانات عبر البواني، واسترجع نتيجة عند إغلاق الشاشة.

8 دقيقة · 3 أسئلة

افتح هذا الدرس في Kodokon

يدير Flutter شاشاتك على شكل مكدّس (stack): يضع Navigator.push شاشة جديدة في الأعلى، ويزيل Navigator.pop الشاشة العليا ويكشف الشاشة السابقة. كل شاشة هي مسار (route)، ويوفر MaterialPageRoute الانتقال الأصلي للمنصّة. ويستدعي زر الرجوع في أندرويد pop نيابةً عنك، دون سطر واحد من الكود.

DART
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: FilledButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) {
                  return const DetailScreen(
                    productName: 'Headphones',
                  );
                },
              ),
            );
          },
          child: const Text('View product'),
        ),
      ),
    );
  }
}
يدفع push شاشة DetailScreen (المُعرَّفة أدناه) فوق الشاشة الحالية.

لتمرير البيانات إلى الشاشة التالية، لا توجد آلية سحرية: فشاشة الوجهة ويدجت مثل أيّ ويدجت آخر، وهي تتلقّى بياناتها عبر بانيها. إن ذلك مُنمَّط وصريح، ويُمسك بك المُترجِم إذا نقص حقل. لاحظ أن AppBar الخاص بالشاشة المدفوعة يعرض زر الرجوع دون أن تكتب أيّ شيء.

DART
import 'package:flutter/material.dart';

class DetailScreen extends StatelessWidget {
  const DetailScreen({
    super.key,
    required this.productName,
  });

  final String productName;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(productName)),
      body: Center(
        child: FilledButton(
          onPressed: () {
            Navigator.pop(context, true);
          },
          child: const Text('Add to cart'),
        ),
      ),
    );
  }
}
يُغلق pop الشاشة ويُرجِع قيمة إلى المُستدعي.

يُرجِع Navigator.push كائن Future يكتمل عند إغلاق الشاشة، حاملًا القيمة المُمرَّرة إلى pop. لذا يمكنك انتظار نتيجة شاشة: تأكيد، أو عنصر مُختار من قائمة، أو نموذج مملوء. ويوثّق النوع العام push<bool> ما تتوقّع استرجاعه.

DART
import 'package:flutter/material.dart';

Future<void> openDetail(BuildContext context) async {
  final added = await Navigator.push<bool>(
    context,
    MaterialPageRoute<bool>(
      builder: (context) {
        return const DetailScreen(
          productName: 'Headphones',
        );
      },
    ),
  );
  if (!context.mounted) return;
  final message = (added ?? false)
      ? 'Product added to cart'
      : 'No product added';
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text(message)),
  );
}
يكتمل كائن Future الخاص بـ push عند إغلاق الشاشة.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

  1. كيف يُنظِّم Navigator الشاشات؟
    • على شكل طابور: أول داخل، أول معروض
    • على شكل مكدّس: تُعرَض آخر شاشة مدفوعة في الأعلى
    • على شكل شجرة ويدجات متوازية
    • على شكل شبكة من الشاشات
  2. ما الطريقة المتعارَف عليها لتمرير البيانات إلى الشاشة التالية؟
    • عبر متغير عام
    • عبر باني ويدجت الوجهة
    • بكتابتها على القرص
    • لا يسمح Navigator بتمرير البيانات
  3. ماذا يفعل Navigator.pop(context, true)؟
    • يفتح شاشة جديدة اسمها "true"
    • يُغلق كل الشاشات في المكدّس
    • يُغلق الشاشة الحالية ويُرجِع true إلى استدعاء push المنتظِر