By using this site, you agree to the Privacy Policy and Terms of Use.
موافق
عرب فلاترعرب فلاتر
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
قراءة: ما هو الفرق بين MVC و MVVM في فلاتر؟
شارك
تسجيل الدخول
إشعار أظهر المزيد
Aa
عرب فلاترعرب فلاتر
Aa
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
Search

أقسام الموقع

استكشف جميع أقسام الموقع
قسم Dart في موقع عرب فلاتر

Dart

59 مقالات
قسم Widgets في موقع عرب فلاتر

Widgets

104 مقالات
قسم Packages في موقع عرب فلاتر

Packages

19 مقالات
قسم Tutorials في موقع عرب فلاتر

Tutorials

22 مقالات

أخر المواضيع

استكشف أخر المواضيع المنشورة
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

17
لديك حساب موجود؟ تسجيل الدخول
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
عرب فلاتر > Tutorials > ما هو الفرق بين MVC و MVVM في فلاتر؟
Tutorials

ما هو الفرق بين MVC و MVVM في فلاتر؟

عبدالله يوسف
أخر تحديث 2024/11/15
بواسطة عبدالله يوسف اضف تعليق 8 دقيقة للقراءة 3258 مشاهدات 2
شارك
الفرق بين MVC و MVVM في فلاتر
الفرق بين MVC و MVVM في فلاتر
شارك

خدماتنا البرمجية – عرب فلاتر🚀

خدماتنا البرمجية – عرب فلاتر

إذا سألت عددًا من الأشخاص عن الاختلاف بين MVC (Model-View-Controller) و MVVM (Model-View-ViewModel) فستحصل على الأقل على آراء مختلفة حول الفرق بينهم. ولكن كيف يجب على الطالب أو المبرمج الطموح أو المتحمسين لتعلم تقنية فلاتر فهم هذا الموضوع، حتى لو كان الخبراء يجدون صعوبة في توضيح الفرق؟

المحتويات
بعض المعلومات العامة عن MVC و MVVMشرح نمط MVVMشرح نمط MVCمثال بسيط: تطبيق العدادالكود باستخدام نمط MVCالكود باستخدام نمط MVVM

في هذه المقالة، سـأجعلك تفهم الفرق بين MVVM و MVC من خلال شرح كلا النموذجين وإعطائك تطبيقًا لكلا النموذجين في فلاتر Flutter.


بعض المعلومات العامة عن MVC و MVVM

MVVM و MVC كلاهما من أنماط بناء الأكواد المستخدمة في تطوير البرمجيات. ترشدك هذه الأنماط إلى كيفية هيكلة الكود الخاص بك وكيفية فصل مستويات مختلفة من الاهتمام مثل واجهة المستخدم (UI) ومنطق العمل.

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

على الرغم من أن العرض View والنموذج Model لهما مسؤوليات متشابهة في كلا النموذجين MVC و MVVM، إلا أن هناك اختلافًا جوهريًا في كيفية تفاعلهما.

“اقرأ أيضاً: شرح استخدام ويدجت Container في فلاتر“


شرح نمط MVVM

شرح نمط MVVM
ما هو الفرق بين MVC و MVVM في فلاتر؟ 11

في MVVM، يرتبط العرض View بنموذج ViewModel، وهو تمثيل لحالة العرض View، ويكون ViewModel مرتبطًا بالنموذج Model. يتم تحديث طريقة العرض نفسها بناءً على التغييرات التي تم إجراؤها على ViewModel، بدلاً من تحديث النموذج مباشرةً. يعمل ViewModel كوسيط بين العرض والنموذج ، وهو مسؤول عن تنسيق تدفق البيانات بين الاثنين. يعد ViewModel مسؤولاً عن الاحتفاظ بحالة العرض وسلوك العرض والمنطق الذي يتفاعل مع النموذج. كما أنه مسؤول عن ترجمة البيانات من النموذج إلى تنسيق يمكن للعرض فهمه.

يضمن ربط البيانات (Data binding) بين العرض والنموذج مزامنة البيانات بينهما. لهذا، يمكن استخدام نمط المراقب (observer pattern) الذي يقوم بإخطار العرض عندما يتغير النموذج. علاوة على ذلك، يمكن للعرض أيضًا إخطار ViewModel عندما يتفاعل معه المستخدم. يسمح هذا لـ ViewModel بتحديث النموذج، وبالتالي العرض.

“اقرأ أيضاً: شرح استخدام TabBar و TabBarView في فلاتر“


شرح نمط MVC

شرح نمط MVC
ما هو الفرق بين MVC و MVVM في فلاتر؟ 12

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

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

“اقرأ أيضاً: شرح استخدام ويدجت Stack في فلاتر“


مثال بسيط: تطبيق العداد

تطبيق العداد باستخدام MVC و MVVM في فلاتر
ما هو الفرق بين MVC و MVVM في فلاتر؟ 13

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

“اقرأ أيضاً: شرح استخدام ويدجت RadioListTile في فلاتر“

الكود باستخدام نمط MVC

يوضح الكود التالي تنفيذ تطبيق العداد لـ MVC. يبدأ التطبيق في العرض View حيث يتم تشغيل أحد الزرين من خلال onPressed وتعني عند الضغط (1). بعد ذلك، تستدعي وحدة التحكم Controller الدالة function  المسؤولة عن الزيادة المناسبة للنموذج (2). أخيرًا، يقوم النموذج Model بتحديث نفسه (3) ثم يقوم بإعلام العرض View لتحديث واجهة المستخدم (4).

توضح المستندات الأصلية لـ MVC أن مدخلات المستخدم يتم استلامها مباشرة بواسطة وحدة التحكمController. في Flutter، لا يمكن تلقي المدخلات مباشرة على وحدة تحكم، ولكن فقط من خلال طريقة العرض View. يتم تقليد السلوك المماثل من خلال تفويض الإدخال المباشر من العرض إلى وحدة التحكم بوظيفتها الخاصة لكل إدخال ممكن.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final myModel = MyModel();
  MyApp({super.key});

  @override
  Widget build(context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyView(
        model: myModel,
        controller: MyController(model: myModel),
      ),
    );
  }
}

class MyModel with ChangeNotifier {
  int _counter = 0;
  int get counter => _counter;

  void incrementCounter(int increment) {
    _counter += increment;
    notifyListeners();
  }
}

class MyView extends StatelessWidget {
  final MyController controller;
  final MyModel model;

  const MyView({super.key, required this.controller, required this.model});

  @override
  Widget build(context) {
    return ChangeNotifierProvider<MyModel>(
      create: (_) => model,
      builder: (_, __) => Consumer<MyModel>(
        builder: (_, model, __) => Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Counter: ${model.counter}'),
                TextButton(
                  onPressed: controller.onButtonIncrement1Pressed,
                  child: const Text('Increment by 1'),
                ),
                TextButton(
                  onPressed: controller.onButtonIncrement2Pressed,
                  child: const Text('Increment by 2'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class MyController {
  final MyModel model;

  MyController({required this.model});

  void onButtonIncrement1Pressed() {
    model.incrementCounter(1);
  }

  void onButtonIncrement2Pressed() {
    model.incrementCounter( 2);
  }
}

الكود باستخدام نمط MVVM

في نمط MVVM، يتم تسجيل إدخال المستخدم بواسطة طريقة العرض View. تستدعي طريقة العرض الدالة المناسبة في ViewModel (1). ثم يقوم ViewModel باستدعاء الدالة function  المسؤولة عن الزيادة المناسبة للنموذج (2). بعد ذلك ، يقوم ViewModel بإخطار جميع المستمعين listeners (3). تقوم طريقة العرض بتحديث نفسها لأن قيمة النموذج يتم تمريرها إليها من خلال ViewModel (4).

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(context) {
    return MaterialApp(
      home: MyView(viewModel: MyViewModel(model: MyModel())),
    );
  }
}

class MyModel {
  int _counter = 0;
  int get counter => _counter;

  void incrementCounter(int increment) {
    _counter += increment;
  }
}

class MyView extends StatelessWidget {
  final MyViewModel viewModel;

  const MyView({super.key, required this.viewModel});

  @override
  Widget build(context) {
    return ChangeNotifierProvider(
      create: (_) => viewModel,
      child: Consumer<MyViewModel>(
        builder: (_, viewModel, __) => Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Counter: ${viewModel.counter}'),
                TextButton(
                  onPressed: () => viewModel.incrementCounter(1),
                  child: const Text('Increment by 1'),
                ),
                TextButton(
                  onPressed: () => viewModel.incrementCounter(2),
                  child: const Text('Increment by 2'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class MyViewModel with ChangeNotifier {
  final MyModel model;
  int get counter => model.counter;

  MyViewModel({required this.model});

  void incrementCounter(int increment) {
    model.incrementCounter(increment);
    notifyListeners();
  }
}

“اقرأ أيضاً: شرح استخدام ويدجت AnimatedCrossFade في فلاتر“


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

علاوة على ذلك، تجدر الإشارة إلى أن MVVM و MVC لا يستبعدان بعضهما البعض بالضرورة. إذا كنت مهتمًا بالحفر بشكل أعمق، فإنني أوصي بالقراءة عن MVCVM. نهج يجمع بين النموذج Model والعرض View والتحكم Controller ونموذج العرض ViewModel ولكن لن يتم شرح ذلك هنا.

Arab Flutter Community 🚀

انضم إلى مجتمع Arab Flutter
شارك هذا المقال
فيسبوك تويتر Whatsapp Whatsapp لينكد ان تلغرام نسخ الرابط
Avatar of عبدالله يوسف
بواسطة عبدالله يوسف Founder and CEO at ArabFlutter
تابع:
أنا عبدالله يوسف، مهندس مصري ومؤسس موقع عرب فلاتر، ملهم بشغف التكنولوجيا والإبداع. كمصمم مواقع ومبرمج تطبيقات موبايل باستخدام Flutter، أستمتع بخلق عوالم رقمية فريدة ومبتكرة. تتجلى مواهبي في تصميم وتطوير واجهات مستخدم تفاعلية، حيث يمزج الجانب الجمالي بالدقة الهندسية. ما يميزني هو إلمامي الواسع بتقنيات البرمجة والتصميم، ومقدرتي على تطوير تطبيقات متنوعة عبر منصات مختلفة. أعتبر نفسي مبدعًا وملتزمًا، حيث أسعى دائمًا لتحقيق تحسين مستمر في مهاراتي وتقنياتي. أستمتع بتحديات العمل الجماعي وأؤمن بأهمية الابتكار والتطور. بفضل إبداعي والتزامي، أسعى لتقديم حلول فعّالة تلبي توقعات العملاء وتفوق عن المألوف.
اترك تعليقا اترك تعليقا

اترك تعليقاً إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials
طريقة انشاء المجلدات باستخدام Dart
طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا
Tutorials

مقالات ذات الصلة

اطلع على المزيد من المقالات المتعلقة بهذا الموضوع!
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

17
طريقة انشاء المجلدات باستخدام Dart
Tutorials

طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا

11
خطة لاحتراف تطوير التطبيقات باستخدام Flutter في 60 يوم
Tutorials

خطة لاحتراف تطوير التطبيقات باستخدام Flutter في 60 يوم

17
10 تمارين محلولة على لغة دارت Dart الجزء السادس 2024
Tutorials

10 تمارين محلولة على لغة دارت Dart الجزء السادس 2024

4
أظهر المزيد
شعار موقع عرب فلاتر شعار موقع عرب فلاتر

About US

Quick Links

  • خدماتنا
  • من نحن
  • اتصل بنا
  • اتفاقية استخدام
  • سياسة الخصوصية
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
adbanner
تم اكتشاف مانع إعلانات
مرحبًا، يرجى إيقاف مانع الإعلانات. الإعلانات تُساهم في دعم موقعنا وتغطية جزء من تكاليف الاستضافة وتطوير المحتوى. شكرًا لتفهمك ودعمك.
Okay, I'll Whitelist
Welcome Back!

Sign in to your account

هل نسيت كلمة المرور؟