【鸿蒙next开发】ArkUI框架：ArkTS组件-背景设置

于 2025-05-12 14:08:01 发布
阅读量847 收藏 6
点赞数 18
分类专栏： 鸿蒙5.0开发 ArkUI框架 ArkTS组件 文章标签： harmonyos 华为 android ArkUI 前端 ArkTS 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/147895563
版权

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

背景设置

设置组件的背景样式。

说明

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

background10+

background(builder: CustomBuilder, options?: { align?: Alignment })

设置组件背景。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
builderCustomBuilder是自定义背景。
options{align?:Alignment}否

设置自定义背景与组件的对齐方式。

同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。

说明

自定义背景渲染会有一定延迟，不能响应事件，不能进行动态更新。该属性不支持嵌套使用，不支持预览器预览。

backgroundColor

backgroundColor(value: ResourceColor)

设置组件背景色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是设置组件的背景色。

说明

当通过backgroundBlurStyle中的inactiveColor指定背景色时，不建议再通过backgroundColor设置背景色。

backgroundImage

backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat)

设置组件的背景图片。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
srcResourceStr | PixelMap12+是图片地址，支持网络图片资源地址和本地图片资源地址和Base64或者PixelMap资源，不支持svg类型的图片。
repeatImageRepeat否设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。

backgroundImageSize

backgroundImageSize(value: SizeOptions | ImageSize)

设置组件背景图片的宽高。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueSizeOptions | ImageSize是

设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。

width和height取值范围： [0, +∞)

默认值：ImageSize.Auto

说明：

width和height均设置为小于或等于0的值时，按值为0显示。当width和height中只有一个值未设置或者设置为小于等于0的值时，另一个会根据图片原始宽高比进行调整。

backgroundImagePosition

backgroundImagePosition(value: Position | Alignment)

设置背景图的位置。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuePosition | Alignment是

设置背景图在组件中显示位置，即相对于组件左上角的坐标。

默认值：

{

x: 0,

y: 0

}

x和y值设置百分比时，偏移量是相对组件自身宽高计算的。

BlurStyle9+

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
Thin

轻薄材质模糊。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

Regular

普通厚度材质模糊。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

Thick

厚材质模糊。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

BACKGROUND_THIN10+

近距景深模糊。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

BACKGROUND_REGULAR10+

中距景深模糊。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

BACKGROUND_THICK10+

远距景深模糊。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

BACKGROUND_ULTRA_THICK10+

超远距景深模糊。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

NONE10+

关闭模糊。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

COMPONENT_ULTRA_THIN11+

组件超轻薄材质模糊。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

COMPONENT_THIN11+

组件轻薄材质模糊。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

COMPONENT_REGULAR11+

组件普通材质模糊。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

COMPONENT_THICK11+

组件厚材质模糊。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

COMPONENT_ULTRA_THICK11+

组件超厚材质模糊。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

backgroundBlurStyle9+

backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions)

为当前组件提供一种在背景和内容之间的模糊能力，通过枚举值的方式封装了不同的模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueBlurStyle是背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。
options10+BackgroundBlurStyleOptions否背景模糊选项。

说明

当通过backgroundBlurStyle中的inactiveColor指定背景色时，不建议再通过backgroundColor设置背景色。

backdropBlur

backdropBlur(value: number, options?: BlurOptions)

为组件添加背景模糊效果，可以自定设置模糊半径和灰阶参数。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。
options11+BlurOptions否灰阶梯参数。

说明

blur和backdropBlur是实时模糊接口，会每帧进行实时渲染，性能负载较高。当模糊内容和模糊半径都不需要变化时，建议使用静态模糊接口。

backgroundEffect11+

backgroundEffect(options: BackgroundEffectOptions)

设置组件背景属性，包含背景模糊半径，亮度，饱和度，颜色等参数。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsBackgroundEffectOptions是设置组件背景属性包括：饱和度，亮度，颜色。

BackgroundEffectOptions11+

背景效果参数。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
radiusnumber是模糊半径，取值范围：[0, +∞)，默认为0。
saturationnumber否饱和度，取值范围：[0, +∞)，默认为1。推荐取值范围：[0, 50]。
brightnessnumber否亮度，取值范围：[0, +∞)，默认为1。推荐取值范围：[0, 2]。
colorResourceColor否颜色，默认透明色。
adaptiveColorAdaptiveColor否背景模糊效果使用的取色模式,默认为DEFAULT。使用AVERAGE时color必须带有透明度，取色模式才生效。
blurOptionsBlurOptions否灰阶模糊参数，默认为[0,0]。

backgroundImageResizable12+

backgroundImageResizable(value: ResizableOptions)

设置背景图在拉伸时可调整大小的图像选项。

设置合法的ResizableOptions时，backgroundImage属性中的repeat参数设置不生效。

当设置top+bottom大于原图的高或者left+right大于原图的宽时，ResizableOptions属性设置不生效。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResizableOptions是图像拉伸时可调整大小的图像选项。

BackgroundBlurStyleOptions10+对象说明

继承自BlurStyleOptions

元服务API： 从API version 11开始，该接口支持在元服务中使用。

backgroundBrightness12+

backgroundBrightness(params: BackgroundBrightnessOptions)

设置组件背景提亮效果。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
paramsBackgroundBrightnessOptions是设置组件背景提亮效果，包括：亮度变化速率，提亮程度。

BackgroundBrightnessOptions12+对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
ratenumber是

亮度变化速率。亮度变化速率越大，提亮程度下降速度越快。若rate为0，则lightUpDegree将不生效，即不会产生任何提亮效果。

默认值：0.0

取值范围：(0.0, +∞)

lightUpDegreenumber是

提亮程度。提亮程度越大，亮度提升程度越大。

默认值：0.0

取值范围：[-1.0, 1.0]

说明

对于组件背景内容，每个像素自身的亮度（灰阶值）的计算公式为：

Y = （0.299R + 0.587G + 0.114B）/ 255.0（R、G、B分别表示像素红色、绿色和蓝色通道的值，Y表示灰阶值），通过上述公式将像素点的灰阶值归一化至0~1的范围。

每个像素的亮度提升计算公式为：ΔY = -rate*Y + lightUpDegree。例如，当rate=0.5，lightUpDegree=0.5时，对于灰阶值为0.2的像素点，亮度增加值为-0.5*0.2 + 0.5 = 0.4，对于灰阶值为1的像素点，亮度增加值为-0.5*1 + 0.5 = 0。

示例

示例1（设置背景基础样式）

该示例通过配置backgroundColor、backgroundImage、backgroundImageSize和backgroundImagePosition设置背景的基础样式。

// xxx.ets
@Entry
@Component
struct BackgroundExample {

  build() {
    Column({ space: 5 }) {
      Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 })

      Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .backgroundImage('/comment/bg.jpg', ImageRepeat.X)
        .backgroundImageSize({ width: '250px', height: '140px' })
        .width('90%')
        .height(70)
        .border({ width: 1 })

      Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .backgroundImage('/comment/bg.jpg', ImageRepeat.Y)
        .backgroundImageSize({ width: '500px', height: '120px' })
        .width('90%')
        .height(100)
        .border({ width: 1 })

      Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .width('90%').height(150)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize({ width: 1000, height: 500 })
        .border({ width: 1 })

      Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      // 不保证图片完整的情况下占满盒子
      Row()
        .width(200)
        .height(50)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Cover)
        .border({ width: 1 })

      Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC)
      // 保证图片完整的情况下放到最大
      Row()
        .width(200)
        .height(50)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize(ImageSize.Contain)
        .border({ width: 1 })

      Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(50)
        .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat)
        .backgroundImageSize({ width: 1000, height: 560 })
        .backgroundImagePosition({ x: -500, y: -300 })
        .border({ width: 1 })
    }
    .width('100%').height('100%').padding({ top: 5 })
  }
}

示例2（设置背景模糊样式）

该示例通过backgroundBlurStyle设置背景模糊样式。

// xxx.ets
@Entry
@Component
struct BackgroundBlurStyleDemo {
  build() {
    Column() {
      Row() {
        Text("Thin Material")
      }
      .width('50%')
      .height('50%')
      .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 })
      .position({ x: '15%', y: '30%' })
    }
    .height('100%')
    .width('100%')
    .backgroundImage($r('app.media.bg'))
    .backgroundImageSize(ImageSize.Cover)
  }
}

示例3（设置组件背景）

该示例通过background设置组件背景。

// xxx.ets
@Entry
@Component
struct BackgroundExample {
  @Builder renderBackground() {
    Column() {
      Progress({value : 50})
    }
  }

  build() {
    Column() {
      Text("content")
        .width(100)
        .height(40)
        .fontColor("#FFF")
        .position({x:50, y:80})
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Green)
    }
    .width(200).height(200)
    .background(this.renderBackground)
    .backgroundColor(Color.Gray)
  }
}

示例4（设置组件背景提亮效果）

该示例通过backgroundBrightness设置组件背景提亮效果。

// xxx.ets
@Entry
@Component
struct BackgroundBrightnessDemo {
  build() {
    Column() {
      Row() {
        Text("BackgroundBrightness")
      }
      .width(200)
      .height(100)
      .position({ x: 100, y: 100 })
      .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT})
      .backgroundBrightness({rate:0.5,lightUpDegree:0.5}) // 背景提亮效果
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r('app.media.image'))
    .backgroundImageSize(ImageSize.Cover)
  }
}

效果图如下：

rate和lightUpDegree参数值为0.5,0.5：

修改rate和lightUpDegree参数值为0.5,-0.1：

去掉backgroundBrightness的设置，效果如下：

示例5（设置模糊属性）

该示例提供了模糊属性的实现方法。通过blur设置内容模糊，通过backdropBlur设置背景模糊。

// xxx.ets
@Entry
@Component
struct BlurEffectsExample {
  build() {
    Column({ space: 10 }) {
      // 对字体进行模糊
      Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Flex({ alignItems: ItemAlign.Center }) {
        Text('original text').margin(10)
        Text('blur text')
          .blur(5).margin(10)
        Text('blur text')
          .blur(10).margin(10)
        Text('blur text')
          .blur(15).margin(10)
      }.width('90%').height(40)
      .backgroundColor(0xF9CF93)



      // 对背景进行模糊
      Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%')
      Text()
        .width('90%')
        .height(40)
        .fontSize(16)
        .backdropBlur(3)
        .backgroundImage($r('app.media.image'))
        .backgroundImageSize({ width: 1200, height: 160 })
    }.width('100%').margin({ top: 5 })
  }
}

示例6（设置文字异形模糊效果）

该示例通过blendMode和backgroundEffect实现文字异形模糊效果。

如果出现漏线问题，开发者应首先确保两个blendMode所在组件大小严格相同。如果确认相同，可能是组件边界落在浮点数坐标上导致，可尝试设置pixelRound通用属性，使产生的白线、暗线两侧的组件边界对齐到整数像素坐标上。

// xxx.ets
@Entry
@Component
struct Index {
  @State shColor: Color = Color.White;
  @State sizeDate: number = 20;
  @State rVal: number = 255;
  @State gVal: number = 255;
  @State bVal: number = 255;
  @State aVal: number = 0.1;
  @State rad: number = 40;
  @State satVal: number = 0.8;
  @State briVal: number = 1.5;
  build() {
    Stack() {
      Image($r('app.media.image'))
      Column() {
        Column({ space: 0 }) {
          Column() {
            Text('11')
              .fontSize(144)
              .fontWeight(FontWeight.Bold)
              .fontColor('rgba(255,255,255,1)')
              .fontFamily('HarmonyOS-Sans-Digit')
              .maxLines(1)
              .lineHeight(120 * 1.25)
              .height(120 * 1.25)
              .letterSpacing(4 * 1.25)
            Text('42')
              .fontSize(144)
              .fontWeight(FontWeight.Bold)
              .fontColor('rgba(255,255,255,1)')
              .fontFamily('HarmonyOS-Sans-Digit')
              .maxLines(1)
              .lineHeight(120 * 1.25)
              .height(120 * 1.25)
              .letterSpacing(4 * 1.25)
              .shadow({
                color: 'rgba(0,0,0,0)',
                radius: 20,
                offsetX: 0,
                offsetY: 0
              })
            Row() {
              Text('10月16日')
                .fontSize(this.sizeDate)
                .height(22)
                .fontWeight('medium')
                .fontColor('rgba(255,255,255,1)')
              Text('星期一')
                .fontSize(this.sizeDate)
                .height(22)
                .fontWeight('medium')
                .fontColor('rgba(255,255,255,1)')
            }
          }
          .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
          .pixelRound({
            start: PixelRoundCalcPolicy.FORCE_FLOOR ,
            top: PixelRoundCalcPolicy.FORCE_FLOOR ,
            end: PixelRoundCalcPolicy.FORCE_CEIL,
            bottom: PixelRoundCalcPolicy.FORCE_CEIL
          })
        }
        .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
        .backgroundEffect({
          radius: this.rad,
          saturation: this.satVal,
          brightness: this.briVal,
          color: this.getVolumeDialogWindowColor()
        })
        .justifyContent(FlexAlign.Center)
        .pixelRound({
          start: PixelRoundCalcPolicy.FORCE_FLOOR ,
          top: PixelRoundCalcPolicy.FORCE_FLOOR ,
          end: PixelRoundCalcPolicy.FORCE_CEIL,
          bottom: PixelRoundCalcPolicy.FORCE_CEIL
        })
      }
    }
  }
  getVolumeDialogWindowColor(): ResourceColor | string {
    return `rgba(${this.rVal.toFixed(0)}, ${this.gVal.toFixed(0)}, ${this.bVal.toFixed(0)}, ${this.aVal.toFixed(0)})`;
  }
}

示例7（模糊效果对比）

该示例对比了backgroundEffect、backDropBlur和backgroundBlurStyle三种不同的模糊效果。

// xxx.ets
// xxx.ets
@Entry
@Component
struct BackGroundBlur {
  private imageSize: number = 150;

  build() {
    Column({ space: 5 }) {
      // backgroundBlurStyle通过枚举值的方式设置模糊参数
      Stack() {
        Image($r('app.media.test'))
          .width(this.imageSize)
          .height(this.imageSize)
        Column()
          .width(this.imageSize)
          .height(this.imageSize)
          .backgroundBlurStyle(BlurStyle.Thin)
      }

      // backgroundEffect 可以自定义设置 模糊半径，亮度，饱和度等参数
      Stack() {
        Image($r('app.media.test'))
          .width(this.imageSize)
          .height(this.imageSize)
        Column()
          .width(this.imageSize)
          .height(this.imageSize)
          .backgroundEffect({ radius: 20, brightness: 0.6, saturation: 15 })
      }

      // backdropBlur 只能设置模糊半径和灰阶参数
      Stack() {
        Image($r('app.media.test'))
          .width(this.imageSize)
          .height(this.imageSize)
        Column()
          .width(this.imageSize)
          .height(this.imageSize)
          .backdropBlur(20, { grayscale: [30, 50] })
      }
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

鸿蒙5.0版开发：ArkTS组件通用属性-背景设置
m0_69424697的博客
10-22 1258
设置组件的背景样式。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（背景设置）
Androidbye的博客
12-20 868
设置组件的背景样式。
鸿蒙HarmonyOS应用开发：ArkTS声明式UI设计中的背景设置艺术
qq_44103359的博客
05-05 1107
在鸿蒙HarmonyOS的应用开发中，ArkTS（ArkUI）是一种新兴的声明式开发框架，它允许开发者以更简洁、直观的方式构建用户界面。在ArkTS中，有许多通用属性可以应用于各种组件，以增强其功能和视觉效果。本文将重点探讨其中一个重要属性：背景设置。
OpenHarmony实战开发-如何实现background-position样式动画开发
m0_70749039的博客
04-30 296
通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。
ArkTS -- 背景属性
2301_79617863的博客
11-22 513
ArkTS中的背景属性
鸿蒙next版开发：ArkTS组件通用属性（背景设置）
小淼淼的博客
11-12 1149
通过本文的介绍，你应该对HarmonyOS 5.0中ArkTS组件的背景设置有了基本的了解。背景设置是UI开发中的重要环节，合理利用这些属性可以使你的应用界面更加美观和实用。希望本文能够帮助你在开发过程中更好地利用ArkTS的背景设置属性。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（自定义绘制设置）
最新发布
Androidbye的博客
12-27 912
当某些组件本身的绘制内容不满足需求时...........
鸿蒙5.0版开发：ArkTS组件-LoadingProgress
m0_69424697的博客
11-17 959
用于显示加载动效的组件。
鸿蒙5.0版开发：ArkTS组件-TimePicker
m0_69424697的博客
11-10 914
时间选择组件，根据指定参数创建选择器，支持选择小时及分钟。
鸿蒙5.0版开发：ArkTS组件-Radio
m0_69424697的博客
11-10 776
单选框，提供相应的用户交互选择项。
鸿蒙5.0版开发：ArkTS组件通用属性（背景设置）
m0_73088370的博客
08-27 2645
设置组件的背景样式。
ArkTS中background相关的方法详细介绍
LIUCHANGSHUO的博客
08-29 1607
当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。当设置top+bottom大于原图的高或者left+right大于原图的宽时，ResizableOptions属性设置不生效。params:设置组件背景提亮效果，包括：亮度变化速率，提亮程度。options:设置组件背景属性包括：饱和度，亮度，颜色。
ArkTs简单入门案例：简单的图片切换应用界面
zhiqiuqiu2的博客
11-13 1532
这段代码主要实现了一个简单的图片切换应用界面。通过定义一个组件。
鸿蒙Harmony应用开发—ArkTS（@BuilderParam装饰器：引用@Builder函数）
m0_64420071的博客
03-22 2013
当开发者创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：菜单控制）
m0_64420071的博客
03-04 1645
ArkTS声明式开发（通用属性：菜单控制）
鸿蒙HarmonyOS NEXT开发：无障碍属性（ArkTS通用属性）
shudaoshanBBQ的博客
08-10 1341
组件可以设置相应的无障碍属性和事件来更好地使用无障碍能力。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：背景设置）
m0_64420071的博客
03-01 9384
ArkTS声明式开发（通用属性：背景设置）
鸿蒙arkts的图片资源引入方式和样式的复用方式
weixin_63448554的博客
12-23 3994
组件内的样式不需要使用function 关键字声明，而组件外的样式需要function声明，需要在加上@style修饰符。关于arkts语言的图片资源引入方式目前有下面三种，大家随意选用就好，都可以实现效果。大家好我是海岛，分享一下在传智博学谷学习的一些知识技术。
鸿蒙开发之ArkUI 界面篇 十三 背景图尺寸
renfujiang的专栏
09-20 463
backgroundImageSize(ImageSize.Contain),等比列缩放背景图，当宽或者是高与组件相同停止缩放，可能会留白。
基于鸿蒙next 开发，用ArkTs 写一个登录页面
11-18
基于HarmonyOS Next (鸿蒙操作系统下一代版本)，使用ArkUI框架下的ARK TypeScript (ArkTs) 开发登录页面，可以按照以下步骤进行： 1. **安装环境**: 首先确保已经安装了HarmonyOS的开发工具以及支持ARK UI的SDK，并配置好TypeScript的环境。 2. **创建项目**: 使用`arkcmd start project`命令初始化一个新的项目，选择适合的模板，例如`hms app`，这将为你创建一个基本的HarmonyOS应用骨架。 3. **引入 ArkTs**: 在项目的src文件夹中，添加必要的依赖，如`@ohos/arkui/components`，这是提供基础组件的库。 4. **设计登录界面**: - 创建登录组件: 在`pages/login.tsx` 或者专门的`login`模块下编写登录页的组件。 ```typescript import { Page, Button, Input } from '@ohos/arkui/components'; export default class LoginPage extends Page { // ...定义组件属性、状态和生命周期函数 render() { return ( <Input placeholder="请输入用户名" /> <Button onClick={this.handleSubmit}>登录</Button> ); } handleSubmit = async () => { // 这里处理登录逻辑 }; } ``` 5. **样式定制**: 使用ARKUI提供的样式API或者自定义主题来调整页面外观，比如颜色、字体等。 6. **导航管理**: 考虑使用`navigator`进行页面跳转，用户完成登录后可以导航到主页面。 7. **测试**: 在模拟器上运行并测试登录功能，确保输入验证、网络请求和错误处理等功能正常。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值