javascript - 使用js.context.callMethod()调用方法时如何接收数据返回flutter?
问题描述
我正在使用 Flutter Web 构建一个 chrome 扩展,这只是一个简单ListView
的主屏幕和基本的 CRUD 操作。我正在使用dart:js
包从 JS 文件中调用方法,该文件在 Firebase 实时数据库上执行一些操作。
通过add()
方法调用向数据库添加新条目。读取操作在 JS 文件中也可以正常工作。
我的主要问题是我应该如何以 JSON 格式读取数据库信息,对其进行解析并像ListView
在 Flutter 中一样显示它。
来main.dart
了AddAttendee.dart
-
import 'dart:js' as js;
import 'dart:convert';
import 'package:flutter/material.dart';
import 'AddAttendee.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Google Flutter Meet Attendance',
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<Map> data;
getAttendees() async {
var obj = await js.context.callMethod('read');
List<Map> users = (jsonDecode(obj) as List<dynamic>).cast<Map>();
setState(() {
data = users;
});
}
@override
void initState() {
getAttendees();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Current Attendees"),
),
body: data != null
? ListView.builder(
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
itemCount: data.length,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.person),
title: Text(data.toString()[index]), // I don't know how to read correctly
);
},
)
: Center(child: CircularProgressIndicator()),
floatingActionButton: FloatingActionButton(
tooltip: 'Add to Attendance',
child: Icon(Icons.person_add),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => AddAttendee(),
),
),
),
);
}
}
import 'dart:js' as js;
import 'package:flutter/material.dart';
class AddAttendee extends StatefulWidget {
@override
_AddAttendeeState createState() => _AddAttendeeState();
}
class _AddAttendeeState extends State<AddAttendee> {
final _formKey = GlobalKey<FormState>();
final TextEditingController _textController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Add to Attendance List"),
),
body: Form(
key: _formKey,
child: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: TextFormField(
autocorrect: false,
autofocus: true,
controller: _textController,
onFieldSubmitted: (value) => _textController.text = value,
decoration: InputDecoration(labelText: "Name"),
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
textCapitalization: TextCapitalization.sentences,
validator: (value) {
if (value.isEmpty) return 'This field is mandatory';
return null;
},
),
),
),
floatingActionButton: FloatingActionButton(
tooltip: "Done",
child: Icon(Icons.done),
onPressed: () {
if (_formKey.currentState.validate()) {
js.context.callMethod('add', [_textController.text]);
Navigator.pop(context);
}
},
),
);
}
}
这是JS代码 -
const dbRef = firebase.database().ref();
var userList = [];
function read() {
dbRef.once("value", function (snapshot) {
userList = [];
snapshot.forEach(function (childSnapshot) {
var key = childSnapshot.key;
var user = childSnapshot.val();
userList.push({ key, user });
});
});
return userList;
}
function add(user) {
let newUser = { name: user };
dbRef.push(newUser, function () {
console.log("Attendance Record Updated - New Attendee Added");
});
}
Firebase RT DB 中的数据库结构 -
解析时的数据库结构 -
调试这段代码真是令人沮丧,因为我无法print
输出,main.dart
如果发生任何错误并引发异常,那么它将以main.dart.js
无法读取的转编译文件的形式显示。
我无法将数据从read()
JS 文件中的方法取回到main.dart
. 怎么做?
一些参考链接 -
https://twitter.com/rodydavis/status/1197564669633978368 https://www.reddit.com/r/FlutterDev/comments/dyd8j5/create_chrome_extension_running_flutter/ https://github.com/rodydavis/dart_pad_ext/
解决方案
调用callMethod
它时,它返回的正是 javascript 函数返回的内容。它不会返回String
像您的代码当前暗示的那样编码的 json。因此没有必要对其进行解码。几乎var obj
可以被视为一个对象。这意味着您可以在 dart 代码中访问列表的第一个对象和属性。您可以删除代码中的所有 json 解码和转换,并将其替换为使用此方法访问返回数据的函数,以将其转换为您自己的实际数据。List<Map<String, dynamic>>
key
js.context.callMethod("read")[0]['key']
List<Map<String, dynamic>>
修改示例getAttendees
:
Future<void> getAttendees() async {
List<Map<String, dynamic>> toReturn = List();
js.JsArray obj = js.context.callMethod("read");
for(js.JsObject eachObj in obj) {
//For every object in the array, convert it to a `Map` and add to toReturn
toReturn.add({
'key': eachObj['key'],
'user': eachObj['user'],
});
}
setState(() {
data = toReturn;
});
}
如果您出于某种原因发现需要使用 json,则需要在 javascript 端进行编码,尽管我认为没有理由这样做,因为它只会增加复杂性。
在build
函数中显示数据时,data.toString()[index]
将首先将 javascript 输出转换为String
这样的:"[{key: key}, {key: key}, ...]"
然后找到 的index
,String
而不是List
对象,这可能是您想要的。为此,您首先使用索引,data[index]
然后添加您要查找的字段,data[index]['key']
因为数据是 a List
of Map
s。
与您遇到的问题直接无关,但一些一般性的颤振建议是使用 aFutureBuilder
而不是您当前在async
函数完成时显示数据的方法。您的方法几乎可以做到FutureBuilder
,只是效率稍低且可读性较差。
编辑:处理read
为Promise
:
首先,您必须添加js: ^0.6.2
到您的pubspec.yaml
依赖项。
然后必须在代码中的某处添加:
@JS()
library script.js;
import 'package:js/js.dart';
import 'dart:js_util';
@JS()
external dynamic read();
js.JsArray obj = js.context.callMethod("read");
应该修改为await promiseToFuture(read())
. 整体getAttendees
应修改为:
Future<void> getAttendees() async {
List<Map<String, dynamic>> toReturn = List();
dynamic obj = await promiseToFuture(read());
for(dynamic eachObj in obj) {
//For every object in the array, convert it to a `Map` and add to toReturn
toReturn.add({
'key': eachObj.key,
'user': eachObj.user,
});
}
setState(() {
data = toReturn;
});
}
推荐阅读
- tableau-api - 在 Tableau 中创建包含 Excel 工作表列的下拉菜单
- python - 如何在不同的文件夹中运行另一个 Python 脚本,该脚本在自己的路径中读取一个 csv 文件?
- python - 2个字典列表中的Python匹配值-最快的解决方案
- github - 如何解决请求的 URL 返回错误:bitbucket 上的 403?并设置同时推送 github 和 bitbucket?
- python - 编辑:绘制函数,x 和 y 必须具有相同的第一维
- c# - 从执行具体目标版本查询的 HP ALM 获取需求
- pandas - 获取列中年份组的统计信息(describe()-like)
- path - 将 Vault CLI 路径映射到 Packer Vault 路径
- python - 确保变量是数组,无论它是列表还是标量
- php - 列出 WooCommerce 中产品类别的主要产品子类别