HarmonyOS Next页面开发中的自定义组件原创

SameX

发布于 2025-2-28 10:44

浏览

0收藏

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。

在HarmonyOS Next的页面开发过程中，自定义组件就像是搭建乐高积木时那些精心制作的特殊模块，它们为开发者提供了高度的灵活性和复用性。接下来，我们就深入了解一下自定义组件在ArkTS中的重要性、创建方法以及如何确保其在不同屏幕下都能完美适配。

为什么需要自定义组件？（在ArkTS中封装复用组件）

在大型应用开发中，代码的复用性和可维护性是至关重要的。想象一下，如果每次在不同页面需要展示一个特定样式的按钮，都要重新编写一遍代码，不仅工作量巨大，而且后期维护和修改也会变得异常困难。这时候自定义组件就派上用场了。

在ArkTS中，自定义组件可以将常用的UI元素或功能逻辑封装起来，形成一个个独立的、可复用的模块。这样，当我们在多个页面需要相同的功能或样式时，只需要引用这个自定义组件，而无需重复编写代码。这不仅大大提高了开发效率，还能确保整个应用的风格一致性。同时，当需要对某个功能进行修改时，只需要在自定义组件中进行调整，所有引用该组件的页面都会自动更新，有效降低了维护成本。

例如，在一个电商应用中，商品列表项的展示在多个页面都有出现，包括商品搜索结果页、分类商品列表页等。通过将商品列表项封装成一个自定义组件，我们可以在不同页面轻松复用，并且当需要调整商品列表项的样式或交互逻辑时，只需要修改这一个组件即可，避免了在多个页面中逐一修改的繁琐操作。

如何创建可复用的布局组件（示例代码 + 自适应布局方案）

下面我们通过一个简单的卡片式布局组件示例，来看看如何在ArkTS中创建可复用的布局组件，并融入自适应布局方案。

@Component
struct CardComponent {
    @Prop title: string
    @Prop content: string
    @Prop image: Resource

    build() {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
            Image(this.image).width(100).height(100).objectFit(ImageFit.Contain)
            Text(this.title).fontSize(18).fontWeight(500).margin({ top: 10 })
            Text(this.content).fontSize(14).opacity(0.8).margin({ top: 5 })
        }
          .width('90%')
          .backgroundColor('#FFFFFF')
          .padding(20)
          .borderRadius(16)
          .shadow({
                color: '#00000040',
                offset: { x: 0, y: 4 },
                blurRadius: 10
            })
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

在上述代码中，我们创建了一个名为CardComponent的自定义组件。它接受title、content和image三个属性，用于展示卡片的标题、内容和图片。在组件内部，使用Flex组件进行布局，实现了垂直方向的排列，并通过设置width('90%')使卡片宽度自适应父容器，同时设置了背景色、圆角、阴影等样式，让卡片看起来更加美观。

在实际使用中，我们可以这样引用这个组件：

@Entry
@Component
struct MainPage {
    build() {
        Column() {
            CardComponent({
                title: '示例标题',
                content: '这是一段示例内容',
                image: $r('app.media.exampleImage')
            })
            CardComponent({
                title: '另一个标题',
                content: '不同的示例内容',
                image: $r('app.media.anotherImage')
            })
        }
          .width('100%')
          .height('100%')
          .justifyContent(FlexAlign.Center)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

这样，在MainPage中，我们轻松复用了CardComponent组件，展示了两个不同内容的卡片。

响应式 + 自适应组件封装技巧（确保组件在不同屏幕下都能适配）

为了确保自定义组件在不同屏幕下都能完美适配，我们需要结合响应式和自适应布局的技巧。下面我们对上面的CardComponent进行升级，使其具备响应式和自适应能力。

@Component
struct ResponsiveCardComponent {
    @Prop title: string
    @Prop content: string
    @Prop image: Resource
    @State currentBreakpoint: string ='sm'

    build() {
        GridRow({ breakpoints: { value: ['600vp'], reference: BreakpointsReference.WindowSize } }) {
            GridCol({ span: { sm: 12, md: 6 } }) {
                Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
                    Image(this.image).width(this.currentBreakpoint ==='sm'? '100%' : '60%').height(this.currentBreakpoint ==='sm'? 100 : 150).objectFit(ImageFit.Contain)
                    Text(this.title).fontSize(this.currentBreakpoint ==='sm'? 16 : 20).fontWeight(500).margin({ top: 10 })
                    Text(this.content).fontSize(this.currentBreakpoint ==='sm'? 12 : 16).opacity(0.8).margin({ top: 5 })
                }
                  .width('100%')
                  .backgroundColor('#FFFFFF')
                  .padding(20)
                  .borderRadius(16)
                  .shadow({
                        color: '#00000040',
                        offset: { x: 0, y: 4 },
                        blurRadius: 10
                    })
            }
        }
          .onBreakpointChange((breakpoint: string) => {
                this.currentBreakpoint = breakpoint
            })
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

在这个升级后的组件ResponsiveCardComponent中，我们引入了GridRow和GridCol组件来实现响应式布局。通过设置breakpoints，在不同断点（这里以600vp为界区分sm和md断点）下，GridCol组件占据不同的列数，从而调整卡片在页面中的宽度。同时，根据断点的变化，我们还动态调整了图片的宽度、高度以及文字的字体大小，使组件在不同屏幕尺寸下都能保持良好的显示效果。例如，在小屏幕（sm断点）下，图片宽度为100%，高度为100，文字字体较小；而在大屏幕（md断点）下，图片宽度为60%，高度为150，文字字体更大，以充分利用屏幕空间。

在实际应用中，这样的自定义组件可以在各种设备上展现出合适的布局和样式，为用户提供一致且优质的体验。无论是手机、平板还是大屏设备，都能自适应调整，满足不同设备的显示需求。

通过合理利用自定义组件，结合响应式和自适应布局技巧，我们能够在HarmonyOS Next的页面开发中构建出高效、灵活且适配各种屏幕的应用界面。希望这些内容能帮助开发者在实际项目中更好地运用自定义组件，提升开发效率和应用质量。

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

HarmonyOS

标签

鸿蒙