Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/support flutter widget #904

Merged
merged 81 commits into from
Dec 21, 2021
Merged

Feat/support flutter widget #904

merged 81 commits into from
Dec 21, 2021

Conversation

answershuto
Copy link
Member

@answershuto answershuto commented Nov 24, 2021

支持 Flutter Widget 与 Element 混合渲染,互相嵌套。

Example:

let container = document.createElement('div');
container.style.background = 'red';
container.style.border = '1px solid #000';
container.appendChild(document.createTextNode('helloworld'));

let flutterText = document.createElement('flutter-list-view');
flutterText.appendChild(container);
flutterText.style.border = '1px solid #000';
flutterText.style.display = 'inline-block';
flutterText.style.width = '100px';
flutterText.style.height = '500px';
flutterText.onclick = () =>  console.log(1);

document.body.appendChild(flutterText)
void main() {
  Kraken.defineCustomElement('flutter-list-view', (targetId, nativeEventTarget, elementManager) => FlutterListView(targetId, nativeEventTarget, elementManager));
  runApp(MyApp());
}

class FlutterListView extends WidgetElement {
  FlutterListView(int targetId, Pointer<NativeEventTarget> nativeEventTarget, ElementManager elementManager) : super(targetId, nativeEventTarget, elementManager);

  @override
  Widget build(BuildContext context, Map<String, dynamic> properties, List<Widget> children) {
    return ListView(
      padding: const EdgeInsets.all(8),
      children: <Widget>[
        Container(
          height: 50,
          child: children.isNotEmpty ? children[0] : null,
        ),
        Container(
          height: 50,
          color: Colors.amber[500],
          child: const Center(child: Text('Entry B')),
        ),
        Container(
          height: 50,
          color: Colors.amber[100],
          child: const Center(child: Text('Entry C')),
        ),
      ],
    );
  }
}

image

kraken/lib/widget.dart Outdated Show resolved Hide resolved
@haikyuu
Copy link

haikyuu commented Nov 26, 2021

This isn't related to HTML custom elements right?

@answershuto answershuto changed the title [WIP]Feat/support flutter widget Feat/support flutter widget Dec 17, 2021
@yuanyan
Copy link
Contributor

yuanyan commented Dec 17, 2021

haikyuu

Not web components,web components will support in future.

wssgcg1213
wssgcg1213 previously approved these changes Dec 20, 2021
List<Widget> children = List.generate(childNodes.length, (index) {
if (childNodes[index] is WidgetElement) {
_KrakenAdapterWidgetState state = (childNodes[index] as WidgetElement)._state!;
return state.build(context);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

每次刷新,整个列表都要重新 rebuild,性能瓶颈会很明显。需要优化一下,缓存前面已经构建好的 widget

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里子节点会调用 WidgetElement 上的 build 方法,该方法也许会依赖父节点的信息做一些转换,重新 build 把优化的权利交给开发者,这里不缓存防止需要重新 build 的时候不执行。KrakenElementToWidgetAdaptor 我加上缓存。

Copy link
Member

@andycall andycall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

一些优化需要调整。貌似 main 上 widget.dart 没有同步过来,需要手动 check 一下

@answershuto answershuto merged commit aca3c8a into main Dec 21, 2021
@answershuto answershuto deleted the feat/support_flutter_widget branch December 21, 2021 06:53
@openkraken openkraken deleted a comment from andycall Feb 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants