Flutter macOS树形视图插件macos_tree_view的使用

macos_tree_view

macOS风格的树形视图组件。

🛠️ 安装

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  macos_tree_view: ^0.3.0

❓ 为什么需要另一个树形视图？

• 高性能：无论树形结构有多深，都能保持良好的性能。
• 完全控制：提供了 TreeViewController 来完全控制树形视图。

🎉 大力感谢

感谢这些优秀的公司支持开源开发者 ❤

📄 许可证

MIT

版权所有 © 2022-present, SianLoong Lee

示例代码

以下是一个完整的示例代码，展示如何使用 macos_tree_view 插件创建一个树形视图。

示例代码：example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:macos_tree_view/macos_tree_view.dart';
import 'package:uuid/uuid.dart';

class Test {
  String name;
  List<Test> children;

  Test({required this.name, required this.children});
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TabPage(),
    );
  }
}

class TabPage extends StatefulWidget {
  const TabPage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> with SingleTickerProviderStateMixin {
  late TreeViewController<String> _treeViewController;
  late TabController _controller;
  late TextEditingController _textEditingController;

  List<Node<String>> nodes = [
    Node.fromLabel('Label A', key: const Key('a')),
    Node.fromLabel('Label B', key: const Key('b'), children: [
      Node.fromLabel('B1', key: const Key('b1'), children: [
        Node.fromLabel('B1.1', key: const Key('b1.1')),
        Node.fromLabel('B1.2', key: const Key('b1.2')),
        Node.fromLabel('B1.3', key: const Key('b1.3')),
      ]),
      Node.fromLabel('B2', key: const Key('b2')),
      Node.fromLabel('B3', key: const Key('b3')),
    ]),
    Node(
      key: const Key('c'),
      label: 'Label C (expandable)',
      expanded: false,
      data: '1',
      children: [
        Node.fromLabel('Label C.A', key: const Key('ca')),
        Node.fromLabel('Label C.B', key: const Key('cb')),
        Node(
          key: const Key('c.c'),
          label: 'Label C.C (expandable)',
          expanded: false,
          data: '1',
          children: [
            Node.fromLabel('Label C.C.A', key: const Key('c.c.a')),
            Node.fromLabel('Label C.C.B', key: const Key('c.c.b')),
            Node.fromLabel('Label C.C.C', key: const Key('c.c.c')),
            Node.fromLabel('Label C.C.D', key: const Key('c.c.d')),
            Node.fromLabel('Label C.C.E', key: const Key('c.c.e')),
          ],
        ),
      ],
    ),
    Node.fromLabel('Label D', key: const Key('d')),
    Node.fromLabel('Label E', key: const Key('e')),
    Node(
      label: 'Label Z',
      key: const Key('z'),
      children: [
        Node.fromLabel('Label Z.A', key: const Key('za')),
      ],
    ),
  ];

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化数据
    final List<Node<String>> iRow = [];
    for (var i = 0; i < 100; i++) {
      var uuid1 = const Uuid();
      final List<Node<String>> jRow = [];
      for (var j = 0; j < 100; j++) {
        var uuid2 = const Uuid();
        jRow.add(Node.fromLabel('$uuid2'));
      }
      iRow.add(Node.fromLabel('$uuid1', children: jRow));
    }

    nodes.addAll(iRow);

    _textEditingController = TextEditingController(text: 'hello');
    _treeViewController = TreeViewController(
      selectedValues: {const Key('z')},
      children: nodes,
    );

    _controller = TabController(vsync: this, length: 2);

    _delay();
  }

  Future<void> _delay() async {
    const duration = Duration(seconds: 2);

    await Future.delayed(duration);
    print('============= addNode `jk`! =================');
    _treeViewController.addNode(Node.fromLabel('Batman & Joker'));
    _treeViewController.addNode(
        Node.fromLabel('This is a very very long labelllllllllllllllllll!'));

    await Future.delayed(duration);
    print('============= addNode "z"! =================');
    _treeViewController.addNode(Node.fromLabel('Junkai'));
    _treeViewController.addNode(
        Node.fromLabel('z clone', key: const Key('z.clone')),
        parent: const Key('z'),
        mode: InsertMode.prepend);
    print('============= addNode "nested deep c"! =================');
    _treeViewController.addNode(
        Node.fromLabel('Nested Deep C', key: const Key('nested.deepc')),
        parent: const Key('c.c.c'));
    _treeViewController.addNode(
        Node.fromLabel('z clone (prepend)', key: const Key('z.clone.p')),
        parent: const Key('z'),
        mode: InsertMode.prepend);

    await Future.delayed(duration);
    print('============= remove node "b"! =================');
    _treeViewController.removeNode(const Key('b'));
  }

  [@override](/user/override)
  void dispose() {
    _treeViewController.dispose();
    _controller.dispose();
    super.dispose();
  }

  void _handleRightClick(_, details) {
    print('onNodeSecondaryTapUp!');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Tab'),
        bottom: TabBar(
          controller: _controller,
          tabs: const [
            Tab(icon: Icon(Icons.laptop_mac)),
            Tab(icon: Icon(Icons.desktop_mac)),
          ],
        ),
      ),
      body: TabBarView(
        controller: _controller,
        children: [
          Row(
            children: [
              Expanded(
                child: Container(
                  decoration: const BoxDecoration(color: Colors.blue),
                  child: TreeView<String>(
                    controller: _treeViewController,
                    onNodeTap: (key) {
                      print('onTap 1 => $key');
                    },
                    onNodeSecondaryTapUp: _handleRightClick,
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  decoration: const BoxDecoration(color: Colors.green),
                  child: TreeView<String>(
                    controller: _treeViewController,
                    onNodeSecondaryTapUp: _handleRightClick,
                  ),
                ),
              ),
            ],
          ),
          Center(
            child: Column(children: [
              TextField(controller: _textEditingController),
              const Text('desktop'),
            ]),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_treeViewController.selectionMode == SelectionMode.single) {
            _treeViewController.selectionMode = SelectionMode.multiple;
          } else {
            _treeViewController.selectionMode = SelectionMode.single;
          }
        },
        child: Text('Toggle mode (${_treeViewController.selectionMode})'),
      ),
    );
  }
}