FlycoRoundView

简介

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

下载安装

ohpm install @ohos/flyroundview

使用说明

使用示例

RoundTextView - 圆角文本显示组件

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 - 圆角线性布局组件

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 - 圆角层叠布局组件

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 - 圆角相对布局组件

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 - 统一配置代理类

// 创建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
}) {
  // 子组件内容
}

接口说明

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)	`-`	是否处于按下状态

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`	内容对齐方式

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`	内容对齐方式

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`	相对布局类型

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有效）

按下效果说明

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

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

统一配置方式

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

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

约束与限制

在下述版本验证通过：

DevEco Studio: 6.0.1 Release(6.0.1.260), SDK: API12(5.0.0.71)

目录结构

/ohos_FlycoRoundView        # 项目根目录
├── entry      # 示例代码文件夹
├── library/                    # 核心组件库模块
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/
│   │   │   │   ├── components/           # 组件实现目录
│   │   │   │   │   ├── RoundFrameLayout.ets # 圆角层叠布局组件
│   │   │   │   │   ├── RoundLinearLayout.ets # 圆角线性布局组件
│   │   │   │   │   ├── RoundRelativeLayout.ets # 圆角相对布局组件
│   │   │   │   │   ├── RoundTextView.ets # 圆角文本显示组件
│   │   │   │   │   └── RoundViewDelegate.ets # 统一配置代理类
│   │   │   │   └── utils/              # 工具类目录
│   │   │   │       ├── EmitterHelper.ets # 事件封装类
│   │   │   │       ├── RoundUtils.ets # 工具类文件
│   │   │   │       └── Type.ets # 类型声明文件
│   ├── index.ets    # 对外接口
├── README.md     # 安装使用方法    
├── README_zh.md  # 安装使用方法

贡献代码

使用过程中发现任何问题都可以提 Issue 给组件，当然，也非常欢迎发 PR共建。

开源协议

本项目采用 MIT License 开源协议。