Flutter框架中用40行代码实现自定义树形视图

Android

2024-01-06 14:55:56

Flutter 中构建树形视图：使用 40 行代码轻松呈现复杂数据

数据组织对于构建易于理解和交互的应用程序至关重要，而树形结构是实现这一目标的常见选择。Flutter 作为一个功能强大的跨平台框架，提供了广泛的工具，可以简化创建自定义树形视图的任务。

树形结构的理解

树形结构由节点组成，每个节点代表数据的一个部分，并可以具有子节点，形成层级关系。在 Flutter 中，Node 对象表示树中的单个节点，包含数据、子节点和其他相关信息。

NodeWidget 组件

NodeWidget 组件负责可视化 Node 对象。它渲染节点的数据并处理用户交互，例如展开和折叠子节点。

使用 NodeWidget

使用 NodeWidget 组件创建树形视图涉及以下步骤：

创建 Node 对象，包含要显示的数据和子节点。
创建 NodeWidget，并设置其 node 属性为创建的 Node 对象。
将 NodeWidget 添加到 Flutter 小部件树中。

TextTreeWidget：封装树形视图创建

为了简化树形视图的创建，我们可以封装一个名为 TextTreeWidget 的自定义小部件。这个小部件负责处理 Node 对象的创建、NodeWidget 的渲染以及节点的展开和折叠逻辑。

使用 TextTreeWidget

使用 TextTreeWidget 非常简单：

创建包含根节点的 Node 对象。
创建 TextTreeWidget，并设置其 rootNode 属性为创建的根节点。
将 TextTreeWidget 添加到 Flutter 小部件树中。

示例代码

以下示例代码展示了如何使用 40 行代码在 Flutter 中创建自定义树形视图：

import 'package:flutter/material.dart';

class Node {
  String data;
  List<Node> children;

  Node(this.data, {this.children = const []});
}

class NodeWidget extends StatelessWidget {
  final Node node;

  const NodeWidget({required this.node});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(node.data),
      trailing: node.children.isNotEmpty
          ? Icon(Icons.expand_more)
          : null,
      onTap: () {},
    );
  }
}

class TextTreeWidget extends StatefulWidget {
  final Node rootNode;

  const TextTreeWidget({required this.rootNode});

  @override
  _TextTreeWidgetState createState() => _TextTreeWidgetState();
}

class _TextTreeWidgetState extends State<TextTreeWidget> {
  List<Node> expandedNodes = [];

  void toggleNode(Node node) {
    setState(() {
      if (expandedNodes.contains(node)) {
        expandedNodes.remove(node);
      } else {
        expandedNodes.add(node);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return _buildNodeWidget(widget.rootNode);
  }

  Widget _buildNodeWidget(Node node) {
    return NodeWidget(node: node);
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: TextTreeWidget(
        rootNode: Node('Root'),
      ),
    ),
  ));
}