رفرفة. تبسيط تخطيط القطعة مع ملحقات دارت

في Dart 2.7 ، تم تقديمنا إلى الملحقات التي تسمح للمطورين بإضافة وظائف جديدة إلى الأنواع الموجودة. يمكن أن تكون الإضافات مساعدًا كبيرًا ليس فقط عندما نكتب منطق الأعمال ، ولكن أيضًا عندما يكون لدينا مهام أخرى! مثال على هذه المهمة هو العمل مع الحاجيات.

استنادًا إلى تجربتي في تطوير iOS ، المستوحاة من ViewModifierSwiftUI ، أردت معرفة كيفية استخدام ملحقات Dart بطريقة مماثلة لتقليل الفوضى المرئية التي تنتج عن تداخل كبير لشجرة الأداة.

لنأخذ مثالا!

الخيار مع الحاجيات المتداخلة

يوجد أدناه MyWidgetعنصر واجهة مستخدم يحتوي على نص بداخله Padding(من المثال القياسي مع dartpad.dev ).

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return
      Padding(
        padding: const EdgeInsets.all(16),
        child: Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
      );
  }
}

الآن دعونا نرى كيف يمكننا أن نفعل نفس الشيء مع ملحقات Dart.

الخيار مع ملحقات

نقوم بإنشاء ملحق للفئة Widgetباستخدام الطريقة padding. عندما يتم استدعاء هذه الطريقة ، سيتم لف الكائن في Padding:

extension WidgetModifier on Widget {
  Widget padding([EdgeInsetsGeometry value = const EdgeInsets.all(16)]) {
    return Padding(
      padding: value,
      child: this,
    );
  }
}

مع الامتداد الجديد ، يمكننا التحديث على MyWidgetالنحو التالي:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding();
  }
}

, , ! , , .

:

extension WidgetModifier on Widget {

  // ...

  Widget background(Color color) { // 
    return DecoratedBox(
      decoration: BoxDecoration(
        color: color,
      ),
      child: this,
    );
  }

  Widget cornerRadius(BorderRadiusGeometry radius) { //  
    return ClipRRect(
      borderRadius: radius,
      child: this,
    );
  }

  Widget align([AlignmentGeometry alignment = Alignment.center]) { // 
    return Align(
      alignment: alignment,
      child: this,
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!', style: Theme.of(context).textTheme.headline4)
            .padding()
            .background(Colors.lightBlue)
            .cornerRadius(BorderRadius.all(Radius.circular(8.0)))
            .padding(EdgeInsets.symmetric(horizontal: 8, vertical: 16))
            .background(Colors.purple);
  }
}

dartpad.dev

? , ! , , .

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

شكرا على انتباهك! اتمنى ان تجد هذا المنشور مفيدا إذا كان لديك أي أسئلة أو تعليقات حول هذه المواد ، فلا تتردد في الاتصال بي على Twitter !

حتى المرة القادمة!