Flutter UI组件库插件simple_dart_ui_core的使用

Flutter UI组件库插件simple_dart_ui_core的使用

simple_dart_ui_core 是一个用于在Dart中创建GUI的库。本文档将详细介绍如何使用该库来构建用户界面。

组件

• Component
• PanelComponent
• Panel
• Mixins
• Events
• StateComponent

Component

Component 是一个DOM元素的包装器。所有组件都继承自 Component。如果你需要创建一个包含其他组件的组件，应该使用 PanelComponent。

每个组件都有一个 element 属性，这是将要显示在页面上的DOM元素。组件的属性和方法包括：

class MyComponent extends Component {
  // 构造函数
  MyComponent() {
    // 初始化属性
    visible = true;
    width = '100%';
    height = '100px';
    fillContent = true;
    shrinkable = true;
    padding = '10px';
    warp = true;
    wordWrap = true;
  }

  // 移除组件
  void removeComponent() {
    remove();
  }

  // 重新渲染组件
  void reRenderComponent() {
    reRender();
  }
}

PanelComponent

PanelComponent 是一个抽象类，用于创建包含其他组件的组件。在 PanelComponent 的构造函数中，必须指定CSS类名。

class MyPanelComponent extends PanelComponent {
  MyPanelComponent() {
    // 指定CSS类名
    className = 'my-panel-class';
  }

  // 添加子组件
  void addComponent(Component component) {
    addChild(component);
  }

  // 移除子组件
  void removeComponent(Component component) {
    removeChild(component);
  }
}

Panel

Panel 继承自 PanelComponent，不添加额外功能。它是布局组件的主要工具。建议不要直接从 Panel 派生。

class MyPanel extends Panel {
  MyPanel() {
    // 可以设置垂直排列、间距等属性
    vertical = true;
    spacing = '10px';
    vAlign = 'center';
    hAlign = 'center';
    scrollable = true;
  }
}

Mixins

• MixinActivate - 将激活样式混合到组件中。
• MixinDisable - 将禁用样式和 disabled 属性混合到组件中。

class MyComponentWithActivation extends Component with MixinActivate {
  MyComponentWithActivation() {
    // 设置激活状态
    active = true;
  }
}

class MyComponentWithDisable extends Component with MixinDisable {
  MyComponentWithDisable() {
    // 设置禁用状态
    disabled = true;
  }
}

Events

• ValueChangeEvent
• mixin ValueChangeEventSource

class MyComponentWithEvent extends Component with ValueChangeEventSource {
  MyComponentWithEvent() {
    // 处理事件
    onValueChange.listen((event) {
      print('Value changed: ${event.value}');
    });
  }
}

StateComponent

StateComponent 是一个接口，其状态可以从字符串读取和设置。它用于将组件的状态保存在URL中。

class MyStateComponent extends StateComponent {
  MyStateComponent() {
    // 设置初始状态
    state = 'initial-state';
  }

  // 读取状态
  String getState() {
    return state;
  }

  // 设置状态
  void setState(String newState) {
    state = newState;
  }
}