「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用 原创

SoraLuna
发布于 2024-11-28 20:06
浏览
0收藏

自定义组件可以帮助开发者实现复用性强、逻辑清晰的界面模块。通过自定义组件,鸿蒙应用能够提高代码的可维护性,并简化复杂布局的构建。本篇将介绍如何创建自定义组件,如何向组件传递数据,以及如何在不同页面间复用这些组件。

「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用-鸿蒙开发者社区


关键词
  • 自定义组件
  • 复用组件
  • 属性传递
  • 组件通信
  • 组件封装

一、创建基础自定义组件

自定义组件是一个独立的 UI 单元,包含了特定的布局、样式和行为,可以在应用的不同部分复用。

1.1 基础自定义组件

创建一个显示标题和内容的简单组件,封装标题文字和内容区域:

// TitleContentCard.ets
@Component
export struct TitleContentCard {
  @Prop title: string; // 标题属性
  @Prop content: string; // 内容属性

  build() {
    Column() {
      Text(this.title)
        .fontSize(20) // 设置字体大小
        .fontWeight(FontWeight.Bold) // 设置字体加粗
        .margin({ bottom: 5 }); // 设置底部边距

      Text(this.content)
        .fontSize(16); // 设置内容字体大小

      Image($r('app.media.cat')) // 添加一张图片
        .width(305) // 设置图片宽度
        .height(360); // 设置图片高度
    }
    .padding(10) // 设置内边距
    .borderRadius(8) // 设置圆角
    .backgroundColor(Color.Gray); // 设置背景颜色
  }
}

1.2 使用自定义组件

在其他页面引用 TitleContentCard 组件,并传递标题和内容数据:

// Index.ets
import { TitleContentCard } from './TitleContentCard'; // 引入自定义组件

@Entry
@Component
struct MainPage {
  build() {
    Row() {
      TitleContentCard({ title: '组件标题', content: '这里是内容' });
      TitleContentCard({ title: '第二个标题', content: '更多内容展示' });
    }
    .padding(20); // 设置外边距
  }
}

效果示例:展示多个 TitleContentCard 实例,带有不同标题和内容。
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用-鸿蒙开发者社区


二、向自定义组件传递属性

自定义组件可以使用 @Prop 修饰符接收外部传入的属性,增强组件的复用性和灵活性。

2.1 属性传递

通过 @Prop 定义组件的参数,并从外部传递数据。以下示例中,titledescription 被传入并在组件中显示:

// InfoCard.ets
@Component
export struct InfoCard {
  @Prop title: string; // 标题属性
  @Prop description: string; // 描述属性

  build() {
    Column() {
      Text(this.title)
        .fontSize(18) // 设置标题字体大小
        .fontWeight(FontWeight.Bold); // 设置标题加粗

      Text(this.description)
        .fontSize(14) // 设置描述字体大小
        .margin({ top: 5 }); // 设置顶部边距
    }
    .padding(10) // 设置内边距
    .backgroundColor(Color.White) // 设置背景颜色
    .borderRadius(10); // 设置圆角
  }
}

效果示例:显示标题和描述,展示信息卡片。
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用-鸿蒙开发者社区


2.2 可选属性和默认值

@Prop 设置默认值,以防止外部未传递数据时出现错误:

// InfoCard.ets
@Component
export struct InfoCard {
  @Prop title: string = '默认标题'; // 设置默认标题
  @Prop description: string = '默认描述'; // 设置默认描述

  build() {
    Column() {
      Text(this.title)
        .fontSize(18)
        .fontWeight(FontWeight.Bold);

      Text(this.description)
        .fontSize(14)
        .margin({ top: 5 });
    }
    .padding(10)
    .backgroundColor(Color.White)
    .borderRadius(10);
  }
}

效果示例:当未传递标题和描述时,展示默认信息。
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用-鸿蒙开发者社区


三、嵌套与组合自定义组件

自定义组件可以嵌套使用,创建更复杂的 UI 布局,实现界面模块化。

3.1 组合组件示例

创建一个包含图片、标题和内容的卡片组件,并嵌套使用 TitleContentCard 组件:

// ImageCard.ets
import { TitleContentCard } from './TitleContentCard'; // 引入自定义组件

@Component
export struct ImageCard {
  @Prop imageUrl: string; // 图片 URL
  @Prop title: string; // 标题
  @Prop content: string; // 内容

  build() {
    Column() {
      Image(this.imageUrl)
        .width('100%') // 设置宽度
        .height(150) // 设置高度
        .objectFit(ImageFit.Cover) // 设置图片填充模式
        .borderRadius(10); // 设置圆角

      TitleContentCard({ title: this.title, content: this.content })
        .margin({ top: 10 }); // 设置顶部边距
    }
    .padding(10) // 设置内边距
    .backgroundColor(Color.White) // 设置背景颜色
    .borderRadius(10); // 设置圆角
  }
}
3.2 组合组件的使用

在其他组件中调用 ImageCard,并传入数据:

// Index.ets
ImageCard({
  imageUrl: 'https://example.com/sample.jpg',
  title: '图片标题',
  content: '这是一段描述文字。'
});

效果示例:展示包含图片、标题和内容的卡片。
「Mac畅玩鸿蒙与硬件23」鸿蒙UI组件篇13 - 自定义组件的创建与使用-鸿蒙开发者社区


四、组件状态管理与内部通信

  1. 内部状态管理

    • 自定义组件可以使用 @State 管理内部状态,控制组件内部的动态变化。例如,切换显示内容的状态:
    // ToggleContentCard.ets
    @Component
    export struct ToggleContentCard {
      @Prop title: string; // 标题
      @Prop content: string; // 内容
      @State isVisible: boolean = false; // 是否可见
    
      build() {
        Column() {
          Text(this.title)
            .fontSize(18)
            .onClick(() => {
              this.isVisible = !this.isVisible; // 切换可见状态
            });
    
          if (this.isVisible) {
            Text(this.content)
              .fontSize(16)
              .margin({ top: 10 });
          }
        }
        .padding(10)
        .backgroundColor(Color.Gray)
        .borderRadius(8);
      }
    }
    
  2. 父子组件通信

    • 父组件可以通过状态管理与子组件通信,实现数据共享。例如,父组件控制 ToggleContentCard 的显示状态:
    // Index.ets
    import { ToggleContentCard } from './ToggleContentCard'; // 引入子组件
    
    @Entry
    @Component
    struct MainPage {
      @State isCardVisible: boolean = false; // 卡片是否可见
    
      build() {
        Column() {
          Button('切换内容显示')
            .onClick(() => {
              this.isCardVisible = !this.isCardVisible; // 切换状态
            })
            .padding(10)
            .backgroundColor(Color.Green)
            .fontColor(Color.White)
            .borderRadius(5);
    
          if (this.isCardVisible) {
            ToggleContentCard({
              title: '点击标题查看内容',
              content: '这里是详细内容'
            })
            .margin(20);
          }
        }
        .padding(20)
        .width('100%')
        .height('100%')
        .alignItems(HorizontalAlign.Center) // 水平居中
        .justifyContent(FlexAlign.Center); // 垂直居中
      }
    }
    

五、自定义组件的最佳实践

  1. 组件拆分

    • 尽量将组件拆分为小而独立的部分,每个组件负责一项特定功能,减少耦合。
  2. 可重用性

    • 为组件提供通用的属性,设置默认值,确保组件在多种场景下均能复用。
  3. 性能优化

    • 避免在组件内部频繁更新状态,减少不必要的重绘,保证性能。

小结

本篇介绍了自定义组件的创建与使用,涵盖了属性传递、嵌套组合和状态管理等内容。通过自定义组件,开发者可以构建复用性强、逻辑清晰的 UI 模块,大大提升鸿蒙应用的开发效率和维护性。


下一篇预告

下一篇将带你体验第一个互动项目——“灯光控制小项目”,学习如何结合按钮交互和状态管理来实现动态效果。


上一篇: 「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用

下一篇: 「Mac畅玩鸿蒙与硬件24」UI互动应用篇1 - 灯光控制小项目


作者:SoraLuna
链接:https://www.nutpi.net/thread?topicId=271
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-11-28 20:20:47修改
收藏
回复
举报
回复
    相关推荐