Flutter可视化编程插件flutter_blockly_plus的使用
Flutter可视化编程插件flutter_blockly_plus的使用
flutter_blockly
点击查看截图
变更日志
使用方法
BlocklyOptions 接口
import 'package:flutter_blockly/flutter_blockly.dart';
// ...
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: BlocklyEditorWidget(
workspaceConfiguration: workspaceConfiguration,
initial: initial,
onInject: onInject,
onChange: onChange,
onDispose: onDispose,
onError: onError,
),
),
);
}
void onChange({xml, json, dart, js, lua, php, python}) {
}
为Web浏览器添加 blockly.min.js
在 web/index.html 文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<!-- ...... -->
</head>
<body>
<!-- ...... -->
<!-- 在这里添加 -->
<script src='https://unpkg.com/blockly/blockly.min.js' defer></script>
<!-- 代码生成 -->
<script src="https://unpkg.com/blockly/dart_compressed" defer></script>
<script src="https://unpkg.com/blockly/javascript_compressed" defer></script>
<script src="https://unpkg.com/blockly/lua_compressed" defer></script>
<script src="https://unpkg.com/blockly/php_compressed" defer></script>
<script src="https://unpkg.com/blockly/python_compressed" defer></script>
</body>
</html>
iOS 和 Android 使用方法
import 'package:flutter_blockly/flutter_blockly.dart';
import 'package:webview_flutter/webview_flutter.dart';
// ...
class _MyWidgetState extends State<MyWidgetState> {
late final BlocklyEditor editor;
[@override](/user/override)
void initState() {
super.initState();
editor = BlocklyEditor(
workspaceConfiguration: widget.workspaceConfiguration,
initial: widget.initial,
onError: widget.onError,
onInject: widget.onInject,
onChange: widget.onChange,
onDispose: widget.onDispose,
);
// 然后你将拥有以下方法和 WebViewController：
// editor.init();
// editor.dispose();
// editor.onMessage();
// editor.htmlRender();
// editor.updateToolboxConfig();
// editor.updateState();
// editor.postData();
// editor.runJS();
// editor.state();
// editor.code();
// editor.blocklyController;
}
}
Web 使用方法
import 'package:flutter_blockly/flutter_blockly.dart';
// ...
class _MyWidgetState extends State<MyWidgetState> {
late final BlocklyEditor editor;
[@override](/user/override)
void initState() {
super.initState();
editor = BlocklyEditor(
workspaceConfiguration: widget.workspaceConfiguration,
initial: widget.initial,
onError: widget.onError,
onInject: widget.onInject,
onChange: widget.onChange,
onDispose: widget.onDispose,
);
// 然后你将拥有以下方法：
// editor.init();
// editor.dispose();
// editor.addJavaScriptChannel();
// editor.onMessage();
// editor.htmlRender();
// editor.updateToolboxConfig();
// editor.updateState();
// editor.postData();
// editor.runJS();
// editor.state();
// editor.code();
}
}
示例
示例代码
example/lib/main.dart
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_blockly_plus/flutter_blockly_plus.dart';
import 'content.dart';
void main() {
runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: WebViewApp(),
),
);
}
class WebViewApp extends StatefulWidget {
const WebViewApp({super.key});
[@override](/user/override)
State<WebViewApp> createState() => _WebViewAppState();
}
class _WebViewAppState extends State<WebViewApp> {
// final BlocklyOptions workspaceConfiguration = BlocklyOptions(
// grid: const GridOptions(
// spacing: 20,
// length: 3,
// colour: '#ccc',
// snap: true,
// ),
// toolbox: ToolboxInfo.fromJson(initialToolboxJson),
// );
final BlocklyOptions workspaceConfiguration = BlocklyOptions.fromJson(const {
'grid': {
'spacing': 20,
'length': 3,
'colour': '#ccc',
'snap': true,
},
'toolbox': initialToolboxJson,
// null 安全性示例
'collapse': null,
'comments': null,
'css': null,
'disable': null,
'horizontalLayout': null,
'maxBlocks': null,
'maxInstances': null,
'media': null,
'modalInputs': null,
'move': null,
'oneBasedIndex': null,
'readOnly': null,
'renderer': null,
'rendererOverrides': null,
'rtl': null,
'scrollbars': null,
'sounds': null,
'theme': null,
'toolboxPosition': null,
'trashcan': null,
'maxTrashcanContents': null,
'plugins': null,
'zoom': null,
'parentWorkspace': null,
});
void onInject(BlocklyData data) {
// 注入回调函数
}
void onChange(BlocklyData data) {
print("test" + data.toolbox.toString());
}
void onDispose(BlocklyData data) {
// 销毁回调函数
}
void onError(dynamic err) {
debugPrint('onError: $err');
}
Future<List<String>> loadAddons() async {
List<String> addons = [];
addons.add(await rootBundle.loadString("assets/blocks/block_int_to_string.js"));
return addons;
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: FutureBuilder(
future: loadAddons(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return BlocklyEditorWidget(
workspaceConfiguration: workspaceConfiguration,
initial: initialXml,
onInject: onInject,
onChange: onChange,
onDispose: onDispose,
onError: onError,
addons: snapshot.data,
debug: false
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
)
);
}
}
更多关于Flutter可视化编程插件flutter_blockly_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter可视化编程插件flutter_blockly_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，关于flutter_blockly_plus插件的使用，这是一个在Flutter应用中集成Blockly可视化编程界面的强大工具。下面是一个基本的代码案例，展示了如何在Flutter项目中集成并使用flutter_blockly_plus。
首先，确保你已经在pubspec.yaml文件中添加了flutter_blockly_plus依赖：
dependencies:
flutter:
sdk: flutter
flutter_blockly_plus: ^最新版本号 # 请替换为当前最新版本号
然后，运行flutter pub get来安装依赖。
接下来，是一个简单的Flutter应用示例，展示如何使用flutter_blockly_plus：
import 'package:flutter/material.dart';
import 'package:flutter_blockly_plus/flutter_blockly_plus.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Blockly Plus Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BlocklyPage(),
);
}
}
class BlocklyPage extends StatefulWidget {
@override
_BlocklyPageState createState() => _BlocklyPageState();
}
class _BlocklyPageState extends State<BlocklyPage> {
BlocklyController _blocklyController;
@override
void initState() {
super.initState();
// 初始化BlocklyController
_blocklyController = BlocklyController(
toolboxXml: '''
<xml xmlns="https://developers.google.com/blockly/xml">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="math_number">
<field name="NUM">123</field>
</block>
<!-- 添加更多block类型 -->
</xml>
''',
onGenerateCode: (String code) {
// 当Blockly生成代码时回调
print('Generated Code: $code');
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Blockly Demo'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Expanded(
child: BlocklyWidget(
controller: _blocklyController,
),
),
ElevatedButton(
onPressed: () {
// 获取生成的代码
String code = _blocklyController.getCode();
print('Code from Blockly: $code');
},
child: Text('Get Code'),
),
],
),
),
);
}
@override
void dispose() {
_blocklyController.dispose();
super.dispose();
}
}
在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个BlocklyWidget，用于显示Blockly的可视化编程界面。我们通过BlocklyController来管理Blockly的配置和行为，比如初始化工具箱（toolbox）XML和监听代码生成事件。
toolboxXml：定义了Blockly工具箱中的block类型。你可以根据需要添加或修改这些block。onGenerateCode：是一个回调函数，当Blockly生成代码时会触发。这里我们简单地打印了生成的代码。
在UI部分，我们使用了一个Expanded widget来确保BlocklyWidget占据大部分屏幕空间，并在下方添加了一个按钮，用于获取并打印生成的代码。
请注意，flutter_blockly_plus插件的功能非常强大，你可以根据需要进一步定制和扩展这个示例。如果你需要更多高级功能，比如自定义block、处理事件等，建议查阅flutter_blockly_plus的官方文档或源代码。
