# ohos-FlycoRoundView

**Repository Path**: cbbgs/ohos-flycoroundview

## Basic Information

- **Project Name**: ohos-FlycoRoundView
- **Description**: FlycoRoundView库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-29
- **Last Updated**: 2026-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#FlycoRoundView

## 简介

本组件库提供了一套具有圆角效果和按下交互的UI组件，支持高度自定义的样式设置。所有组件均支持通过长按手势触发视觉反馈效果。

## 下载安装

请在此处添加下载安装说明。

## 使用说明

### 组件列表

1. RoundTextView - 圆角文本显示组件
2. RoundLinearLayout - 圆角线性布局组件
3. RoundFrameLayout - 圆角层叠布局组件
4. RoundRelativeLayout - 圆角相对布局组件
5. RoundViewDelegate - 统一配置代理类

### 组件详情

#### RoundTextView

圆角文本显示组件，支持文本内容和样式自定义。

##### 属性 (Props)

| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `_backgroundColor` | `Color \| string` | `Color.White` | 背景颜色 |
| `_backgroundPressColor` | `Color \| string` | `Color.Gray` | 按下时的背景颜色 |
| `_borderRadius` | `Length \| BorderRadiuses` | `0` | 圆角半径 |
| `_border` | `BorderOptions` | `{}` | 边框样式 |
| `_borderPress` | `BorderOptions` | `{}` | 按下时的边框样式 |
| `_isRadiusHalfHeight` | `boolean` | `false` | 圆角半径是否为高度的一半 |
| `_isWidthHeightEqual` | `boolean` | `false` | 宽高是否相等 |
| `_textPressColor` | `Color \| string` | `Color.Gray` | 按下时的文字颜色 |
| `_width` | `number \| string` | `-` | 宽度 |
| `_height` | `number \| string` | `-` | 高度 |
| `_textColor` | `Color \| string` | `Color.Black` | 文字颜色 |
| `roundViewDelegate` | `RoundViewDelegate \| undefined` | `undefined` | 统一配置代理对象 |
| `isPress` | `boolean` (Link) | `-` | 是否处于按下状态 |

##### 使用示例

```ets
RoundTextView({
  isPress: this.isPress,
  _backgroundColor: '#ffffff',
  _backgroundPressColor: '#434343',
  _borderRadius: 10,
  _border: { width: 1, color: '#000000' },
  _borderPress: { width: 2, color: '#f5222d' },
  _isRadiusHalfHeight: false,
  _isWidthHeightEqual: false,
  _textPressColor: '#d48806',
  _width: 200,
  _height: 100,
  _textColor: '#000000'
}) {
  Text('Hello World')
    .fontColor(this.isPress ? this.textPressColor : this.textColor)
}
```

#### RoundLinearLayout

圆角线性布局组件，支持子元素的线性排列（水平或垂直）。

##### 属性 (Props)

| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `_backgroundColor` | `Color \| string` | `Color.White` | 背景颜色 |
| `_backgroundPressColor` | `Color \| string` | `Color.Gray` | 按下时的背景颜色 |
| `_borderRadius` | `Length \| BorderRadiuses` | `0` | 圆角半径 |
| `_border` | `BorderOptions` | `{}` | 边框样式 |
| `_borderPress` | `BorderOptions` | `{}` | 按下时的边框样式 |
| `_isRadiusHalfHeight` | `boolean` | `false` | 圆角半径是否为高度的一半 |
| `_isWidthHeightEqual` | `boolean` | `false` | 宽高是否相等 |
| `_width` | `number \| string` | `-` | 宽度 |
| `_height` | `number \| string` | `-` | 高度 |
| `roundViewDelegate` | `RoundViewDelegate \| undefined` | `undefined` | 统一配置代理对象 |
| `isPress` | `boolean` (Link) | `-` | 是否处于按下状态 |
| `_direction` | `FlexDirection` | `FlexDirection.Column` | 子元素排列方向 |
| `alignContent` | `Alignment` | `Alignment.Center` | 内容对齐方式 |

##### 使用示例

```ets
RoundLinearLayout({
  isPress: this.isPress,
  _backgroundColor: '#ffffff',
  _backgroundPressColor: '#434343',
  _borderRadius: 10,
  _border: { width: 1, color: '#000000' },
  _borderPress: { width: 2, color: '#f5222d' },
  _isRadiusHalfHeight: false,
  _isWidthHeightEqual: false,
  _width: 300,
  _height: 200,
  _direction: FlexDirection.Column
}) {
  // 子组件内容
  Text('Item 1')
  Text('Item 2')
}
```

#### RoundFrameLayout

圆角层叠布局组件，支持子元素的层叠排列。

##### 属性 (Props)

| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `_backgroundColor` | `Color \| string` | `Color.White` | 背景颜色 |
| `_backgroundPressColor` | `Color \| string` | `Color.Gray` | 按下时的背景颜色 |
| `_borderRadius` | `Length \| BorderRadiuses` | `0` | 圆角半径 |
| `_border` | `BorderOptions` | `{}` | 边框样式 |
| `_borderPress` | `BorderOptions` | `{}` | 按下时的边框样式 |
| `_isRadiusHalfHeight` | `boolean` | `false` | 圆角半径是否为高度的一半 |
| `_isWidthHeightEqual` | `boolean` | `false` | 宽高是否相等 |
| `_width` | `number \| string` | `-` | 宽度 |
| `_height` | `number \| string` | `-` | 高度 |
| `roundViewDelegate` | `RoundViewDelegate \| undefined` | `undefined` | 统一配置代理对象 |
| `isPress` | `boolean` (Link) | `-` | 是否处于按下状态 |
| `alignContent` | `Alignment` | `Alignment.Center` | 内容对齐方式 |

##### 使用示例

```ets
RoundFrameLayout({
  isPress: this.isPress,
  _backgroundColor: '#ffffff',
  _backgroundPressColor: '#434343',
  _borderRadius: 10,
  _border: { width: 1, color: '#000000' },
  _borderPress: { width: 2, color: '#f5222d' },
  _isRadiusHalfHeight: false,
  _isWidthHeightEqual: false,
  _width: 300,
  _height: 200
}) {
  InView() {
    // 底层组件
    Text('Background Content')
  }
  OutView() {
    // 顶层组件
    Text('Foreground Content')
  }
}
```

#### RoundRelativeLayout

圆角相对布局组件，支持基于相对位置的布局方式。

##### 属性 (Props)

| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| `_backgroundColor` | `Color \| string` | `Color.White` | 背景颜色 |
| `_backgroundPressColor` | `Color \| string` | `Color.Gray` | 按下时的背景颜色 |
| `_borderRadius` | `Length \| BorderRadiuses` | `0` | 圆角半径 |
| `_border` | `BorderOptions` | `{}` | 边框样式 |
| `_borderPress` | `BorderOptions` | `{}` | 按下时的边框样式 |
| `_isRadiusHalfHeight` | `boolean` | `false` | 圆角半径是否为高度的一半 |
| `_isWidthHeightEqual` | `boolean` | `false` | 宽高是否相等 |
| `_width` | `number \| string` | `-` | 宽度 |
| `_height` | `number \| string` | `-` | 高度 |
| `roundViewDelegate` | `RoundViewDelegate \| undefined` | `undefined` | 统一配置代理对象 |
| `isPress` | `boolean` (Link) | `-` | 是否处于按下状态 |
| `relativeType` | `RelativeType` | `RelativeType.Parent` | 相对布局类型 |

##### 使用示例

```ets
RoundRelativeLayout({
  isPress: this.isPress,
  _backgroundColor: '#ffffff',
  _backgroundPressColor: '#434343',
  _borderRadius: 10,
  _border: { width: 1, color: '#000000' },
  _borderPress: { width: 2, color: '#f5222d' },
  _isRadiusHalfHeight: false,
  _isWidthHeightEqual: false,
  _width: 300,
  _height: 200,
  relativeType: RelativeType.Parent
}) {
  view() {
    // 子组件内容
    Text('Relative Content')
  }
}
```

#### RoundViewDelegate

统一配置代理类，用于集中管理所有圆角组件的公共属性。

##### 方法 (Methods)

| 方法名 | 参数 | 返回值 | 描述 |
|--------|------|--------|------|
| `setBackgroundColor` | `backgroundColor: Color \| string` | `void` | 设置背景颜色 |
| `getBackgroundColor` | `-` | `Color \| string` | 获取背景颜色 |
| `setBackgroundPressColor` | `backgroundPressColor: Color \| string` | `void` | 设置按下时的背景颜色 |
| `getBackgroundPressColor` | `-` | `Color \| string` | 获取按下时的背景颜色 |
| `setBorderRadius` | `borderRadius: Length \| BorderRadiuses` | `void` | 设置圆角半径 |
| `getBorderRadius` | `-` | `Length \| BorderRadiuses` | 获取圆角半径 |
| `setBorder` | `border: BorderOptions` | `void` | 设置边框样式 |
| `getBorder` | `-` | `BorderOptions` | 获取边框样式 |
| `setBorderPress` | `borderPress: BorderOptions` | `void` | 设置按下时的边框样式 |
| `getBorderPress` | `-` | `BorderOptions` | 获取按下时的边框样式 |
| `setIsRadiusHalfHeight` | `isRadiusHalfHeight: boolean` | `void` | 设置圆角半径是否为高度的一半 |
| `getIsRadiusHalfHeight` | `-` | `boolean` | 获取圆角半径是否为高度的一半 |
| `setIsWidthHeightEqual` | `isWidthHeightEqual: boolean` | `void` | 设置宽高是否相等 |
| `getIsWidthHeightEqual` | `-` | `boolean` | 获取宽高是否相等 |
| `setTextPressColor` | `textPressColor: Color \| string` | `void` | 设置按下时的文字颜色（仅RoundTextView有效） |
| `getTextPressColor` | `-` | `Color \| string` | 获取按下时的文字颜色（仅RoundTextView有效） |

##### 使用示例

```ets
// 创建RoundViewDelegate实例
private roundViewDelegate: RoundViewDelegate = new RoundViewDelegate();

// 配置属性
aboutToAppear(): void {
  this.roundViewDelegate.setBackgroundColor('#ffffff');
  this.roundViewDelegate.setBackgroundPressColor('#434343');
  this.roundViewDelegate.setBorderRadius(10);
  this.roundViewDelegate.setBorder({ width: 1, color: '#000000' });
  this.roundViewDelegate.setBorderPress({ width: 2, color: '#f5222d' });
  this.roundViewDelegate.setIsRadiusHalfHeight(false);
  this.roundViewDelegate.setIsWidthHeightEqual(false);
  this.roundViewDelegate.setTextPressColor('#d48806'); // 仅RoundTextView有效
}

// 在组件中使用
RoundTextView({
  isPress: this.isPress,
  roundViewDelegate: this.roundViewDelegate
}) {
  // 子组件内容
}
```

## 接口说明

### 按下效果说明

所有组件都支持长按手势触发的视觉反馈效果：

1. 当用户长按组件时，组件会切换到按下状态，显示按下时的样式（背景色、边框等）
2. 当用户释放长按时，组件恢复到正常状态
3. 按下状态通过`isPress` Link属性在父子组件间同步

### 统一配置方式

通过`RoundViewDelegate`可以统一配置多个组件的公共属性，避免重复设置：

1. 创建`RoundViewDelegate`实例
2. 调用相应方法设置公共属性
3. 将实例传递给组件的`roundViewDelegate`属性

## 关于混淆
代码混淆，请查看代码混淆简介
如果希望materialprogressbar库在代码混淆过程中不会被混淆，需要在混淆规则配置文件obfuscation-rules.txt中添加相应的排除规则：
```
-keep
./oh_modules/@ohos/materialprogressbar
```

## 约束与限制

- **HarmonyOS NEXT** API 12 或更高版本
- **DevEco Studio** 5.0 或更高版本
- **ArkTS** 支持


## 目录结构

```
FlycoRoundView/
├── library/                    # 核心组件库模块
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/
│   │   │   │   ├── components/           # 组件实现目录
│   │   │   │   │   ├── RoundFrameLayout.ets
│   │   │   │   │   ├── RoundLinearLayout.ets
│   │   │   │   │   ├── RoundRelativeLayout.ets
│   │   │   │   │   ├── RoundTextView.ets
│   │   │   │   │   └── RoundViewDelegate.ets
│   │   │   │   └── utils/              # 工具类目录
│   │   │   │       ├── EmitterHelper.ets
│   │   │   │       ├── RoundUtils.ets
│   │   │   │       └── Type.ets
│   │   │   ├── resources/
│   │   │   │   └── base/
│   │   │   │       └── element/
│   │   │   │           ├── float.json
│   │   │   │           └── string.json
│   │   │   └── module.json5

```


## 贡献代码

使用过程中发现任何问题都可以提 [Issue](https://gitcode.com/OpenHarmony-ApplicationTPC/ohos_FlycoRoundView) 给组件，当然，也非常欢迎发 PR共建 。

## 开源协议


本项目采用 [MIT License](https://gitcode.com/OpenHarmony-ApplicationTPC/ohos_FlycoRoundView) 开源协议。