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

// 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.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

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

@Entry
@Component
struct MainPage {
  build() {
    Row() {
      TitleContentCard({ title: '组件标题', content: '这里是内容' });
      TitleContentCard({ title: '第二个标题', content: '更多内容展示' });
    }
    .padding(20); // 设置外边距
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

// 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); // 设置圆角
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

// 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);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.

// 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); // 设置圆角
  }
}
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.

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