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

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

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

敬请关注。

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

HarmonyOS华为公司开发的全新分布式操作系统。它旨在连接物联网设备,提供统一的智能体验。以下是HarmonyOS第一课的答案。 1. HarmonyOS的核心特点是什么? HarmonyOS的核心特点是分布式架构。它可以将各种设备连接在一起,构建一个分布式系统,实现设备之间的协同工作和资源共享。这种架构使得应用程序可以在不同设备之间自由迁移,用户可以随时享受无缝的使用体验。 2. HarmonyOS与现有操作系统有何不同之处? HarmonyOS与现有操作系统不同之处在于其分布式能力。传统的操作系统通常只能在特定设备上运行,而HarmonyOS可以在不同类型的设备上运行,例如智能手机、平板电脑、智能手表、智能家居等。这使得不同设备之间可以实现资源共享和协同工作。 3. HarmonyOS的生态系统如何构建? HarmonyOS的生态系统是基于鸿蒙OS开发者联盟构建的。华为将会与合作伙伴一起开发应用程序和服务,提供给用户全新的智能体验。同时,开发者也可以利用HarmonyOS提供的开发框架和工具,快速构建自己的应用程序,并在不同设备上运行。 4. HarmonyOS的安全性如何保障? HarmonyOS采用了多重安全措施,确保系统和用户数据的安全。它具有隔离性,即不同应用程序之间相互隔离,一个应用的问题不会影响其他应用的运行。此外,HarmonyOS还使用了微内核架构,减少了系统核心代码的规模,提高了系统的安全性。 5. HarmonyOS的发展前景如何? HarmonyOS的发展前景非常广阔。首先,它可以解决设备之间互操作性的问题,实现设备的无缝连接和协同工作。其次,HarmonyOS可以加速应用程序的开发和迁移,提高开发效率和用户体验。最重要的是,HarmonyOS的开源策略将吸引更多的开发者和合作伙伴,进一步推动生态系统的建设。 总之,HarmonyOS是一款创新的分布式操作系统,具有分布式架构、跨设备运行、多重安全措施等特点。它将为用户带来全新的智能体验,并有着广阔的发展前景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值