Flutter树形列表展示插件tree_list的使用

Tree View 是一个功能强大且高度可定制的Flutter包，用于展示树形结构的数据。该插件支持声音空安全，并且是从 tree_view 包分叉而来。

安装

在您的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  tree_view: ^0.0.5

然后运行以下命令来获取依赖：

flutter packages get

示例

假设我们想要展示如下结构的树形视图：

Desktop
|-- documents
|   |-- Resume.docx
|   |-- Billing-Info.docx
|-- MeetingReport.xls
|-- MeetingReport.pdf
|-- Demo.zip

在这个例子中：

1. Resume.docx 和 Billing-Info.docx 是 documents 的子节点。
2. documents, MeetingReport.xls, MeetingReport.pdf 和 Demo.zip 都是 Desktop 的子节点。

以下是对应的 TreeView 实现代码：

var treeView = TreeView(
  parentList: [
    Parent(
      parent: Text('Desktop'),
      childList: ChildList(
        children: <Widget>[
          Parent(
            parent: Text('documents'),
            childList: ChildList(
              children: <Widget>[
                Text('Resume.docx'),
                Text('Billing-Info.docx'),
              ],
            ),
          ),
          Text('MeetingReport.xls'),
          Text('MeetingReport.pdf'),
          Text('Demo.zip'),
        ],
      ),
    ),
  ],
);

完整示例 Demo

下面是一个更完整的示例，展示了如何使用 TreeView 插件来构建一个文件系统树状结构。

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

void main() => runApp(MainApplication());

class MainApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class Document {
  final String name;
  final DateTime dateModified;
  final bool isFile;
  final List<Document> childData;

  Document({
    this.name,
    this.dateModified,
    this.isFile = false,
    this.childData = const [],
  });
}

class DirectoryWidget extends StatelessWidget {
  final String directoryName;
  final DateTime lastModified;

  DirectoryWidget({this.directoryName, this.lastModified});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(directoryName),
      subtitle: Text('Last Modified: ${lastModified.toString()}'),
    );
  }
}

class FileWidget extends StatelessWidget {
  final String fileName;
  final DateTime lastModified;

  FileWidget({this.fileName, this.lastModified});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(fileName),
      subtitle: Text('Last Modified: ${lastModified.toString()}'),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<Document> documentList = [
    Document(
      name: 'Desktop',
      dateModified: DateTime.now(),
      childData: [
        Document(name: 'Projects', dateModified: DateTime.now(), childData: [
          Document(
              name: 'flutter_app',
              dateModified: DateTime.now(),
              childData: [
                Document(
                  name: 'README.md',
                  dateModified: DateTime.now(),
                  isFile: true,
                ),
                Document(
                  name: 'pubspec.yaml',
                  dateModified: DateTime.now(),
                  isFile: true,
                ),
                // 更多文件...
              ]),
        ]),
        Document(
          name: 'test.sh',
          dateModified: DateTime.now(),
          isFile: true,
        ),
        // 更多文件和目录...
      ],
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tree View demo'),
      ),
      body: TreeView(
        startExpanded: false,
        children: _getChildList(documentList),
      ),
    );
  }

  List<Widget> _getChildList(List<Document> childDocuments) {
    return childDocuments.map((document) {
      if (!document.isFile) {
        return Container(
          margin: EdgeInsets.only(left: 8),
          child: TreeViewChild(
            parent: _getDocumentWidget(document: document),
            children: _getChildList(document.childData),
          ),
        );
      }
      return Container(
        margin: const EdgeInsets.only(left: 4.0),
        child: _getDocumentWidget(document: document),
      );
    }).toList();
  }

  Widget _getDocumentWidget({@required Document document}) =>
      document.isFile ? _getFileWidget(document: document) : _getDirectoryWidget(document: document);

  DirectoryWidget _getDirectoryWidget({@required Document document}) => DirectoryWidget(
        directoryName: document.name,
        lastModified: document.dateModified,
      );

  FileWidget _getFileWidget({@required Document document}) => FileWidget(
        fileName: document.name,
        lastModified: document.dateModified,
      );
}

此示例演示了如何创建一个包含文件和目录的树形视图，并展示了如何根据数据动态生成树形结构。