自学内容网 自学内容网
自学内容网 > 正文

HarmonyOS第一课 05 从简单的页面开始-开发01

🕗 发布于 2024-10-10 03:53 harmonyos  华为  鸿蒙  

6b3b216e9e1f447ea762dbc48b0759eb.png

学习了第05课之后，按照官方教程，自己写一个界面来，官方提供了非常多的素材，按照教程来一步步即可完成，接下来，我把我的操作步骤记录下来，形成第一个鸿蒙界面。

第一步，新建项目

打开DS，新建一个Empty Ability项目。

26d7f64dadea4860a450340c349e2444.png

6383f76832b94b538a2e34f4c60c2936.png

除了car不勾选之外，其他都勾上。

046aac20ad4e4e9585482d421446c8ab.png

新建项目完成。

b4fee7741b9a433486ccc1e2668c4e64.png

点击Previewer。出现了hello world。

第二步，创建页面。

下载官方案例素材。下载地址：「链接」

20987b86694549818095e1d19ac1dc08.png

目标界面：

db9e2c6ef8454fb6bd799daad431ecb2.png

1，将背景和logo换了。

0c0df76febe74d4aa0c8bbffac6182ce.png

2，设计界面。

先把“快速入门”这四个字先写出来。

0318938f71c14b239f90b7d810623a53.png 
@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)
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#F1F3F5")
  }
}

创建Image组件

在上一节中，我们创建了标题视图，接下来需要使用Image组件添加图片。Previewer可以直接预览@Entry装饰器装饰的整个页面，也可以预览由@Preview装饰器装饰的单独组件。 本节中将学习如何单独预览组件视图，并将视图组合进整个页面。

7ffc9735f05e4bb5af7889e220a945ed.png

组合标题和图片视图。

在@Entry装饰器装饰的Index组件中引入Banner组件，放在Text的下方，使用预览器预览完整视图。

c9092ec6bbb44712b668e18648690115.png

创建Swiper，制作课滑动的Banner

官方提供了banner的素材。下载地址：「链接」

根据设计图可以看到快速入门Banner运营位由多张图片资源构成，于是我们可以在Index.ets文件中创建一个BannerClass类，用于表示每张图片资源的数据结构。

0a08c46e07a448789e7a60eb6dc06bad.png

将素材复制到media文件夹中。

然后新建一个Banner类,便于滑动


// 新建一个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;
  }
}


// 新建一个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://developer.huawei.com')

  ]

  build() {
    Image($r('app.media.banner_pic1')).objectFit(ImageFit.Contain)
      .width("100%")
      // 这里能否合并left和right?
      .padding({"left":16,"right":16,"top":11})
      // 圆角边框
      .borderRadius(16)
  }
}

//上面两部分都是index.ets的内容,所以,整个index.ets就是如下的代码

// 新建一个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://developer.huawei.com')

  ]

  build() {
    Image($r('app.media.banner_pic1')).objectFit(ImageFit.Contain)
      .width("100%")
      // 这里能否合并left和right?
      .padding({"left":16,"right":16,"top":11})
      // 圆角边框
      .borderRadius(16)
  }
}

好了,我们完成了渲染数据源的准备，接下来，会使用创建好的数据完成Banner运营位的实现。

我们发现快速入门Banner位为一个轮播图效果。于是我们使用Swiper组件作为外层容器。可以看到现在轮播图具有一个可以轮播的Banner图。

e9451b88a30c4610abbebfb0653a52c7.png

以上的代码只有一个Image，如果想加入5个image，那么需要使用for循环了。

  // 滑动块,将image包裹起来
    Swiper(){
      
      ForEach(this.bannerList,(item:BannerClass,index:number)=>{
        Image(item.imgSrc).objectFit(ImageFit.Contain)
          .width("100%")
            // 这里能否合并left和right?
          .padding({"left":16,"right":16,"top":11})
            // 圆角边框
          .borderRadius(16)
      },(item:BannerClass,index:number)=>item.id)

    }
    //设置一下Swiper的属性。其中，autoPlay控制是否自动轮播子组件，loop属性控制是否循环播放，
    // indicator属性自定义导航点的位置和样式。
    .autoPlay(true)
    .loop(true)
    .indicator(new DotIndicator().color('#1a000000').selectedColor("#0a59f7"))
8b17f7bf90834a7f87a547ea44eb12eb.png

好了，现在已经学会了完成上面一部分了，下节咱们继续完成下半部分。

敬请关注。

完成之后，我将把写好注释的代码提供免费下载。


原文地址：https://blog.csdn.net/li060708/article/details/142796632

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024