HarmonyOS第一课 05 从简单的页面开始-开发代码2

本文的内容是使用ArkUI继续完成一个简单的页面。上节内容已经完成了上半部分，接下来继续完成下半部分。

页面具体实现如图：

下载本节内容的素材。「链接」

创建赋能套件

在Index.ets文件中新建控件EnablementItem

需要完成的案例:

EnablementItem布局:

EnablementItem布局代码:

@Preview
@Component
struct EnablementItem{
  private title: string = 'HarmonyOS第一课';
  private brief: string = '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。';

  build() {
    Column(){
      /**
       * 使用$r的方式给Image组件设置图片资源，设置图片宽度为100%，即宽度与根容器Column保持一致。

       设置填充效果为cover模式，即保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
       */
      Image($r('app.media.enablement_pic1')).width('100%').objectFit(ImageFit.Cover)
        .height(96)
        // 图片圆角边框
        .borderRadius({
          topLeft:16,
          topRight:16
        })

      /*
      接下来给Text组件添加属性，textOverFlow属性设置文本超长时的显示方式，在这里我们设置它的值为Ellipsis，表示超长时使用省略号替代。

maxLines属性设置文本的最大行数，我们设置title最多显示一行，brief最多显示两行。

到这里我们完成了“赋能套件介绍”网格布局Item的创建。
       */
      Text(this.title)
        .height(19)
        .width('100%')
        .fontSize(14)
        .textAlign(TextAlign.Start)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(1)
        .fontWeight(400)
        .padding({ left: 12, right: 12 })
        .margin({ top: 8 })
      // 第二行文字
      Text(this.brief)
        .height(32)
        .width('100%')
        .fontSize(12)
        .textAlign(TextAlign.Start)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(2)
        .fontWeight(400)
        .fontColor('rgba(0, 0, 0, 0.6)')
        .padding({ left: 12, right: 12 })
        .margin({ top: 2 })

    }.width(160)
    .height(169)
    .borderRadius(16)
    .backgroundColor(Color.White)
    
  }
}

整个index.ets的代码:

import image from '@ohos.multimedia.image';

// 新建一个Banner类,便于滑动
class BannerClass{
  id:string="";//用于唯一标识每一张图片资源，在之后的ForEach内容中我们会看到其作用
  imgSrc:ResourceStr = ""; //imageSrc属性，用于存储图片地址
  url:string =""; //用于存储Banner图片点击后跳转到的在线网页地址，在之后的跳转功能中会用到。

  // 按住alt+insert键,可以自动生成构造方法
  constructor(id: string, imgSrc: ResourceStr, url: string) {
    this.id = id;
    this.imgSrc = imgSrc;
    this.url = url;
  }
}


@Entry
@Component
struct Index {
  @State message: string = '快速入门';

  build() {
    Column() {
      Text(this.message)
        //.id('HelloWorld') // 这个不需要
        .fontSize(24)
        .fontWeight('700')
        .width("100%")
        .textAlign(TextAlign.Start)
        .padding({"left":16})
        .fontFamily("HarmonyHeiTi-Bold")
        .lineHeight(33)
      // 把Banner放在文字的下面
      Banner()
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#F1F3F5")
  }
}

// 新建一个Banner
@Component
@Preview
struct Banner{

  @State bannerList: Array<BannerClass>=[
    new BannerClass('pic0',$r('app.media.banner_pic0'),'https://developer.huawei.com'),
    new BannerClass('pic1',$r('app.media.banner_pic1'),'https://developer.huawei.com'),
    new BannerClass('pic2',$r('app.media.banner_pic2'),'https://developer.huawei.com'),
    new BannerClass('pic3',$r('app.media.banner_pic3'),'https://developer.huawei.com'),
    new BannerClass('pic4',$r('app.media.banner_pic4'),'https://developer.huawei.com'),
    new BannerClass('pic5',$r('app.media.banner_pic5'),'https://de