شارك المقالة

إنشاء عروض الأشجار التفاعلية باستخدام 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,
        ),
      ),
    );
  }
}
شاهد أيضًا
مقالات ذات صلة
مجموعة من الامثلة والتطبيقات على list و Dictionaries بلغة البايثون

مجموعة من الامثلة والتطبيقات على list و Dictionaries بلغة البايثون اذا كنت تبحث عن سكريبتات…

كيفية زيادة عدد العناصر مع انميشن في فلاتر | How to increase the number of items with an animation in Flutter

كيفية زيادة عدد العناصر مع انميشن في flutter في هذا المقال الذي نقدمه لكم في…

كيفيه رفع مشروعك على Github باستخدام اداة git

كيفيه رفع مشروعك على Github باستخدام اداة gitفي عصر التكنولوجيا والبرمجة، أصبح من الضروري أن…

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

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