---
title: "من بناء الواجهات بـ XML إلى الواجهات التصريحية في Flutter"
description: "الخطوة الأولى نحو الواجهات التصريحية (declarative UI) في Flutter."
canonical: https://oozou.com/ar/blog/from-creating-layout-with-xml-to-declarative-ui-in-flutter-95
locale: ar
date: 2020-08-27
author: "OOZOU Team"
---

# من بناء الواجهات بـ XML إلى الواجهات التصريحية في Flutter

> الخطوة الأولى نحو الواجهات التصريحية (declarative UI) في Flutter.

Published: 2020-08-27 · Author: OOZOU Team (Engineering) · 4 min read

منذ أن بدأت تطوير تطبيقات Android، وأنا أستخدم لغة XML لبناء واجهات التطبيق (layouts). في الواقع، كانت XML الطريقة الوحيدة لبناء الواجهات إلى أن ظهرت مكتبة Jetpack Compose، التي تستخدم لغة Kotlin لبناء الواجهات على Android بأسلوب تفاعلي (reactive). وعند الانتقال إلى Flutter، اضطررت إلى إعادة تعلّم بناء الواجهات من جديد، لأن هناك فروقًا بين بنائها بـ XML في Android الأصلي وبنائها بأسلوب تفاعلي في Flutter. لحسن الحظ، يمكن استخدام Android Studio أيضًا كمحرر لتطوير تطبيقات Flutter، فتعلّمت شيئًا جديدًا بأداة أعرفها جيدًا.

# شجرة widgets بدلًا من ملف XML

في Android، الـ View هو أساس كل ما يراه المستخدمون على شاشة التطبيق. أما في Flutter، فكل شيء مكوّن من widgets. لذلك عند بناء الشاشة، تكون لدينا شجرة widgets (widget tree) بدلًا من ملف XML. ولتوضيح ذلك بمثال، إليكم كود شاشة تحتوي على زر واحد في Flutter.
ربما لاحظتم أنني أشغّل التطبيق على محاكي iOS. إنها تجربة جديدة كليًا لمطوري Android! 😂

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

void main() => runApp(MaterialApp(home: MainPage()));

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Just one button'),
        backgroundColor: Colors.<em>indigo</em>,
      ),
      body: MyButton(),
      backgroundColor: Colors.<em>blue</em>,
    );
  }
}

class MyButton extends StatefulWidget {
  @override
  _ButtonState createState() => _ButtonState();
}

class _ButtonState extends State<MyButton> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Center(
        child: FlatButton(
          onPressed: () {
            setState(() {});
          },
          child: Text("Click me!"),
        ),
      ),
    );
  }
}
```

كما ترون، تُبنى الشاشة بتغليف widget داخل widget آخر. لإنشاء شاشة فيها زر واحد في منتصفها، لدينا هذه الـ widgets: **Scaffold** -> **Container** -> **Center** -> **FlatButton** -> **Text**. يوفر الـ widget المسمى **Scaffold** إطارًا ينفّذ التخطيط الأساسي لـ Material Design، ويتيح عرض Drawers وSnackbar وAppBar وغيرها من مكونات Material Design. في هذا المثال، يشغل الـ widget المسمى Container كل المساحة أسفل شريط الأدوات ويحدد الـ padding. ويجعل الـ widget المسمى Center ما بداخله في المنتصف. أما **FlatButton** فهو widget قابل للنقر. وأخيرًا، يضع الـ widget المسمى Text النص داخل الزر. ويوفر Android Studio اختصارًا لتغليف widget داخل آخر بسهولة.

# لا معاينة للواجهة.

عادةً عند العمل بواجهات XML، تكون لدينا معاينة بجانب كود XML لنعرف كيف سيبدو على شاشة التطبيق. بل يمكنكم سحب مكونات الـ View وإفلاتها لبناء الواجهة في نافذة المعاينة. لا يوجد شيء كهذا في Flutter. قبل أن أبدأ مع Flutter، كان غياب المعاينة من أكثر ما يقلقني في كتابة الواجهات بالأسلوب التصريحي. لكن من يحتاج إلى معاينة حين يمكنه رؤية التغيير على جهاز حقيقي فور تعديل الكود بفضل ميزة hot reload؟ في Flutter، تنقل ميزة hot reload التغيير إلى الجهاز الحقيقي فور حفظ الكود. ولا تعمل إلا حين تكون التغييرات في شجرة الـ widgets. أما إن كان التغيير في مورد مثل الصور أو الخطوط، فلا تزالون بحاجة إلى إعادة تشغيل التطبيق.

# موارد الصور والخطوط.

يجب ربط مجلدي الصور والخطوط بملف pubspec.yaml، كي يعرف إطار عمل Flutter من أين يجلب الأصول (assets). ملف pubspec.yaml هو ملف بيانات وصفية (metadata)، وأقرب ما يقابله في Android ملف Gradle على مستوى التطبيق. يعلن هذا الملف اسم الحزمة والإصدار والمؤلف وغير ذلك.

# الخلاصة

هذه أبرز الفروق التي لاحظتها خلال فترة قصيرة من العمل مع Flutter. يجب أن أعترف بأنني أحب فكرة hot reload، لكنني لم أعتد بعد على بناء الشاشة بشجرة الـ widgets. عمومًا، أستمتع كثيرًا بتعلّم Flutter.

---

Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/ar/contact

More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"