Flutter Widget 显示嵌套树结构？答案

【问题标题】：Flutter Widget to show a nested tree structure?Flutter Widget 显示嵌套树结构？
【发布时间】：2019-03-14 13:16:19
【问题描述】：

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

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

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

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

TIA！

/史蒂夫

【问题讨论】：

你能在 Flutter 中实现树吗？如果是，请指导我。
@ZainSMJ - 不完全符合预期，但通过使用带有 ExpansionTile 的 Listview 作为子小部件，我确实得到了不错的结果。不像树那么花哨，但它确实工作得很好..
大声笑。我也这样做了:)

标签： user-interface tree treeview flutter

【解决方案1】：

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

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

示例代码

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

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

在这个例子中

Resume.docx 和 Billing-Info.docx 是 Child 小部件，documents 为 Parent。
documents、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` 的应用程序的屏幕抓取

【讨论】：

这看起来很有希望——一旦我处于适当的暂停状态，我会看看。我喜欢布局的生成方式.. 虽然在我尝试使用来自数据库源的动态数据之前我会保留判断，但我认为它应该工作得很好。嵌套级别是否有实际限制？当 5 或 6 层时，缩进会发生什么？
树视图默认不添加任何缩进。这必须单独实施。我在 GitHub 存储库中有一个示例。但目前还没有很好的记录
我也没有对此进行过广泛的测试
这方面有进展吗？
@Imaginativeone 自最初发布以来，我没有推动任何更改。试试现有版本，它应该适合一些用例

【解决方案2】：

聚会有点晚了。我也一直在寻找用于我的颤振项目的树视图结构，但我找不到任何适合我需要的结构。所以，我创建了一个包 dynamic_treeview 。它使用父级/child 关系来构建树视图。看看这是否适合你的需要。让我知道你们的想法。谢谢

【讨论】：

【解决方案3】：

有一个自定义组件可以满足您的需求：Screenshot Preview

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

【讨论】：

根本不工作 - 不符合 Dart 2 - 并且有很多相互依赖关系......但是是的......这是一个很好的启动点......

【解决方案4】：

检查flutter_simple_treeview。这是a demo。

【讨论】：

示例代码

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

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