شارك المقالة

إنشاء عروض الأشجار التفاعلية باستخدام fancy_tree_view في Flutter


إنشاء عروض الأشجار التفاعلية باستخدام fancy_tree_view في Flutter

تُبسط مكتبة flutter_fancy_tree_view إنشاء عروض الأشجار التفاعلية (المعروفة أيضًا باسم واجهات المستخدم الهيكلية) داخل تطبيقات Flutter الخاصة بك.


الميزات الرئيسية:

تمثيل العقدة: يتم تمثيل كل عنصر في الشجرة بكائن FancyTreeNode. يمكنك تخصيص مظهر العقدة باستخدام خصائص مثل:

  1. title: النص المعروض للعقدة.
  2. leadingWidget: عنصر واجهة مستخدم يتم عرضه في بداية العقدة (غالبًا ما يكون رمزًا).
  3. trailingWidget: عنصر واجهة مستخدم يتم عرضه في نهاية العقدة (غالبًا ما يستخدم لوظيفة التوسيع / الانهيار).
  4. children: قائمة بالعقد الفرعية، مما يشكل التسلسل الهرمي.
  5. سلوك التوسيع / الانهيار: يمكن توسيع العقد أو انهيارها لكشف أو إخفاء أطفالها. استخدم خاصية expanded لـ FancyTreeNode للتحكم في حالتها الأولية وتوفير آليات للتفاعل مع المستخدم (على سبيل المثال، إيماءات النقر).
  6. التخصيص: خيّط مظهر ووظائف عرض الشجرة من خلال خصائص مثل:
  7. theme: كائن سمة مخصص يحدد الألوان والخطوط وغيرها من الجوانب المرئية.
  8. showExpansionButtons: تحكم في عرض أزرار توسيع / انهيار العقد.
  9. collapseIcon: الرمز المعروض للعقد المنهارة.
  10. expandIcon: الرمز المعروض للعقد المتوسعة.
  11. الاختيار: اسمح للمستخدمين باختيار العقد باستخدام خاصية selectedNodes لـ FancyTreeView widget. تعامل مع أحداث الاختيار بشكل فعال لتوفير الإجراءات أو التعليقات ذات الصلة.


التثبيت:

أضف السطر التالي إلى ملف pubspec.yaml الخاص بك:



الاستيراد:

استيراد المكتبة في كود Dart الخاص بك:


import ‘package:flutter_fancy_tree_view/flutter_fancy_tree_view.dart’;


الاستخدام الأساسي:

قم بإنشاء عنصر واجهة مستخدم FancyTreeView وقم بتوفير قائمة من كائنات FancyTreeNode تمثل بنية الشجرة الخاصة بك:


index.dart
List<FancyTreeNode> _treeNodes = [
  FancyTreeNode(
    title: 'العقدة الجذرية',
    children: [
      FancyTreeNode(title: 'العقدة الفرعية 1'),
      FancyTreeNode(
        title: 'العقدة الفرعية 2',
        children: [
          FancyTreeNode(title: 'العقدة الفرعية'),
        ],
      ),
    ],
  ),
];

FancyTreeView(
  nodes: _treeNodes,
);

مثال (مستكشف نظام الملفات):

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

class FileNode {
  final String name;
  final bool isDirectory;
  final List<FileNode> children;

  FileNode(this.name, [this.isDirectory = false, this.children = const []]);
}

class FileSystemExplorer extends StatelessWidget {
  final TreeController<FileNode> controller = TreeController<FileNode>(
    roots: [
      FileNode(
        'الصفحة الرئيسية',
        true,
        [
          FileNode('المستندات'),
          FileNode(
            'الصور',
            true,
            [
              FileNode('Image1.jpg'),
              FileNode('Image2.png'),
            ],
          ),
        ],
      ),
    ],
    childrenProvider: (node) => node.children,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('مستعرض الملفات')),
      body: FancyTreeView<FileNode>(
        treeController: controller,
        builder: (context, node) {
          return ListTile(
            leading: Icon(
              node.isDirectory ? Icons.folder : Icons.insert_drive_file,
              color: node.isDirectory ? Colors.orange : Colors.grey,
            ),
            title: Text(node.name),
          );
        },
        theme: FancyTreeTheme(
          expansionIndicator: Icon(Icons.arrow_drop_down),
          collapseIndicator: Icon(Icons.arrow_right),
          connectorLineColor: Colors.grey.shade300,
          verticalSpacing: 4,
        ),
      ),
    );
  }
}
شاهد أيضًا
مقالات ذات صلة
كود برنامج جافا لطباعة كلمه تبدء بنهاية اخر حرف من الكلمه السابقة – Print a word that begins with the end of the previous word Java Code

كود برنامج جافا (java code) لطباعة كلمه تبدء بنهاية اخر حرف من الكلمه متابعي الموقع…

التاكد من وجود doc في Flutter بإستخدام الفايربيز

التاكد من وجود doc في Flutter بإستخدام الفايربيز هذا الدرس يعتبر قريب جدا من الدرس…

تصميم صفحة لاضافة الاشخاص داخل تطبيقك في فلاتر | Designing a page to add people within an application in Flutter

تصميم صفحة لاضافة الاشخاص داخل تطبيقك في فلاتر | Designing a page to add people within…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع