شارك المقالة
إنشاء عروض الأشجار التفاعلية باستخدام fancy tree view في Flutter

إنشاء عروض الأشجار التفاعلية باستخدام 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,
        ),
      ),
    );
  }
}


لمزيد من المقالات : إضافة أيقونة متعددة الخصائص مع أنيميشن باستخدام Flare في Flutter
شاهد أيضًا
مقالات ذات صلة
كيفية اضافة اكثر من لغة للتطبيق وحفظها في shared باستخدام اكواد اندرويد ستوديو

  كيفية اضافة اكثر من لغة للتطبيق وحفظها في shared باستخدام اكواد اندرويد ستوديومن اكثر…

كود برنامج بلغة الجافا يقوم بطباعة النجوم بشكل هرمي – print stars in java
كود برنامج بلغة الجافا يقوم بطباعة النجوم بشكل هرمي – print stars in java

اكتب برنامج بلغة الجافا يقوم بطباعة النجوم بشكل هرمي – print out stars in language java…

شرح كيفية استخدام binarySearch في Dart لتسهيل عملية البحث داخل list
شرح كيفية استخدام binarySearch في Dart لتسهيل عملية البحث داخل list

شرح كيفية استخدام binarySearch في Dart لتسهيل عملية البحث داخل listخوارزمية binarySearch  من اكثر الخوارزميات…

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

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