HarmonyOS鸿蒙Next中如何实现渐变背景的卡片组件？

HarmonyOS鸿蒙Next中如何实现渐变背景的卡片组件？ 我想创建一个带有渐变背景的卡片组件，支持自定义渐变颜色和角标显示，如何实现？

3 回复

实现思路：

  1. 使用 linearGradient 属性设置渐变背景：
.linearGradient({
  direction: GradientDirection.RightBottom,
  colors: [['#667eea', 0], ['#764ba2', 1]]
})
  1. 定义渐变颜色属性，支持外部自定义：
@Prop gradientColors: [string, string] = ['#667eea', '#764ba2'];
  1. 使用角标显示额外信息：
if (this.badge) {
  Text(this.badge)
    .fontSize(10)
    .fontColor(Color.White)
    .backgroundColor('rgba(255,255,255,0.3)')
    .padding({ left: 8, right: 8, top: 2, bottom: 2 })
    .borderRadius(10)
}
  1. 完整示例代码：
@Component
export struct GradientCard {
  @Prop title: string = '';
  @Prop subtitle: string = '';
  @Prop icon: string = '';
  @Prop gradientColors: [string, string] = ['#667eea', '#764ba2'];
  @Prop badge: string = '';
  onTap?: () => void;
  @State isPressed: boolean = false;

  build() {
    Column() {
      Row({ space: 12 }) {
        if (this.icon) {
          Column() { Text(this.icon).fontSize(32) }
            .width(56).height(56).borderRadius(16)
            .backgroundColor('rgba(255,255,255,0.2)')
            .justifyContent(FlexAlign.Center)
        }
        Column({ space: 4 }) {
          Row({ space: 8 }) {
            Text(this.title).fontSize(18).fontWeight(FontWeight.Bold).fontColor(Color.White)
            if (this.badge) {
              Text(this.badge).fontSize(10).fontColor(Color.White)
                .backgroundColor('rgba(255,255,255,0.3)')
                .padding({ left: 8, right: 8, top: 2, bottom: 2 }).borderRadius(10)
            }
          }
          if (this.subtitle) {
            Text(this.subtitle).fontSize(13).fontColor('rgba(255,255,255,0.85)')
          }
        }
        .alignItems(HorizontalAlign.Start)
        .layoutWeight(1)
        Text('>').fontSize(18).fontColor('rgba(255,255,255,0.7)')
      }
      .width('100%')
    }
    .width('100%')
    .padding(20)
    .linearGradient({
      direction: GradientDirection.RightBottom,
      colors: [[this.gradientColors[0], 0], [this.gradientColors[1], 1]]
    })
    .borderRadius(20)
    .shadow({ radius: 16, color: this.gradientColors[0] + '40', offsetX: 0, offsetY: 8 })
    .scale({ x: this.isPressed ? 0.97 : 1, y: this.isPressed ? 0.97 : 1 })
    .animation({ duration: 150, curve: Curve.EaseOut })
    .onTouch((event: TouchEvent) => {
      if (event.type === TouchType.Down) this.isPressed = true;
      else if (event.type === TouchType.Up || event.type === TouchType.Cancel) this.isPressed = false;
    })
    .onClick(() => this.onTap?.())
  }
}

更多关于HarmonyOS鸿蒙Next中如何实现渐变背景的卡片组件？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中实现渐变背景卡片组件，需要使用ArkUI的组件样式和渐变能力。具体步骤如下：

  1. 使用Stack或Column等容器组件作为卡片基础。
  2. 通过background属性设置渐变背景，例如：
    .background(
  LinearGradient {
    angle: 90,
    colors: [Color.Blue, Color.White]
  }
)
  3. 结合borderRadius设置圆角，padding设置内边距，完成卡片样式。
  4. 在卡片容器内添加具体内容组件。

渐变类型支持线性渐变（LinearGradient）、径向渐变（RadialGradient）和扫掠渐变（SweepGradient），可通过参数控制角度、颜色和位置。

在HarmonyOS Next中，可以通过ArkUI的声明式语法结合Canvas或LinearGradient修饰器实现渐变背景卡片。以下是核心实现方案：

  1. 使用LinearGradient修饰器（推荐）：
@Component
struct GradientCard {
  build() {
    Column() {
      // 卡片内容
      Text('卡片标题')
        .fontSize(16)
        .fontColor(Color.White)
    }
    .width('100%')
    .padding(20)
    .background(
      LinearGradient({
        angle: 90, // 渐变角度
        colors: [['#FF6B6B', '#4ECDC4']] // 自定义渐变颜色数组
      })
    )
    .borderRadius(16) // 圆角
  }
}
  1. 添加角标功能：
.badge({
  count: 5,
  position: BadgePosition.RightTop,
  style: { color: '#FFF', backgroundColor: '#FF3A30' }
})
  1. 封装为可配置组件：
@Component
struct CustomGradientCard {
  @Prop colors: string[][] = [['#667eea', '#764ba2']]
  @Prop borderRadius: number = 12
  @Prop badgeCount: number = 0

  build() {
    Column() {
      // 卡片主体内容
      this.ContentBuilder()
    }
    .background(LinearGradient({ angle: 90, colors: this.colors }))
    .borderRadius(this.borderRadius)
    .badge(this.badgeCount > 0 ? {
      count: this.badgeCount,
      position: BadgePosition.RightTop
    } : null)
  }
}

关键点：

  • 使用LinearGradient对象定义渐变参数，支持角度、颜色数组、方向等配置
  • 通过@Prop装饰器实现颜色、圆角、角标数量的动态配置
  • 角标使用Badge组件，可控制位置、样式和显示逻辑
  • 渐变性能优于Canvas绘制，更适合列表等高频使用场景

此方案完全基于声明式UI，无需调用Canvas API即可实现高性能渐变效果。

回到顶部