كيفية التعامل مع الملاحة في تطبيقاتك Flutter

Flutter هو منتج من منتجات Google يستخدم لإنشاء تطبيقات جوال مختلطة مع Dart كلغة ترميز.

صفحة التطبيق في Flutter هي عنصر واجهة مستخدم ، وهو وصف لواجهة المستخدم التي تم تصويرها. لإنشاء تطبيق مشروع ، تحتاج إلى العديد من هذه الصفحات ، مع عرض العديد من الميزات. كل شيء على ما يرام وبعد إنشاء صفحة جديدة. ولكن ، كيف تتحرك بينهما؟

بسيط للغاية: يمكنك استخدام Navigator Class ، يحمل في ثناياه عوامل في Flutter SDK.

ملاح

Navigator هو أداة أخرى تعمل على إدارة صفحات التطبيق بتنسيق يشبه المكدس. تسمى الصفحات ذات الشاشة الكاملة الطرق عند استخدامها في المستكشف. يعمل المستكشف مثل تطبيق المكدس العادي. لأنه يأتي مع طريقتين معروفتين ، الدفع والبوب.

  1. الدفع: يتم استخدام طريقة الدفع لإضافة مسار آخر إلى أعلى المكدس الحالي. يتم عرض الصفحة الجديدة على الصفحة السابقة.
  2. Pop: نظرًا لأن Navigator يعمل ككد ، فإنه يستخدم مبدأ LIFO (Last-In ، First-Out). طريقة البوب ​​تزيل المسار الأعلى من المكدس. هذا يعرض الصفحة السابقة للمستخدم.

في هذا المنشور ، سأعرض:

  1. طريقتان للملاحة و
  2. تمرير البيانات إلى الصفحة التالية.

الملاحة العادية.

هناك طريقتان للقيام بذلك:

إنشاء صفحة جديدة ضمن طريقة الدفع

في هذه الطريقة ، يتم إنشاء مسار جديد باستخدام فئة MaterialPageRoute. يتم إنشاء صفحة جديدة (القطعة) داخلها. يتم تضمين عبارات الإنشاء هذه في طريقة الدفع وإضافة هذه الصفحة إلى أعلى الحزمة.

لعرض مثال بسيط ، أنا أستخدم رمزًا من إعادة نشر ونشر مدونة سابقة. قمت بتحريره لتضمين زر على مكون CustomCard. يستخدم هذا الزر طريقة الدفع ، في حين يتم إنشاء المسار والصفحة الجديدة داخلها.

إنشاء عنصر واجهة المستخدم (سياق BuildContext) {
  بطاقة العودة (
    الطفل: العمود (
      الأطفال:  [
        النص ('فهرس بطاقة الدولار') ،
        FlatButton (
          تابع: نص ("اضغط علي") ،
          onPressed: () {
            Navigator.push (السياق ، MaterialPageRoute  (
              المنشئ: (سياق BuildContext) {
                عودة سقالة (
                  appBar: AppBar (title: Text ('صفحتي')) ،
                  الجسم: المركز (
                    الطفل: FlatButton (
                      تابع: نص ("POP") ،
                      onPressed: () {
                        Navigator.pop (السياق).
                      }،
                    )،
                  )،
                )؛
              }،
            ))؛
          })،
    ]،
  ))؛
}

أضف طرقًا إلى نقطة دخول التطبيقات

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

لذلك ، في الطريقة الثانية ، يتم إنشاء الصفحة مرة واحدة ولكن تتم إضافتها كمسار في نقطة إدخال التطبيق ، main.dart. تتم تسمية هذه المسارات مثل مسارات الملفات نظرًا لأن الصفحة الرئيسية للتطبيق هي المسار /.

يمكنك أولاً إنشاء صفحة تطبيق جديدة ، مثل ذلك:

الفئة الثانية يمتد StatelessWidget {
@تجاوز
  إنشاء عنصر واجهة المستخدم (سياق BuildContext) {
    عودة سقالة (
      appBar: AppBar (
        العنوان: نص ("الصفحة الثانية") ،
      )،
      الجسم: المركز (
        الطفل: RaisedButton (
          تابع: نص ("الرجوع إلى الشاشة الرئيسية") ،
          اللون: Theme.of (السياق) .primaryColor ،
          لون النص: الألوان.
          onPressed: () => Navigator.pop (سياق)) ،
      )،
    )؛
  }
}

بعد ذلك ، قم باستيراد الصفحة الجديدة في ملف main.dart وأضفها إلى قائمة المسارات داخل مُنشئ MaterialApp.

الطبقة MyApp يمتد StatelessWidget {
// هذه القطعة هي جذر تطبيقك.
  @تجاوز
  إنشاء عنصر واجهة المستخدم (سياق BuildContext) {
    عودة MaterialApp (
      العنوان: "عرض الرفرفة" ،
      موضوع: ThemeData (
        الأساسيالساعة: Colors.green ،
      )،
      home: MyHomePage (title: 'Flutter Demo Home Page') ،
      طرق: <سلسلة ، WidgetBuilder> {
        '/ a': (سياق بنية المحتوى) => الصفحة الثانية () ،
      })؛
  }
}

ثم نقوم بتحرير طريقة onPressed من FlatButton في CustomCard إلى هذا:

Navigator.pushNamed (السياق ، '/ a') ؛

في المثال أعلاه ، يتم إعادة توجيه المستخدم إلى فئة SecondPage التي تم إنشاؤها لأنها الصفحة المقابلة للمسار / a.

تمرير البيانات بين الصفحات

الآن بالنسبة للجزء الأخير من العرض التوضيحي ، قم بتمرير البيانات إلى الصفحة التالية. يتطلب القيام بذلك بطريقة سهلة مزيجًا من كل من طرق التنقل المذكورة أعلاه.

يمكن استخدام كل من pushNamed وإنشاء مسار جديد داخل طريقة الدفع لتمرير البيانات إلى الصفحة الجديدة. لهذا الأخير ، لا يلزم إنشاء صفحة جديدة. سيتم الآن استدعاء المعلمة منشئ MaterialPageRoute مُنشئ فئة SecondPage.

قم بتحديث فئة SecondPage لقبول البيانات التي يتم تمريرها إليها ، مثل:

الفئة الثانية يمتد StatelessWidget {
SecondPage ({@ required this.title}) ؛
اللقب النهائي
@تجاوز
  إنشاء عنصر واجهة المستخدم (سياق BuildContext) {
    عودة سقالة (
      appBar: AppBar (
        العنوان: نص ('بطاقة رقم $ title') ،
      )،
      الجسم: المركز (...) ،
    )؛
  }
}

يتم الآن تحرير أسلوب FlatButtons 'onPressed إلى:

Navigator.push (السياق ،
  MaterialPageRoute (
    builder: (context) => SecondPage (title: index)
  )
)؛

أو هذا:

Navigator.pushNamed (السياق ، '/ a' ،
  الوسائط: <سلسلة ، سلسلة> {
    'title': index + ""،
  }،
)؛

يتم تمرير فهرس البطاقة الآن إلى الفئة SecondPage ، ويتم عرضه في AppBar.

شكرا للقراءة! يمكنك العثور على الريبو ، هنا.

ابحث عن الالتزام بالتغييرات التالية ، هنا.