Flutter树形视图展示插件mika_treeview的使用

简介

mika_treeview 是一个基于 flutter_simple_treeview 的Flutter树形视图插件，增加了多个有用的功能。以下是该插件的主要特性：

• 支持自定义空树时显示的Widget。
• 单选或多选节点。
• 支持按字母顺序排序树节点。
• 提供搜索功能。
• 可以在每个节点后添加额外的小部件（如按钮或菜单）。

开始使用

添加依赖

首先，在您的 pubspec.yaml 文件中添加 mika_treeview 作为依赖项：

dependencies:
  mika_treeview: ^0.1.0

然后，在您的 .dart 文件中导入：

import 'package:mika_treeview/mika_treeview.dart';

使用示例

数据结构

树形数据需要以 List<Map<String, dynamic>> 的形式提供。例如：

Tree tree = [
  {
    'id': '1',
    'name': 'Sales',
  },
  {
    'id': '2',
    'name': 'Accounting',
    'children': [
      {'id': '5', 'name': 'Payroll'},
      {'id': '3', 'name': 'Accounts Payable'},
      {'id': '4', 'name': 'Accounts Receivable'},
    ]
  },
  {
    'id': '6',
    'name': 'Manufacturing',
    'children': [
      {
        'id': '7',
        'name': 'Product Design',
        'children': [
          {'id': '8', 'name': 'Research & Development'}
        ],
      },
    ]
  },
];

完整示例代码

下面是一个完整的示例应用，展示了如何使用 mika_treeview 插件，并包含了一些交互选项如单选/多选、是否可搜索等。

import 'package:flutter/material.dart';
import 'package:mika_treeview/mika_treeview.dart';

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

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TreeController _controller = TreeController(allNodesExpanded: true);
  SelectMode selectMode = SelectMode.single;
  bool includesTrailing = true;
  bool isSorted = true;
  bool isSearchable = true;

  final Tree tree = Tree(
    nodes: [
      Node(id: '1', name: 'Sales'),
      Node(
        id: '2',
        name: 'Accounting',
        children: [
          Node(id: '5', name: 'Payroll'),
          Node(id: '3', name: 'Accounts Payable'),
          Node(id: '4', name: 'Accounts Receivable'),
        ],
      ),
      Node(
        id: '6',
        name: 'Manufacturing',
        children: [
          Node(
            id: '7',
            name: 'Product Design',
            children: [Node(id: '8', name: 'Research & Development')],
          ),
        ],
      ),
    ],
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: ListView(
          children: [
            ListTile(
              title: const Text('Select Mode'),
              trailing: DropdownButton<SelectMode>(
                value: selectMode,
                items: SelectMode.values.map((e) {
                  return DropdownMenuItem<SelectMode>(
                    value: e,
                    child: Text(e.toString()),
                  );
                }).toList(),
                onChanged: (v) {
                  setState(() {
                    selectMode = v!;
                  });
                },
              ),
            ),
            SwitchListTile(
              title: const Text('Searchable'),
              value: isSearchable,
              onChanged: (v) {
                setState(() {
                  isSearchable = v;
                });
              },
            ),
            SwitchListTile(
              title: const Text('Include Trailing'),
              value: includesTrailing,
              onChanged: (v) {
                setState(() {
                  includesTrailing = v;
                });
              },
            ),
            SwitchListTile(
              title: const Text('Sorted'),
              value: isSorted,
              onChanged: (v) {
                setState(() {
                  isSorted = v;
                });
              },
            ),
            ButtonBar(
              children: <Widget>[
                OutlinedButton(
                  style: OutlinedButton.styleFrom(
                    padding: const EdgeInsets.all(15.0),
                    textStyle: const TextStyle(fontSize: 16),
                  ),
                  onPressed: () => setState(() {
                    _controller.expandAll();
                  }),
                  child: const Text('Expand All'),
                ),
                OutlinedButton(
                  style: OutlinedButton.styleFrom(
                    padding: const EdgeInsets.all(15.0),
                    textStyle: const TextStyle(fontSize: 16),
                  ),
                  onPressed: () => setState(() {
                    _controller.collapseAll();
                  }),
                  child: const Text('Collapse All'),
                ),
              ],
            ),
            const SizedBox(height: 40.0),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50.0),
              child: TreeView(
                tree: tree,
                treeController: _controller,
                selectMode: selectMode,
                values: const {},
                onChanged: (v) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Selected: $v'),
                      duration: const Duration(seconds: 3),
                    ),
                  );
                },
                emptyTreeNotice: const EmptyTreeNotice(),
                trailingBuilder: includesTrailing ? _trailingBuilder : null,
                isSearchable: isSearchable,
                isSorted: isSorted,
                indent: 20.0,
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _trailingBuilder(Node node) {
    return PopupMenuButton(
      itemBuilder: (context) => [
        const PopupMenuItem(
          child: Text('Add'),
          value: Action.add,
        ),
        const PopupMenuItem(
          child: Text('Edit'),
          value: Action.edit,
        ),
        PopupMenuItem(
          child: const Text('Delete'),
          value: Action.delete,
          enabled: (node.children == null),
          textStyle: const TextStyle().copyWith(color: Colors.red),
        ),
      ],
      tooltip: 'Actions',
      onSelected: (v) {
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text('Action: $v, Item: {${node.id}}'),
          duration: const Duration(seconds: 3),
        ));
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 50.0),
      child: Column(
        children: [
          Icon(
            Icons.account_tree_outlined,
            size: 150.0,
            color: theme.primaryColorLight,
          ),
          const SizedBox(height: 10.0),
          Text(
            'Nothing to show here...',
            style: TextStyle(fontSize: 18.0, color: theme.primaryColorLight),
          ),
          const SizedBox(height: 20.0),
          OutlinedButton(
            style: OutlinedButton.styleFrom(
              foregroundColor: theme.colorScheme.onPrimary,
              backgroundColor: theme.primaryColor,
            ),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Action ${Action.add}, Item: {}'),
                duration: const Duration(seconds: 3),
              ));
            },
            child: const Text('Add An Item'),
          ),
        ],
      ),
    );
  }
}

enum Action { add, edit, delete }