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

按下效果说明

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

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

统一配置方式

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

1. 创建RoundViewDelegate实例
2. 调用相应方法设置公共属性
3. 将实例传递给组件的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 开源协议。