【Day7-10】开源鸿蒙Flutter 常用组件封装实战（2） - 详解 - tlnshuju

【Day7-10】开源鸿蒙Flutter 常用组件封装实战（2） - 详解

2026-01-27 19:02 tlnshuju 阅读(4) 评论(0) 收藏举报

开源鸿蒙与 Flutter 常用组件封装实战（续）

开源鸿蒙组件封装方法

开源鸿蒙（OpenHarmony）的组件封装通常基于 ArkUI 框架。以封装一个自定义按钮为例：

定义组件属性：通过 @Component 装饰器声明组件，使用 @Prop 或 @State 定义可交互属性。
样式与布局：结合 Flex 或 Stack 布局，通过 .width()、.height() 等方法设置样式。
事件绑定：使用 onClick 或手势事件（如 PanGesture）实现交互逻辑。

示例代码：

@Component
struct CustomButton {
  @Prop label: string = 'Click'
  @State isPressed: boolean = false
  build() {
    Column() {
      Text(this.label)
        .fontSize(20)
        .opacity(this.isPressed ? 0.6 : 1)
    }
    .onClick(() => {
      this.isPressed = !this.isPressed
    })
  }
}

Flutter 组件封装方法

Flutter 中封装组件通常继承 StatelessWidget 或 StatefulWidget。以封装一个带图标的按钮为例：

参数定义：通过构造函数传递必要参数（如 icon、onPressed）。
组合现有组件：利用 Icon、ElevatedButton 等内置组件组合功能。
主题适配：通过 Theme.of(context) 动态获取应用主题颜色。

示例代码：

class IconButton extends StatelessWidget {
  final IconData icon;
  final VoidCallback onPressed;
  const IconButton({required this.icon, required this.onPressed});
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Icon(icon),
      style: ElevatedButton.styleFrom(
        primary: Theme.of(context).primaryColor,
      ),
    );
  }
}