answershuto
commented
2 years ago 用 JS 就是通过 document.createElement 创建一个新的 custom element。
Open zjt123 opened 2 years ago
answershuto
commented
2 years ago 用 JS 就是通过 document.createElement 创建一个新的 custom element。
zjt123
commented
2 years ago 用 JS 就是通过 document.createElement 创建一个新的 custom element。
那怎么返回给这个WidgetElement呢？ appendChild？
answershuto
commented
2 years ago 嗯， appendChild 后，子 Element 会传递到 WidgetElement 的 build 中，chidren 参数会带上。
zjt123
commented
2 years ago 嗯， appendChild 后，子 Element 会传递到 WidgetElement 的 build 中，chidren 参数会带上。
我现在是这么弄的，但是把childen放到列表里面就会有问题，滚动也有问题，感觉自定义的WidgetElement列表和KrakenElementToWidgetAdaptor不兼容。可以看我给出来的代码. 能力有限，尝试改源码滚动的时候也会报错。动态增加flutter创建出来的元素（append1替换成append2方法）是没问题的。
js代码：
const container = document.createElement('div');
// 必须指定渲染容器节点滚动方向的尺寸(height).
container.style.height = '100vh';
const outter = document.createElement('k-demo-element2');
container.appendChild(outter);
const ele = document.createElement('div');
ele.style.height = '100';
const clickUi = document.createTextNode(`测试点击`);
ele.appendChild(clickUi);
container.appendChild(ele);
ele.addEventListener('click', function() {
const tmpdiv = document.createElement('div');
tmpdiv.style.height = '200px';
tmpdiv.style.width = '100px';
tmpdiv.appendChild(document.createTextNode(`第 1个元素`));
outter.appendChild(tmpdiv);
// outter.sayHi(tmpdiv); // flutter: Kraken: Hi!
});
document.body.appendChild(container);dart代码：
import 'package:kraken/widget.dart'; import 'package:flutter/material.dart';
class DemoElement2 extends WidgetElement {
List
// DemoElement2(context) : super(context, defaultStyle: {'display': 'block'}); DemoElement2(context) : super(context);
append1(children) { goodsList[0].appendW(children); }
append2() { goodsList[0].appendW([Container( height: 100, width: 111, child: Text("1111"),)]); }
@override
Widget build(BuildContext context, Map<String, dynamic> properties,
List
dynamic sayHi(List
@override getBindingProperty(String key) { if (key == 'sayHi') { return sayHi; }
return super.getBindingProperty(key);} } class MyList extends StatefulWidget {
List
appendW(List
});}
}
class MyListState extends State
_ListWidget(index) { KrakenElementToWidgetAdaptor renderObjectWidget = widget.wList[index] as KrakenElementToWidgetAdaptor; return Container(child: renderObjectWidget); } }
异常信息：
======== Exception caught by widgets library ======================================================= The following assertion was thrown building Container: 'package:flutter/src/foundation/node.dart': Failed assertion: line 128 pos 12: 'child._parent == null': is not true.
Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause. In either case, please report this assertion by filing a bug on GitHub: https://github.com/flutter/flutter/issues/new?template=2_bug.md
The relevant error-causing widget was: Container Container:file:///Users/apple/job/app/lib/nflutter_components/demo_compont/views/demo_component2.dart:107:12 When the exception was thrown, this was the stack:
(elided 5 frames from class _AssertionError and dart:async)
answershuto
commented
2 years ago 是在最新的 main 上测试的吗？这个问题看起来最近修过，由于重复调用 insert 的缘故。
zjt123
commented
2 years ago 是在最新的 main 上测试的吗？这个问题看起来最近修过，由于重复调用 insert 的缘故。
对的 最新的main测试的， commitid ：193b7459d38daa997eea9dfb8bfae320787c5326
zjt123
commented
2 years ago 是在最新的 main 上测试的吗？这个问题看起来最近修过，由于重复调用 insert 的缘故。
有相关的北海交流群吗？方便发一下吗？
answershuto
commented
2 years ago 答疑只走 issue，群内不答疑。交流群可以在 TSC 那边找到。
使用场景 ｜ Use case
自定义的widget是否能通过调用js得到想要的Widget， 目前看文档dart和js通讯好像做不到类似的 例如自定义了一个 widget， widget里面对业务逻辑的处理，但是ui需要通过调用js得到的，js根据业务数据来生成对应的ui a、b、c..等
提案 ｜ Proposal
伪代码例子：
class DemoElement2 extends WidgetElement { List dataList = [{"name":"1", "style":"1"}, {"name":"2", "style":"2"}, {"name":"3", "style":"3"}];
DemoElement2(context) : super(context, defaultStyle: {'display': 'block'}); @override Widget build(BuildContext context, Map<String, dynamic> properties, List children) {
return Container(
color: Colors.blue,
width: 300,
height: 500,
child:CustomScrollView(
slivers: [SliverList(
delegate: SliverChildBuilderDelegate(
(_, index) => _ListWidget(index),
childCount: dataList.length,
)])); }
_ListWidget(index) { // dataList[index] , 根据数据调用js，能否得到一个StyleWidget ？？？ return StyleWidget; } dynamic sayHi(List args) {
print(args);
print(args[0]);
print(args[0].runtimeType);
}
@override getBindingProperty(String key) { if (key == 'sayHi') { return sayHi; }
} }