webf-native-ui-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WebF Native UI Dev

WebF 原生UI开发

This skill guides the development of custom native UI components for WebF (Web on Flutter). It bridges Flutter widgets to standard HTML custom elements.

该技能指导开发者为WebF（运行于Flutter之上的Web框架）开发自定义原生UI组件，实现了Flutter widgets到标准HTML自定义元素的桥接。

Concept

概念

WebF allows you to render HTML/CSS using Flutter's rendering engine. This skill helps you expose complex Flutter widgets as

<custom-element>

tags usable in HTML.

WebF允许你使用Flutter的渲染引擎渲染HTML/CSS，本技能可帮助你将复杂的Flutter widgets暴露为可在HTML中直接使用的

<custom-element>

标签。

Workflow

工作流程

Create Flutter Widget: Build the widget using standard Flutter code.
Define Element Class: Create a class extending
```
WidgetElement
```
.
Register Custom Element: Use
```
defineCustomElement
```
to map the tag name to the class.

创建Flutter Widget：使用标准Flutter代码构建Widget。
定义元素类：创建继承自
```
WidgetElement
```
的类。
注册自定义元素：使用
```
defineCustomElement
```
将标签名映射到对应类。

Example

示例

dart

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

// 1. Define the Element
class FlutterButtonElement extends WidgetElement {
  FlutterButtonElement(BindingContext? context) : super(context);

  @override
  Widget build(BuildContext context, List<Widget> children) {
    return ElevatedButton(
      onPressed: () {
        // Dispatch custom event to JS
        dispatchEvent(Event('click'));
      },
      child: Text(getAttribute('label') ?? 'Click Me'),
    );
  }
}

// 2. Register (usually in main.dart)
void main() {
  WebF.defineCustomElement('flutter-button', (context) => FlutterButtonElement(context));
  runApp(MyApp());
}

dart

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

// 1. Define the Element
class FlutterButtonElement extends WidgetElement {
  FlutterButtonElement(BindingContext? context) : super(context);

  @override
  Widget build(BuildContext context, List<Widget> children) {
    return ElevatedButton(
      onPressed: () {
        // Dispatch custom event to JS
        dispatchEvent(Event('click'));
      },
      child: Text(getAttribute('label') ?? 'Click Me'),
    );
  }
}

// 2. Register (usually in main.dart)
void main() {
  WebF.defineCustomElement('flutter-button', (context) => FlutterButtonElement(context));
  runApp(MyApp());
}

Usage in HTML

在HTML中使用

html

<flutter-button label="Submit Order" id="btn"></flutter-button>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    console.log('Button clicked via Flutter!');
  });
</script>

html

<flutter-button label="Submit Order" id="btn"></flutter-button>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    console.log('Button clicked via Flutter!');
  });
</script>

Best Practices

最佳实践

Attributes: Map HTML attributes to Widget properties.
Events: Dispatch standard DOM events from Flutter user interactions.
Performance: Avoid heavy computations in the
```
build
```
method; use state management.

属性：将HTML属性映射到Widget属性。
事件：从Flutter侧的用户交互中派发标准DOM事件。
性能：避免在
```
build
```
方法中执行繁重计算，建议使用状态管理优化性能。