跳至主要內容

HarmonyOS 4.0 学习

sixkey大约 20 分钟操作系统HarmonyOSHarmonyOS

HarmonyOS 4.0 学习

一、编辑器安装

省略…….

二、坑合集

1、路由返回失效

.onClick(()=>{
      router.back()
    })

想返回前一页时必须先是从前一页跳过来的，否则无法调回去

2、image组件使用

需先申请网络权限，在module.json5文件中配置

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ]

可以加载两种形式的图片

（1）、字符串的网络地址

（2）、项目中的资源文件

（1）、字符串的网络地址

Image(`https://n.sinaimg.cn/sinakd10116/732/w640h892/20210220/b911-kkciesr8828420.jpg`)

（2）、项目中的资源文件

加载media目录下的网络地址文件

Image($r('app.media.icon'))
        .width(300)

加载rawfile目录下的资源文件：不能以中文命名文件

Image($rawfile('lyf.png'))

3、自定义组件

1、直接在组件内部自定义组件

2、使用@Builder装饰器自定义组件

特别注意：整个项目中不能出现相同名的自定义组件，否则不展示组件内容，这是一个大坑，特别注意

1、直接在组件内部自定义组件

@Entry
@Component
struct TodoPoem {
  @State message: string = '诗文学习'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()
        //使用自定义组件
        itemComponent({content: "我是谁？"})
        itemComponent({content: "你是谁？"})
        itemComponent({content: "她是谁？"})
        itemComponent({content: "他是谁？"})
        itemImage({name: '刘亦菲'})
      }
      .width('100%')
      .padding({top: 10,left: 15,right: 15})
    }
    .height('100%')
  }
}

//自定义组件内容
@Component
struct itemComponent{
  content:string = ''
  @State isDone:boolean = false
  build(){
    Row(){
      Image(this.isDone ? $r('app.media.output') : $r('app.media.outpu'))
        .width(80)
        .height(80)
        .padding(20)

      Text(this.content)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .fontStyle(FontStyle.Italic)
        .fontColor(this.isDone ? Color.Red : Color.Black )
        .decoration({type: this.isDone ? TextDecorationType.LineThrough : TextDecorationType.None})
    }
    .height('10%')
    .borderRadius('50')
    .width('100%')
    .margin({top: 10})
    .backgroundColor(Color.Pink)
    .padding({left: 10})
    .onClick(()=> {
      this.isDone = !this.isDone
    })
  }
}

2、使用@Build装饰器自定义组件

1、自定义在组件内部

2、自定义在外部 函数 function

1、自定义在组件内部

@Entry
@Component
struct TodoPoem {
  @State message: string = '诗文学习'

    //自定义组件在内部
  @Builder itemImage(name:string) {
    Row() {
      Column(){
        Text("这是" + name + "的照片")
          .fontColor(Color.Pink)
          .fontSize(30)
        Image($rawfile('lyf.png'))
          .width(200)
      }
      .width('100%')
    }
    .height(200)
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()
        //使用自定义组件,通过this调用
        this.itemImage('刘亦菲')
      }
      .width('100%')
      .padding({top: 10,left: 15,right: 15})
    }
    .height('100%')
  }
}

2、自定义在外部 函数 function

@Entry
@Component
struct TodoPoem {
  @State message: string = '诗文学习'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()
        //使用自定义组件，不需要使用关键字this
        itemImage('刘亦菲')
      }
      .width('100%')
      .padding({top: 10,left: 15,right: 15})
    }
    .height('100%')
  }
}

//以函数形式自定义在外部
@Builder function itemImage(name:string) {
  Row() {
    Column(){
      Text("这是" + name + "的照片")
        .fontColor(Color.Pink)
        .fontSize(30)
      Image($rawfile('lyf.png'))
        .width(200)
    }
    .width('100%')
  }
  .height(200)
}

4、组件样式重用@Styles

方式一、内部通用样式：组件内部使用

@Entry
@Component
struct Style {
  @State message: string = '组件样式重用'

  //自定义样式重用
  @Styles style() {
    .width('50%')
    .height('50')
    .backgroundColor(Color.Pink)
  }

  build() {
    Row() {
      Column({space: '20'}) {
        Text(this.message)
          //引用样式重用
          .style()
          .fontSize(30)

        Button().style()
        Image('').style()

        Row().style()
      }
      .width('100%')
    }
    .height('100%')
  }
}

方式二、外部通用样式 函数 function 全局组件都可使用

@Entry
@Component
struct Style {
  @State message: string = '组件样式重用'

  build() {
    Row() {
      Column({space: '20'}) {
        Text(this.message)
          //引用样式重用
          .style()
          .fontSize(30)

        Button().style()
        Image('').style()

        Row().style()
      }
      .width('100%')
    }
    .height('100%')
  }
}

//自定义样式重用
@Styles function  style() {
  .width('50%')
    .height('50')
    .backgroundColor(Color.Green)
}

弊端：只能写公共的样式，且不能传参

5、扩展组件样式

优点：可以写不同组件的样式，且可传参和函数，按钮还可以绑定点击事件

@Entry
@Component
struct Style {
  @State message: string = '组件样式重用'
  @State count:number = 0
  build() {
    Row() {
      Column({space: '20'}) {
        Text(this.message).text2Style(40,Color.Green,FontStyle.Italic)

        Button(this.count.toString()).buttonStyle(80,120,()=>{
          this.count++
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Extend(Text) function text1Style(style:FontStyle) {
  .fontStyle(style)
}
//自定义文本样式，还可以传参,还可以传入函数
@Extend(Text) function text2Style(size:number,color:Color,style:FontStyle) {
  .fontSize(size)
  .fontColor(color)
  .text1Style(style)
}

//自定义按钮样式，还可以传参,按钮还可以绑定点击事件
@Extend(Button) function buttonStyle(height:number,width:number,click:()=>void) {
  .height(height)
  .width(width)
  .onClick(()=>{
    click()
  })
}

6、多态样式

@Entry
@Component
struct Style {
  @State message: string = '组件样式重用'
  build() {
    Row() {
      Column({space: '20'}) {
        //动态绑定按钮样式，具体属性查看api文档
        Button(this.message)
          .height(80)
          .width(150)
          .stateStyles({
            normal:{
              .backgroundColor(Color.Red)
            },
            clicked: {
              .backgroundColor(Color.Green)
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

7、状态管理

重点：会使用@State和@prop和@link

  • @State：@State装饰的变量拥有其所属组件的状态，可以作为其子组件单向和双向同步的数据源。当其数值改变时，会引起相关组件的渲染刷新。
  • @Prop：@Prop装饰的变量可以和父组件建立单向同步关系，@Prop装饰的变量是可变的，但修改不会同步回父组件。
  • @Link：@Link装饰的变量和父组件构建双向同步关系的状态变量，父组件会接受来自@Link装饰的变量的修改的同步，父组件的更新也会同步给@Link装饰的变量。
  • @Provide/@Consume：@Provide/@Consume装饰的变量用于跨组件层级（多层组件）同步状态变量，可以不需要通过参数命名机制传递，通过alias（别名）或者属性名绑定。
  • @Observed：@Observed装饰class，需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用，需要和@ObjectLink、@Prop连用。
  • @ObjectLink：@ObjectLink装饰的变量接收@Observed装饰的class的实例，应用于观察多层嵌套场景，和父组件的数据源构建双向同步。

@State----->@Prop 和 @State <-----> @Link

  • 驱动build()更新
  • @State ---> @Prop (this.进行传参)
  • @State <--> @Link(传参使用$)

@Prop传值

@Entry
@Component
struct StateManage {
  @State message: string = '文学'

  build() {
    Row() {
      Column() {
        Text(this.message).state_text_style()
        Button("摸一摸").state_btn_style(()=>{
          this.message = this.message === '文学' ? '憨狗' : '文学'
        })
        Divider()
        StateManage_son_prop({content_prop:this.message})
      }
      .width('100%')
    }
    .height('100%')
  }
}
/**
 * 总结；@Prop装饰器子组件无法修改父组件中的值，所以它是单向的从父组件传值到子组件
 */
//子组件
@Component
struct StateManage_son_prop {
  //不能事先初始化值
  @Prop content_prop:string
  build() {
    Column(){
      Text("prop值：" + this.content_prop).state_text_style()
      Divider()
      Button('修改prop值')
        .fontSize(40)
        .onClick(()=>{
          this.content_prop = 'harmonyOS4.0'
        })
    }
    .width("100%")
  }
}
@Extend(Text) function state_text_style(){
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  .fontColor(Color.Green)
}
@Extend(Button) function state_btn_style(click:()=>void){
  .fontSize(50)
  .height(80)
  .width(160)
  .onClick(()=>{
    click()
  })
}

@link传值

@Entry
@Component
struct StateManage {
  @State message: string = '文学'

  build() {
    Row() {
      Column() {
        Text(this.message).state_text_style()
        Button("摸一摸").state_btn_style(()=>{
          this.message = this.message === '文学' ? '憨狗' : '文学'
        })
        Divider()
        StateManage_son_link({content_link:$message})
      }
      .width('100%')
    }
    .height('100%')
  }
}
/**
 * 总结；@Link装饰器子组件可以修改父组件中的值，所以它是双向向的从父组件传值到子组件，子组件到父组件
 *       但是注意传参时使用$参数
 */
//子组件
@Component
struct StateManage_son_link {
  //不能事先初始化值
  @Link content_link:string
  build() {
    Column(){
      Text("link值：" + this.content_link).state_text_style()
      Divider()
      Button('修改link值')
        .fontSize(40)
        .onClick(()=>{
          this.content_link = 'harmonyOS4.0'
        })
    }
    .width("100%")
  }
}
@Extend(Text) function state_text_style(){
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  .fontColor(Color.Green)
}
@Extend(Button) function state_btn_style(click:()=>void){
  .fontSize(50)
  .height(80)
  .width(160)
  .onClick(()=>{
    click()
  })
}

8、后代组件传值@provider 和@consume的使用

@Entry
@Component
struct Provider {
  //使用@Provide装饰器给孙子组件提供数据
  @Provide("sunData") message: string = '爷爷组件'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.message = '爷爷讲故事'
          })
        //调用子组件
        Divider()
        Provider_son()

      }
      .width('100%')
    }
    .height('100%')
  }
}

//儿子组件
@Component
struct Provider_son {
  @State message: string = '儿子组件'
  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .onClick(()=>{
          this.message = '儿子讲故事'
        })
      //调用子组件
      Divider()
      Provider_sun()
    }
    .width('100%')
  }
}


//孙子组件
@Component
struct Provider_sun {
  //使用@Consume装饰器接收爷爷组件提供的数据
  //注意：①、传递数据的前提是变量名要一致
  //     ②、如果变量名不一样则可以使用别名代替
  @Consume("sunData") sunMessage: string
  build() {
    Column() {
      Text(this.sunMessage)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .onClick(()=>{
          this.sunMessage = '孙子讲故事'
        })
    }
    .width('100%')
  }
}

9、@Watch监视状态变量


/**
 * @Watch
*  注意：不要不要不要修改被监视的状态变量，会进入一个死循环
 */
@Entry
@Component
struct WatchTest {
  @State @Watch('change') count:number = 1
  @State @Watch('change') pow:number = 2
  @State result:number = 1
  //当被监视的变量状态发生改变时就会回调这个函数
  change(){
    this.result = Math.pow(this.count,this.pow)
  }

  build() {
    Row() {
      Column() {
        Text("基数：" + this.count.toString())
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.count++
          })
        Divider()
        Text("次幂：" + this.pow)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
          .onClick(()=>{
            this.pow++
          })
        Divider()
        Text("结果：" + this.result)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

10、条件渲染

@Entry
@Component
struct IfTest {
  @State message: string = '学习鸿蒙之前'
  @State isBefore:boolean = false
  build() {
    Row() {
      Column() {
        Button("点击")
          .fontSize(30)
          .height(60)
          .width(100)
          .onClick(()=>{
            if(this.isBefore){
              this.message = '学习鸿蒙之后'
              this.isBefore = false
            }else{
              this.message = '学习鸿蒙之前'
              this.isBefore = true
            }
          })
        Divider()
        if(this.isBefore){
          Text(this.message)
            .fontSize(40)
        }else{
          Text(this.message)
            .fontSize(40)
        }
        Image(this.isBefore ? $r('app.media.outpu') : $rawfile('lyf.png'))
          .height(100)
          .width(100)
      }
      .width('100%')
    }
    .height('100%')
  }
}

11、循环渲染

@Entry
@Component
struct ForeachTest {
  @State message: string = '循环渲染'
  @State product:string[] = ['PC','PC','汽车','汽车','平板','手机']
  @State user:object[] = [
    {
      id: "001",
      name: '生物学',
      age: '18'
    },
    {
      id: "002",
      name: '生物学',
      age: '18'
    },
    {
      id: "003",
      name: '生物学',
      age: '18'
    },
    {
      id: "004",
      name: '生物学',
      age: '18'
    },
  ]
  build() {
    Column() {
      Text(this.message)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .padding({top: 30})
      Divider()
      /**
       * 参数解析
       *       第一个参数：要遍历的数据
       *       第二个参数：遍历数据中的每一项，是一个函数
       *       第三个参数：返回一个唯一值
       */
      ForEach(this.product,(item,index)=>{
        Text(item + ':' + index).fontSize(30)
      },(item)=>{
        return item
      })
      Divider()

      //遍历对象
      ForEach(this.user,(item,index)=> {
        Text(`${item.id} - ${item.name} - ${item.age}`).fontSize(30).fontColor(Color.Pink).margin({top: 30})
      })
    }
    .width('100%')
  }
}

12、页面和组件的生命周期

页面的生命周期

即被@Entry装饰的组件生命周期，提供以下生命周期接口：

import router from '@ohos.router'
@Entry
@Component
struct LiveTest {
  @State message: string = '页面1'

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .padding({top: 50})
    //跳转到页面2
    .onClick(()=> {
      router.pushUrl({
        url: "pages/LiveTest2"
      })
    })
  }

  //页面展示前的回调
  onPageShow() {
    console.log("我是页面1展示前的回调")
  }

  //页面隐藏时的回调
  onPageHide() {
    console.log("我是页面1隐藏时的回调")
  }

  //页面返回时的回调，注意这里的返回是指手机上的返回按钮才会触发
  onBackPress() {
    console.log("我是页面1返回时的回调")
  }
}

组件生命周期

即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：

import router from '@ohos.router'
@Entry
@Component
struct LiveTest {
  @State message: string = '组件生命周期'
  @State isExits:boolean = true
  build() {
    Column({space: 20}) {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      Button("显示/隐藏")
        .onClick(()=> {
          this.isExits = !this.isExits
        })
      if(this.isExits){
        //展示子组件
        itemImage()
      }
    }
    .width('100%')
    .padding({top: 50})
  }
}

//组件生命周期
@Component
struct itemImage {
  build() {
    Column(){
      Text("itemImage 组件生命周期----")
        .fontSize(40)
        .fontColor(Color.Pink)
    }
    .width('100%')
  }

  //加载前的回调
  aboutToAppear() {
    console.log("itemImage 加载前的回调------")
  }

  //销毁前的回调
  aboutToDisappear() {
    console.log("itemImage 销毁前的回调------")
  }
}

特别注意：这里说的是组件生命周期，所以任何被@Component修饰的组件都有aboutToAppear() 和aboutToDisappear()两个回调，但是页面生命周期里面的回调只有被@Entry修饰的才有

13、路由参数获取

页面1

import router from '@ohos.router'
@Entry
@Component
struct LiveTest {
  @State message: string = '路由参数获取'
  @State isExits:boolean = true
  build() {
    Column({space: 20}) {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .padding({top: 50})
    //跳转到页面2的同时携带一个name参数
    .onClick(()=> {
      router.pushUrl({
        url: 'pages/LiveTest2',
        params: {
          name: '文学学鸿蒙开发'
        }
      })
    })
  }
}

页面2

import router from '@ohos.router'

//获取前一页跳转过来时携带的路由参数
let name = router.getParams()['name']


@Entry
@Component
struct LiveTest2 {
  @State message: string = '页面2'

  build() {
    Column({space: 20}) {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      //展示获取到的路由参数
      Text(name)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .padding({top: 50})
  }
}

14、全局应用数据共享

在文件EntryAbility.ts中定义数据

import UIAbility from '@ohos.app.ability.UIAbility';
import hilog from '@ohos.hilog';
import window from '@ohos.window';

//定义全局可访问到的数据,应用程序之间共享数据
AppStorage.SetOrCreate('appName','鸿蒙开发')

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  onWindowStageDestroy() {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground() {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground() {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

在随便一个页面中获取数据


/**
 * 获取全局共享的数据，从应用对象身上取数据
 * 注意：无法在预览器中获取到数据，只有拉起整个项目运行在真机上才会去访问EntryAbility.ts这个文件
 *      预览器情况下只会加载当前页面
 */
let appName:string = AppStorage.Get('appName')

@Entry
@Component
struct LiveTest {
  @State isExits:boolean = true
  build() {
    Column() {
      //展示全局共享的数据
      Text(appName)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .padding({top: 50})
  }
}

15、ArkTS语法基础总结Demo

首页

import router from '@ohos.router'
@Entry
@Component
struct Index {
  @State message: string = 'ArkTS基础总结'
  name:string = 'toDoList小案例'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
    //跳转到toDoList小案例页面，并携带参数
    .onClick(()=> {
      router.pushUrl({
        url: "pages/ToDoList",
        params: {
          name: this.name
        }
      })
    })
  }
}

案例页面

//导入子组件
import ToDoItem from  '../view/ToDoItem'
//导入数据
import TotalModel from '../viewData/TotalModel'
//导入常量
import backgroundconstant from '../common/backgroundconstant'
import router from '@ohos.router'

//获取路由参数值
let name =  router.getParams()['name']

@Entry
@Component
struct ToDoList {
  totalTasks:string[] = []
  build() {
    Row(){
      Column({space: 10}) {
        Text(name)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
        Divider()
        //按业务逻辑遍历子组件
        ForEach(this.totalTasks,(item,index)=> {
          ToDoItem({content: item})
        })
      }
      .width('100%')
    }
    .height('100%')
    //使用一个控制背景颜色的常量
    .backgroundColor(backgroundconstant.BACKGROUND)
    .onClick(()=> {
      router.back({
        url: "pages/Index"
      })
    })
  }

  //页面加载前加载好要显示的数据
  aboutToAppear() {
    this.totalTasks = TotalModel.getTotalTasks()
  }
}

子组件：单独定义在文件夹view中

/**
 * 子组件
 */
@Component
export default  struct  ToDoItem{
  content ?:string
  @State isDone:boolean = false
  build() {
    Row({space: 20}) {
      Image(this.isDone ? $r('app.media.output') : $r('app.media.outpu')).imageStyle()
      Text(this.content)
        .textStyle()
        .decoration({type: this.isDone ? TextDecorationType.LineThrough : TextDecorationType.None})
        .opacity(this.isDone ? 0.5 : 1)
        .fontColor(this.isDone ? Color.Red : Color.Black)
    }
    .rowStyle()
    .onClick(()=> {
      this.isDone = !this.isDone
    })
  }
}

/**
 * 扩展组件样式
 */
@Extend(Row) function  rowStyle() {
  .height(60)
    .width(300)
    .borderRadius(50)
    .backgroundColor("#fff")
}

@Extend(Image) function imageStyle() {
  .margin({left: 20})
  .height(50)
  .width(50)
}

@Extend(Text) function textStyle() {
  .fontSize(30)
}

准备好需展示的数据：单独定义在viewData数据文件夹中

/**
 * 定义组件所需的数据
 */
export class TotalModel {
  private totalTasks:Array<string> = [
    "做todolist",
    "打球",
    "做项目",
    "学鸿蒙开发"
  ]
  getTotalTasks() {
    return this.totalTasks
  }
}
export default new TotalModel()

定义一些方便修改的常量：单独定义在common公共文件夹下的constant中

/**
 * 定义一个控制背景颜色的常量，方便更改
 */
export default class backgroundconstant {
  static readonly BACKGROUND = '#ccc'
}

本案例主要结合所学知识实现了当点击其中的某一行时显示被选中，然后被选中的文字背景颜色修改为红色，且文字中间出现一个线，且被选中的那行的透明度发生改变

16、自定义Tab

//底部tab
      Tabs({barPosition: BarPosition.End,controller: this.tabsController}){
        TabContent(){
            //存放每一页所对应的内容
          this.firstTabContent()
        }.tabBar(this.TabBuilder('首页',0,$rawfile('index-light.png'),$rawfile('index.png')))

        TabContent(){
            //存放每一页所对应的内容
          this.secondTabContent()
        }
        .tabBar(this.TabBuilder('我的',1,$rawfile('my-light.png'),$rawfile('my.png')))
      }
      .vertical(false)
      .backgroundColor('#fff')
      //将当前选中的值
      .onChange((value:number) => {
        this.currentIndex = value
      })

//自定义构建一个底部的tabs
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column({space: 5}){
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({width: 25,height: 25})
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }

17、List列表组件

List(){
          ForEach(this.myData,(item,index)=> {
            ListItem(){
              Row(){
                Column({space: 5}){
                  Row(){
                    Row({space: 10}){
                      Image(item.startIcon)
                        .height(40)
                        .width(40)
                      Text(item.title)
                        .fontSize(20)
                    }
                    Image(item.endIcon)
                      .height(40)
                      .width(40)
                  }
                  .justifyContent(FlexAlign.SpaceBetween)
                  .width('100%')
                  Divider()
                    .margin({left: 50,right: 10})
                }
              }
            }
            .padding({top: 10,bottom: 10})
            .onClick(()=> {
              //警告类弹窗
              if(item.title === '警告弹窗'){
                AlertDialog.show(
                  {
                    title: '警告弹窗',
                    message: '这是一个警告弹窗测试',
                    autoCancel: true,
                    alignment: DialogAlignment.Center,
                    offset: { dx: 0, dy: -20 },
                    gridCount: 3,
                    confirm: {
                      value: '确认',
                      action: () => {
                        console.info('Button-clicking callback')
                      }
                    },
                    cancel: () => {
                      console.info('Closed callbacks')
                    }
                  }
                )
              }
              if(item.title === '选择列表弹窗'){
                ActionSheet.show({
                  title: '选择列表弹窗',
                  message: '选择列表弹窗测试',
                  autoCancel: true,
                  confirm: {
                    value: '确认',
                    action: () => {
                      console.log('Get Alert Dialog handled')
                    }
                  },
                  cancel: () => {
                    console.log('actionSheet canceled')
                  },
                  alignment: DialogAlignment.Bottom,
                  offset: { dx: 0, dy: -10 },
                  sheets: [
                    {
                      title: '苹果',
                      action: () => {
                        console.log('apples')
                      }
                    },
                    {
                      title: '香蕉',
                      action: () => {
                        console.log('bananas')
                      }
                    },
                    {
                      title: '梨',
                      action: () => {
                        console.log('pears')
                      }
                    }
                  ]
                })
              }
              if(item.title === '自定义弹窗'){
                DatePickerDialog.show({
                  start: new Date("2000-1-1"),
                  end: new Date("2100-12-31"),
                  selected: this.selectedDate,
                  onAccept: (value: DatePickerResult) => {
                    // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
                    this.selectedDate.setFullYear(value.year, value.month, value.day)
                    console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
                  },
                  onCancel: () => {
                    console.info("DatePickerDialog:onCancel()")
                  },
                  onChange: (value: DatePickerResult) => {
                    console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
                  }
                })
              }
              if(item.title === '日期滑动选择弹窗'){
                DatePickerDialog.show({
                  start: new Date("2000-1-1"),
                  end: new Date("2100-12-31"),
                  selected: this.selectedDate,
                  onAccept: (value: DatePickerResult) => {
                    // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
                    this.selectedDate.setFullYear(value.year, value.month, value.day)
                    console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
                  },
                  onCancel: () => {
                    console.info("DatePickerDialog:onCancel()")
                  },
                  onChange: (value: DatePickerResult) => {
                    console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
                  }
                })
              }
              if(item.title === '时间滑动选择弹窗'){
                TimePickerDialog.show({
                  selected: this.selectTime,
                  useMilitaryTime: true,
                  onAccept: (value: TimePickerResult) => {
                    this.selectTime.setHours(value.hour, value.minute)
                    console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
                  },
                  onCancel: () => {
                    console.info("TimePickerDialog:onCancel()")
                  },
                  onChange: (value: TimePickerResult) => {
                    console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
                  }
                })
              }
              if(item.title === '文本滑动选择弹窗'){
                TextPickerDialog.show({
                  range: this.fruits,
                  selected: this.select,
                  onAccept: (value: TextPickerResult) => {
                    // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
                    this.select = value.index
                    console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
                  },
                  onCancel: () => {
                    console.info("TextPickerDialog:onCancel()")
                  },
                  onChange: (value: TextPickerResult) => {
                    console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
                  }
                })
              }
            })
          })
        }

三、容器组件

1、Column

名称参数类型描述
alignItemsHorizontalAlignopen in new window设置子组件在水平方向上的对齐格式。默认值：HorizontalAlign.Center从API version 9开始，该接口支持在ArkTS卡片中使用。
justifyContent8+FlexAlignopen in new window设置子组件在垂直方向上的对齐格式。默认值：FlexAlign.Start从API version 9开始，该接口支持在ArkTS卡片中使用。

2、Row

名称参数类型描述
alignItemsVerticalAlignopen in new window设置子组件在垂直方向上的对齐格式。默认值：VerticalAlign.Center从API version 9开始，该接口支持在ArkTS卡片中使用。
justifyContent8+FlexAlignopen in new window设置子组件在水平方向上的对齐格式。默认值：FlexAlign.Start从API version 9开始，该接口支持在ArkTS卡片中使用。

两者区别在与相同属性值的作用刚好相反

3、layoutWeight比重使用

实现效果如下


/**
 * 这是一个layoutWeight比重自适应的练习
 */
@Entry
@Component
struct Index {
  build() {
    Column({space: 10}) {
      Row(){
        Image($r('app.media.backone'))
          .objectFit(ImageFit.Cover)
          .borderRadius(10)
          .padding({right: 10,top: 10})
      }
      .width('95%')
      .height(180)

      Row({space: 10}){
        Row(){
          Image($r('app.media.backtwo'))
            .objectFit(ImageFit.Cover)
            .borderRadius(10)
            .padding({left: 10})
        }
        //设置横向比重为2
        .layoutWeight(2)
        .height(200)

        Row(){
          Column({space: 10}){
            Row(){
              Image($r('app.media.backthree'))
                .objectFit(ImageFit.Cover)
                .borderRadius(10)
                .margin({right: 20})
            }
            //设置纵向比重为1
            .layoutWeight(1)
            .width('100%')

            Row(){
              Image($r('app.media.backfour'))
                .objectFit(ImageFit.Cover)
                .borderRadius(10)
                .margin({right: 20})
            }
            //设置纵向比重为1
            .layoutWeight(1)
            .width('100%')
          }
          .height(200)
          .width('100%')
        }
        //设置横向比重为1
        .layoutWeight(1)
        .height(200)
      }
      .width('100%')
      .height(200)
    }
    .width('100%')
    .height('100%')
  }
}

4、Stack布局 + List布局

实现效果如下

/**
 * 这是一个Stack + List布局练习
 */

@Entry
@Component
struct StackEx {
  @State data:string[] = ['1','2','3']
  build() {
    Column() {
      //可以设置内部的布局，Stack也可以嵌套
      Stack({alignContent: Alignment.TopStart}){
        //内部的Stack布局
        Stack({alignContent: Alignment.BottomEnd}){
          //List布局
          List({space: 10}){
            ForEach(this.data,(item,index)=> {
              ListItem(){
                Text(item)
                  .textAlign(TextAlign.Center)
              }
              .backgroundColor(Color.Pink)
              .height(50)
              .width('100%')
              .borderRadius(10)
            },item => JSON.stringify(item))
          }
          .padding(10)
          .height('100%')
          .margin({top: 50})
          .width('100%')

          //底部的按钮
          Button("+")
            .fontSize(50)
            .height(80)
            .width(80)
            .margin({right: 10,bottom: 10})
            .onClick(()=> {
              //调用本地函数实现效果
              this.addElement()
            })
        }
        .height('100%')
        .width('100%')

        //这是顶部当list向下滑动时不动的元素
        Row(){
          Text('HarmonyOS 4.0')
            .textAlign(TextAlign.Center)
            .width('100%')
            .fontSize(30)
        }
        .height(50)
        .width('100%')
        .backgroundColor(Color.Orange)
      }
      .height('100%')
      .width('100%')
    }
    .width('100%')
    .height('100%')
  }

  //按钮回调事件
  addElement() {
    this.data.push(((this.data.length - 1) + 1).toFixed(0))
  }
}

5、Flex布局实现热搜

实现热搜

import router from '@ohos.router'
@Entry
@Component
struct Index {
  @State message: string = '热搜'
  @State titles:string[] = [
    '女装','鞋子','军大衣','花棉袄','java教程','HarmonyOS','ArkTs','高跟鞋','电脑','华为手机'
  ]

  @Builder buttonBuilder(title:string) {
    Button(title).buttonStyle()
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
        .padding(10)
      //本次重点练习在于由Wrap决定是否要换行展示
      Flex({direction: FlexDirection.Row,wrap: FlexWrap.Wrap}){
        ForEach(this.titles,(item,index)=> {
          this.buttonBuilder(item)
        },item => item)
      }
      .width('100%')
      .height(200)
      .padding({left: 10,right: 10,bottom: 10})

      Row(){
        Button(){
          Text('练习例外一种展示')
            .fontSize(20)
            .fontColor(Color.White)
        }
        .width('60%')
        .height(60)
        .onClick(() => {
          router.pushUrl({
            url: "pages/FlexSecond"
          })
        })
      }
      .width('100%')
      .margin({top: 20})
      .height(100)
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
}


@Extend(Button) function buttonStyle() {
  .type(ButtonType.Normal)
  .backgroundColor('#eee')
  .borderRadius(10)
  .fontColor(Color.Black)
  .margin(6)
}

实现自适应网格布局

import router from '@ohos.router'
import Model from '../viewData/Model'
@Entry
@Component
struct FlexSecond {
  Data:Model[] = [
    {
      title: '我的订阅',
      icon: $r('app.media.order')
    },
    {
      title: '常见问题',
      icon: $r('app.media.normalProblem')
    },
    {
      title: '在线客服',
      icon: $r('app.media.lineUser')
    },
    {
      title: '意见反馈',
      icon: $r('app.media.regsition')
    },
    {
      title: '关怀模式',
      icon: $r('app.media.careAbout')
    },
    {
      title: '会员中心',
      icon: $r('app.media.payUser')
    },
  ]

  @Builder columnBuilder(icon:Resource,title:string) {
    Column({space: 10}){
      Image(icon)
        .height(50)
        .width(50)
      Text(title).fontSize(16).margin(5)
    }
    .margin({ bottom: 20 })
    .width('25%')
  }

  build() {
    Column() {
      //主要还是Wrap来控制
      Flex({direction: FlexDirection.Row,wrap: FlexWrap.Wrap}){
        ForEach(this.Data,(item:Model,index) => {
          this.columnBuilder(item.icon,item.title)
        })
      }
      .width('100%')
      .backgroundColor('#fff')
      .padding({top: 15,bottom: 10})
      .borderRadius(10)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#ddd')
    .padding(10)
    .onClick(() => {
      router.back()
    })
  }
}

四、动画

1、显示动画

@Entry
@Component
struct Index {
  @State myHorizontalAlign:HorizontalAlign[] = [HorizontalAlign.Start,HorizontalAlign.Center,HorizontalAlign.End]
  @State title:string = '显示动画'
  @State index:number = 0

  build() {
    Column() {
      Text(this.title)
      .fontSize(30)
      .margin({bottom: 10})
      Column({space: 10}) {
        Button('文学')
        Button('文学')
        Button('文学')
      }.columnStyle()
      .alignItems(this.myHorizontalAlign[this.index])
      Button('点击').margin({top: 20})
        .onClick(()=>{
          animateTo({
            duration: 2000,
            curve: Curve.EaseOut,
            playMode: PlayMode.Normal,
            //动画结束事件回调
            onFinish: () => {
              this.title = '显示动画也不难啊'
            }
          },()=> {
            this.index = (this.index + 1) % this.myHorizontalAlign.length
          })
        })
    }
    .alignItems(HorizontalAlign.Center)
    .margin({top: 50})
    .height('100%')
    .width('100%')
  }
}

@Extend(Column) function columnStyle() {
  .width('90%')
  .height(180)
  .borderWidth(2)
  .margin({left: 20})
  .backgroundColor('#fffff')
  .justifyContent(FlexAlign.SpaceAround)
}

五、http请求封装

步骤

1、定义响应数据格式

2、封装数据请求

3、将各种请求进行模块划分

4、请求示例

项目目录

1、定义响应数据格式

export default class  Response {
  /**
   * 响应码
   */
  code:number
  /**
   * 响应消息
   */
  message:string
  /**
   * 响应数据
   */
  data:any
}

2、封装数据请求

提示：具体更详细的配置请参考官网

import http from '@ohos.net.http';
//导入预定好的数据响应格式
import Response from '../utils/Response'

//导出去一个请求函数，这样开发者就可以像axios一样的风格请求数据
export function request(url:string,method: http.RequestMethod,data?:any): Promise<Response> {
  //定义一个后台请求的基地址
  const BASE_URL =  "http://localhost:9600"
  let httpRequest = http.createHttp();
  let responseResult = httpRequest.request( BASE_URL+ url,{
    method: method,
    // header: {
    //   'Content-Type': 'application/json'
    // },
    //携带额外参数
    extraData: JSON.stringify(data),
    // 可选，指定返回数据的类型
    // expectDataType: http.HttpDataType.STRING,
    // 可选，默认为true
    // usingCache: true,
    // 可选，默认为1
    // priority: 1,
    // 可选，默认为60000ms
    // connectTimeout: 60000,
    // readTimeout: 60000,
    // 可选，协议类型默认值由系统自动指定
    // usingProtocol: http.HttpProtocol.HTTP1_1,
  });

  let response = new Response();
  // 处理数据，并返回
  return responseResult.then((value: http.HttpResponse) => {
    if (value.responseCode === 200) {
      // 获取返回数据,将返回的json数据解析成事先预定好的响应格式
      // 这里建议和后端的保持一致
      let res: Response = JSON.parse(`${value.result}`);
      response.data = res.data;
      response.code = res.code;
      response.message = res.message;
    } else {
      response.message = '请求错误';
      response.code = 400;
    }
    return response;
  }).catch(() => {
    response.message = '请求错误';
    response.code = 400;
    return response;
  });
}

3、将各种请求进行模块划分

熟悉vue开发的同学都知道我们不同模块的请求一般放在api目录下进行划分

如下以请求用户User模块为示例

import http from '@ohos.net.http';
//导入封装好的请求
import { request } from '../utils/request'

/**
 * 根据用户id请求用户数据
 * @param userId
 * @returns
 */
export function getUserById(userId) {
  return request(`/user/get/${userId}`,http.RequestMethod.GET)
}

/**
 * 请求用户数据
 * @param userId
 * @returns
 */
export function getUser() {
  return request('/user/get',http.RequestMethod.GET)
}

/**
 * 用户数据保存
 * @param userId
 * @returns
 */
export function save(data) {
  return request(`/user/save`,http.RequestMethod.POST,data)
}

4、附上一个请求示例

这里提前一个用户对象用于接收数据时使用

export default class User {
  username:string
  password:string
}

//导入api下的User模块：请求方法
import {getUser,save,getUserById} from '../api/user'
//导入定义好的用户对象
import User from '../model/User'

@Entry
@Component
struct Index {
  @State user:User = {
    username: '',
    password: ''
  }

    //组件展示前进行数据的一个请求
  aboutToAppear() {
    //根据用户id进行的一个请求
    getUserById(1).then(res => {
      if(res.code === 200){
        this.user = res.data
      }
    })
    //不携带参数的一个请求
    getUser().then(res => {
      if(res.code === 200){
        this.user = res.data
      }
    })
  }

  build() {
    Row() {
      Column() {
        Text(this.user.username)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Text(this.user.password)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)

        Divider()
        TextInput().margin({ top: 20 })
          .onChange((value: string) => {
            this.user.username = value
          })
        TextInput().type(InputType.Password).margin({ top: 20 })
          .onChange((value: string) => {
            this.user.password = value
          })
        Button('登录').width(150).margin({ top: 20 })
          .onClick(()=> {
            console.log("发送成功")
            //保存用户数据的一个请求
            save(this.user)
          })
      }
      .width('100%')
      .height('100%')
      .padding({top: 50})
    }
    .height('100%')
    .width('100%')
    .alignItems(VerticalAlign.Top)
  }
}

六、案例

1、toDoList案例

2、firstCodeLable

3、健康饮食

4、比重和Stack + List布局

5、Flex实现热搜及自适应布局

文学博客
Copyright © 2024 sixkey