Flutter Widget 显示嵌套的树结构？

Question

我们有一个 N 级（最大可能是 10 左右）嵌套数据结构，它基本上类似于文件夹布局..

任何级别的每个节点都是要显示的 Mime 类型或 URL ..

我的问题实际上很简单.. 是否有任何可用的 Flutter Widget 可以显示这种类型的结构——允许在任何父级别上进行常见的“打开/关闭”等？？

这似乎是股票工具箱中没有的非常基本的 UI 元素，但我没有运气找到一个..

蒂亚！

/史蒂夫

Answer 1

在过去的几周里，我一直在研究一个TreeView小部件，并提出了一个基本结构。它现在可以在pub中使用。一旦你真的知道如何去做，它就很容易了。我必须承认文档从来都不是我的强项，但如果有人对此有任何问题，只需在Github页面上添加一个问题即可。

也欢迎任何改进项目的建议。

示例代码

让我们假设这是我们要使用TreeView小部件实现的目录结构

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

在这个例子中

1. Resume.docx和Billing-Info.docx是Child将文档作为Parent.
2. 文档、MeetingReport.xls、MeetingReport.xls和Demo.zip是Child将桌面作为Parent小部件的小部件。

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

这根本不会产生任何花哨的东西。但是Text你可以传递任何复杂的小部件而不是所有的小部件，它仍然可以工作。

使用应用程序的屏幕抓取 TreeView

Answer 2

有一个自定义组件可以满足您的需要：屏幕截图预览

https://github.com/AndrewTran2018/flutter-piggy-treeview