web-dev-qa-db-ja.com

ネストされたツリー構造を表示するためのフラッターウィジェット？

基本的にフォルダレイアウトに似たNレベル（最大はおそらく約10程度）のネストされたデータ構造があります。

任意のレベルの各ノードは、表示するもののMimeタイプまたはURLです。

私の質問は実際には非常に単純です..このタイプの構造を表示できる利用可能なFluterウィジェットはありますか？任意の親レベルでの一般的な「開閉」などを許可しますか？

これは、ストックツールボックスにはないかなり基本的なUI要素のようですが、私はそれを見つけることができませんでした。

TIA！

/スティーブ

user-interfacetreetreeviewflutter
4
sjmcdowall

過去数週間、私はTreeViewウィジェットに取り組んでおり、基本的な構造を考え出しました。 pub で使用できるようになりました。あなたが本当にそれをする方法を知っていれば、それに取り組むことは十分に簡単です。ドキュメントが私の強みではなかったことを認めなければなりませんが、誰かがこれに問題がある場合は、 Github ページに問題を追加してください。

プロジェクトを改善するための提案も歓迎します。

サンプルコード

これがTreeViewウィジェットを使用して実装したいディレクトリ構造であると仮定しましょう

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

この例では

  1. Resume.docxおよびBilling-Info.docxはChildウィジェットdocumentsをParentとして使用します。
  2. 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を使用したアプリケーションのスクリーンショット

3
Ajil O.

パーティーに少し遅れました。フラッタープロジェクトに使用するツリービュー構造も探していましたが、ニーズに合ったものが見つかりませんでした。そこで、パッケージを作成しました dynamic_treeview 。ツリービューを構築するための親子関係これがあなたのニーズに合っているかどうかを確認してくださいあなたたちがどう思うか教えてくださいありがとう

3
Infimate

必要なことを実行するカスタムコンポーネントがあります： スクリーンショットプレビュー

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

0
DoO37