Flutter编程构建块插件programming_blocks的使用

PorgrammingBlocks 允许我们定义一个自定义的编程环境，使用图形化块，而无需担心拖放的工作，或如何管理创建面板中的块。我们只需要定义我们的部分列表以及每个部分将包含的块列表。

安装

在 pubspec.yaml 文件中添加：

dependencies:
    programming_blocks: ^0.0.1

简单示例

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ProgrammingBlocks(
          sections: [
            FollowSection(),
            LogicSection(),
            NumbersSection(),
          ],
        ),
      ),
    );
  }
}

复杂示例

你可以在 example 文件夹中找到此动画的代码，在线演示

如何使用

唯一必需的属性是部分列表，其他所有属性都是设置和小部件事件监听器：

• Color? backgroundCanvasColor: 绘图画布的背景颜色。
• Curve? creationPanelAnimationCurve: 打开和关闭创建面板的动画曲线。
• Duration? creationPanelAnimationDuration: 创建面板打开和关闭动画的持续时间。
• Color? creationPanelBackgroundColor: 创建面板的背景颜色。
• double? creationPanelHeight: 创建面板的高度。
• Widget Function()? creationPanelOpenCloseBuilder: 创建面板打开/关闭按钮的小部件构建器。
• Widget Function(BuildContext context, CreationSectionData creationSectionData,bool selected)? creationSectionButtonBuilder: 每个部分在创建面板中的按钮的小部件构建器。
• double defaultFuntionSize =2000: 函数的默认大小。
• Duration? doubleTapAnimDuration: 块上的双击动画的持续时间。
• Duration dragDelay=100: 拖动块的延迟。
• bool drawMainScope=true: 是否绘制主范围。
• bool enableFunctions=true: 是否启用函数。
• Color? foregroundCanvasColor: 绘图画布前景的颜色。
• Color? functionsSectionColor: 创建面板中函数部分的颜色。
• Widget Function(BuildContext context, String tabName, bool selected)? functionTabsBuilder: 函数标签的小部件构建器。
• String mainFunctionName = ‘Main’: 主函数的名称。
• Function( RunningState runningState, )? onChangeRunningState: 更改运行状态的回调函数。
• Function(ProgrammingBlocksProjectModel projectModel)? onProjectChange: 更改项目模型的回调函数。
• double? opacityScrollBars: 滚动条的不透明度。
• ProgrammingBlocksProjectModel? projectModel: 项目模型。
• double? radiusScrollBars: 滚动条的半径。
• Widget Function(Color? enterBlockColor)? runBuilder: 运行按钮的小部件构建器。
• Color? scrollBarsColor: 滚动条的颜色。
• double? scrollBarsWeight: 滚动条的宽度。
• List[] sections: 创建面板中的部分列表。
• Widget Function()? stopBuilder: 停止按钮的小部件构建器。
• Widget Function(bool onBlockEnter)? trashBuilder: 垃圾箱图标的小部件构建器。

CreationSectionData

CreationSectionData 类包含有关部分名称和颜色的信息。

部分

SimpleSection

SimpleSection 类表示元素创建中的简单部分。该类有以下参数：

• Widget Function(CreationSectionData)? addInstanceButtonBuilder: 一个负责构建添加新实例按钮的小部件构建器。它是可选的，可以为 null。
• CreationSectionData creationSectionData: 包含创建部分数据的对象。
• List [] blocktypes: - 一个定义可以添加到部分的块类型的 <BlockType> 对象列表。

DividedSection

DividedSection 类表示元素创建中的分割部分。该类有以下参数：

• CreationSectionData creationSectionData: 包含创建部分数据的对象。
• List [] subSections: 一个包含分割部分的 <CreationSection> 的映射，其中键是子部分的名称，值是类型为 <CreationSection> 的对象。

TypedSection

TypedSection 类表示元素创建中的类型化部分。该类有以下参数：

• Widget Function(BuildContext, CreationSectionData)? addInstanceButtonBuilder: - 负责构建添加新实例按钮的小部件构建器。它是可选的，可以为 null。
• CreationSectionData creationSectionData: 包含创建部分数据的对象。
• BlockType instancesblockType: 定义元素实例的块类型的对象。
• List [] instancesFunctionsBlockTypes: - 定义可以添加到元素实例中的函数的块类型的列表。
• String typeName: 表示正在创建的部分中元素类型的字符串。

必要的方法

• Future<ConfigurationBlockModel?>(BuildContext context) addInstance: 该方法必须返回由开发人员决定的方法的新 ConfigurationBlockModel。
• void (BuildContext context, ConfigurationBlockController controller)onEditInstance: 该方法必须包含用户决定编辑/删除实例的界面。

BlockType

参数

• CreationSectionData sectionData: 包含创建部分数据的对象。
• ProgrammingBlockShape shape: 这将定义块的形状和交互。
• String name: 用以区分不同类型的块的名称。

必要的方法

• Widget(ProgrammingBlockController? blockController) nameBuilder: 构建并返回表示块名称的小部件。blockController 参数是可选的，用于控制块的行为。
• Widget(ProgrammingBlockController? blockController) panelBuilder: 构建并返回表示块面板的小部件。blockController 参数是可选的，用于控制块的行为。
• Future: 执行编程块。executionController 参数是可选的，用于控制块的执行。
• Future: 从编程块读取数据。readBlockController 参数是可选的，用于控制从块中读取数据。
• ProgrammingBlockModel? blockModel: 返回基于块形状的编程块模型。

示例代码

import 'package:example/programming_page.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Programming blocks',
      home: ProgrammingPage(),
    );
  }
}