Flidter Widget для отображения вложенной древовидной структуры?

Question

У нас есть вложенная структура данных уровня N (макс., Вероятно, около 10 или около того), которая в основном напоминает макет папки.

Каждый узел на любом уровне представляет собой тип Mime для отображения или URL-адреса...

Мой вопрос на самом деле очень прост ... есть ли какой-нибудь доступный виджет Fluter, который может отображать этот тип структуры - допускающий обычное "открытие / закрытие" на любом родительском уровне и т. Д. ??

Кажется, что это довольно фундаментальный элемент пользовательского интерфейса, которого не было в наборе инструментов, но мне не повезло найти его ..

TIA!

/ Steve

Answer 1

За последние несколько недель я работал над виджетом TreeView и придумал базовую структуру.Теперь он доступен в pub для использования.Работать над ним достаточно легко, если вы действительно знаете, как это сделать.Я должен признать, что документация никогда не была моей сильной стороной, но если у кого-то есть какие-то проблемы с этим, просто добавьте проблему на странице Github .

Любые предложения по улучшению проектатакже приветствуются.

Пример кода

Предположим, что это структура каталогов, которую мы хотим реализовать с помощью TreeView widget

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 виджетами с Desktop как виджет 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