# mnuikit

**Repository Path**: magicnumber_orz/mnuikit

## Basic Information

- **Project Name**: mnuikit
- **Description**: 超方便的鸿蒙UI库
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2024-12-24
- **Last Updated**: 2025-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MNUIKit-超便捷的鸿蒙开发UI库

#### 介绍

MNUIKit 是 MagicNumber 推出的鸿蒙开发 UI 库，它提供了丰富的 UI组件，常数配置，旨在简化鸿蒙开发的 UI 设计过程。

#### 安装教程

```shell
ohpm i @magicnumber/mnuikit
```

#### 使用说明

在onWindowStageCreate中，初始化

```typescript
export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    MNUIKit.init(windowStage)
  }
}
```

设置导航栏样式

```typescript
const style = MNWindowSystemBarStyle.white
MNUIKit.setWindowSystemBarStyle(style:
style
)
```

| 常用API   | 方法                          |
| ------- | --------------------------- |
| 屏幕宽度    | ScreenWidth()               |
| 屏幕高度    | ScreenHeight()              |
| 屏幕比例    | ScreenScale()               |
| 状态栏高度   | StatusBarHeight()           |
| 标题栏高度   | NavigationContentHeight()   |
| 导航栏高度   | NavigationBarHeight()       |
| 底部导航条高度 | NavigationIndicatorHeight() |
| 标签栏内容高度 | TabBarContentHeight()       |
| 标签栏高度   | TabBarHeight()              |
| 屏幕安全区域  | SafeArea()                  |

##### 监听或获取实时屏幕旋转方向

```typescript
@
Watch('onOrientationChange') @
StorageProp(MNStorageName.Orientation)
orientation: display.Orientation = display.Orientation.PORTRAIT
onOrientationChange()
{
  MNLog.log('MNUIKitDemo', `屏幕方向: ${this.orientation}`)
}
```

##### 获取屏幕实时宽高比（屏幕折叠或旋转后会变）

```typescript
@
Watch('onScreenScaleChange') @
StorageProp(MNStorageName.ScreenScale)
screenScale: number = 1
onScreenScaleChange()
{
}
```

##### 获取deviceId

重新安装App后保持不变，需要开启`ohos.permission.STORE_PERSISTENT_DATA`权限

```typescript
MNDevice.deviceId()
```

| 常用组件 | struct          |
| ---- | --------------- |
| 导航栏  | MNNavigationBar |

#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request