一个我开发的响应式断点sdk

ShuiShenHuoLe

169人浏览 · 2026-05-12 12:47:07

ShuiShenHuoLe · 2026-05-12 12:47:07 发布

BreakPoint

简介

BreakPoint 是一个专为 HarmonyOS（鸿蒙）应用设计的响应式断点管理工具。它提供了简单优雅的 API，帮助开发者轻松实现基于屏幕宽度的响应式布局。

特性

📱 响应式断点：根据屏幕宽度自动切换不同的样式和布局
🎨 类型安全：支持泛型参数，提供完整的类型提示
🚀 简单易用：只需几步即可完成集成和使用
🔄 实时更新：窗口大小变化时自动更新断点状态
💡 灵活配置：支持自定义断点阈值和默认值

断点规格

断点	说明	宽度范围
xs	超小屏	(0, 320）
sm	小屏	[320, 600)
md	中屏	[600, 840)
lg	大屏	[840, 1440)
xl	超大屏	[1440, +∞)

如何下载

通过ohpm一键安装

ohpm install @shuishenhuole/breakpoint

通过文件导入

2.1在build-profile.json5的modules中加入

{
  "name": "BreakPoint",
  "srcPath": "./BreakPoint"
}

2.2
module.json5中加入依赖

{
  "dependencies": {
    "@shuishenhuole/breakpoint": "file:../BreakPoint"
  }
}

使用方法

在onWindowStageCreate调用BreakPoint.init(windowStage)进行初始化

onWindowStageCreate(windowStage: window.WindowStage): void {
    ...
    BreakPoint.init(windowStage)
    ...
    });
}

在类中直接使用WidthBreakPoint方法获取数据

#注意这里的实际导入可能会不一样可能是@shuishenhuole/breakpoint不过影响不大
import { WidthBreakPoint } from '../utils/WidthBreakPoint'

@Entry
@ComponentV2
struct Index {
  build() {
    Flex({
      justifyContent:FlexAlign.Center,
      alignItems:ItemAlign.Center
    }){
      Text("Hello World")
        .fontColor(new WidthBreakPoint<ResourceColor>({
          sm:Color.Red,
          md:Color.Orange,
          lg:Color.Green,
          xl:Color.Blue,
          default:Color.Black
        }).getValue())
        .fontSize(50)
    }
    .height("100%")
    .width("100%")
  }
}

3.如果你需要保存在变量中使用getValue需要在属性中调用

import { WidthBreakPoint } from '@shuishenhuole/breakpoint'

@Entry
@ComponentV2
struct Index {
  @Local color:WidthBreakPoint<ResourceColor> = new WidthBreakPoint<ResourceColor>({
    sm:Color.Red,
    md:Color.Orange,
    lg:Color.Green,
    xl:Color.Blue,
    default:Color.Black
  })
  build() {
    Flex({
      justifyContent:FlexAlign.Center,
      alignItems:ItemAlign.Center
    }){
      Text("Hello World")
        .fontColor(this.color.getValue())
        .fontSize(50)
    }
    .height("100%")
    .width("100%")
  }
}