Wed 框架

Wed Framework 是一个简单的 Dart Web 框架，灵感来自 React，并使用 Flutter 语法。它提供了一组基本组件和一个用于渲染应用程序的全局方法。

入门

安装

要使用 Wed 框架，首先需要创建一个新的 Dart Web 项目，并将 wed 包添加到 pubspec.yaml 文件中

dependencies:
  wed: ^0.0.5

或者直接运行以下命令

$ dart pub add wed

使用方法

然后，您可以将该包导入到您的项目中，并开始使用提供的组件

import 'dart:html';

import 'package:wed/wed.dart';

final app = querySelector("#output") as DivElement;

void main() {
  renderApp(MyComponent(), app);
}

class MyComponent extends Component {
  var text = 'Hello World';
  var isClicked = false;

  void toggleText() {
    isClicked = !isClicked;
    text = isClicked ? 'Clicked' : 'Hello World';
  }

  @override
  List<Component> build() {
    return [
      Div(
        props: DivProps(
          styles: CssStyle(
            width: Units.vw(100),
            height: Units.vh(100),
            backgroundColor: 'lightblue',
          ).merge(DisplayFlex.center),
        ),
        children: [
          Button(
            props: ButtonProps(
              innerText: text,
              styles: CssStyle(
                backgroundColor: 'blue',
                fontSize: Units.rem(2),
                color: 'white',
                textAlign: TextAlign.center,
                padding: Padding.symmetric(horizontal: 30, vertical: 20),
                borderRadius: BorderRadius.all(12),
                borderWidth: Units.none,
                cursor: Cursor.pointer,
              ),
              onClick: (_) {
                setState(() {
                  toggleText();
                });
              },
            ),
          ),
        ],
      ),
    ];
  }
}

类和助手

Component 类是所有组件的基类，它包含一组基本方法，用于渲染组件和更新其状态。

Component 类

Component 类包含以下方法

  • render()：此方法返回一个 Widget 对象，代表组件的当前状态。
  • setState()：此方法允许更新组件的状态，从而触发重新渲染。

CssStyle 类

ComponentBaseProps 类是所有组件 props 类的基类。

贡献

欢迎贡献！如果您有任何建议或改进，请打开一个 issue 或提交一个 pull request。

作者

许可证

Wed Framework 在 MIT 许可证下发布。

GitHub

查看 Github