标签归档：HarmonyOS

HarmonyOS动画

属性动画

animateTo

animateTo(value: AnimateParam, event: () => void): void

1	animateTo(value: AnimateParam, event: () => void): void

import { curves } from '@kit.ArkUI';

@Entry
@Component
struct AnimateToDemo {
  @State animate: boolean = false;
  // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 组件一旋转角度
  @State translateX: number = 0; // 组件二偏移量
  @State opacityValue: number = 1; // 组件二透明度

  // 第二步：将状态变量设置到相关可动画属性接口
  build() {
    Row() {
      // 组件一
      Column() {
      }
      .rotate({ angle: this.rotateValue })
      .backgroundColor('#317AF7')
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .borderRadius(30)
      .onClick(() => {
        this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {
          this.animate = !this.animate;
          // 第三步：闭包内通过状态变量改变UI界面
          // 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画
          // 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画
          this.rotateValue = this.animate ? 90 : 0;
          // 组件二的透明度发生变化，所以会给组件二添加透明度的动画
          this.opacityValue = this.animate ? 0.6 : 1;
          // 组件二的translate属性发生变化，所以会给组件二添加translate偏移动画
          this.translateX = this.animate ? 50 : 0;
        })
      })

      // 组件二
      Column() {

      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#D94838')
      .borderRadius(30)
      .opacity(this.opacityValue)
      .translate({ x: this.translateX })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

import { curves } from '@kit.ArkUI';

@Entry

@Component

struct AnimateToDemo {

@State animate: boolean = false;

// 第一步: 声明相关状态变量

@State rotateValue: number = 0; // 组件一旋转角度

@State translateX: number = 0; // 组件二偏移量

@State opacityValue: number = 1; // 组件二透明度

// 第二步：将状态变量设置到相关可动画属性接口

build() {

Row() {

// 组件一

Column() {

}

.rotate({ angle: this.rotateValue })

.backgroundColor('#317AF7')

.justifyContent(FlexAlign.Center)

.width(100)

.height(100)

.borderRadius(30)

.onClick(() => {

this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {

this.animate = !this.animate;

// 第三步：闭包内通过状态变量改变UI界面

// 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画

// 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画

this.rotateValue = this.animate ? 90 : 0;

// 组件二的透明度发生变化，所以会给组件二添加透明度的动画

this.opacityValue = this.animate ? 0.6 : 1;

// 组件二的translate属性发生变化，所以会给组件二添加translate偏移动画

this.translateX = this.animate ? 50 : 0;

})

// 组件二

Column() {

}

.justifyContent(FlexAlign.Center)

.width(100)

.height(100)

.backgroundColor('#D94838')

.borderRadius(30)

.opacity(this.opacityValue)

.translate({ x: this.translateX })

}

.width('100%')

.height('100%')

.justifyContent(FlexAlign.Center)

}

import { curves } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State animate: boolean = false
  @State rotateValue: number = 0
  @State translateX: number = 0
  @State opacityValue: number = 1

  build() {
    Column() {
      Row()
        .width(100)
        .height(100)
        .borderRadius(30)
        .backgroundColor('#317AF7')
        .rotate({ angle: this.rotateValue })
        .onClick(() => {
          this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {
            this.animate = !this.animate
            this.rotateValue = this.animate ? 90 : 0
            this.translateX = this.animate ? 50 : 0
            this.opacityValue = this.animate ? 0.6 : 1
          })
        })

      Row()
        .width(100)
        .height(100)
        .borderRadius(30)
        .backgroundColor('#D94838')
        .opacity(this.opacityValue)
        .translate({ x: this.translateX })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

import { curves } from '@kit.ArkUI'

@Entry

@Component

struct Index {

@State animate: boolean = false

@State rotateValue: number = 0

@State translateX: number = 0

@State opacityValue: number = 1

build() {

Column() {

Row()

.width(100)

.height(100)

.borderRadius(30)

.backgroundColor('#317AF7')

.rotate({ angle: this.rotateValue })

.onClick(() => {

this.getUIContext()?.animateTo({ curve: curves.springMotion() }, () => {

this.animate = !this.animate

this.rotateValue = this.animate ? 90 : 0

this.translateX = this.animate ? 50 : 0

this.opacityValue = this.animate ? 0.6 : 1

})

Row()

.width(100)

.height(100)

.borderRadius(30)

.backgroundColor('#D94838')

.opacity(this.opacityValue)

.translate({ x: this.translateX })

}

.width('100%')

.height('100%')

.justifyContent(FlexAlign.Center)

}

animation

import { curves } from '@kit.ArkUI';

@Entry
@Component
struct AnimationDemo {
  @State animate: boolean = false;
  // 第一步: 声明相关状态变量
  @State rotateValue: number = 0; // 组件一旋转角度
  @State translateX: number = 0; // 组件二偏移量
  @State opacityValue: number = 1; // 组件二透明度

  // 第二步：将状态变量设置到相关可动画属性接口
  build() {
    Row() {
      // 组件一
      Column() {
      }
      .opacity(this.opacityValue)
      .rotate({ angle: this.rotateValue })
      // 第三步：通过属性动画接口开启属性动画
      .animation({ curve: curves.springMotion() })
      .backgroundColor('#317AF7')
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .borderRadius(30)
      .onClick(() => {
        this.animate = !this.animate;
        // 第四步：闭包内通过状态变量改变UI界面
        // 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画
        // 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画
        this.rotateValue = this.animate ? 90 : 0;
        // 组件二的translate属性发生变化，所以会给组件二添加translate偏移动画
        this.translateX = this.animate ? 50 : 0;
        // 父组件column的opacity属性有变化，会导致其子节点的透明度也变化，所以这里会给column和其子节点的透明度属性都加动画
        this.opacityValue = this.animate ? 0.6 : 1;
      })

      // 组件二
      Column() {
      }
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor('#D94838')
      .borderRadius(30)
      .opacity(this.opacityValue)
      .translate({ x: this.translateX })
      .animation({ curve: curves.springMotion() })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

import { curves } from '@kit.ArkUI';

@Entry

@Component

struct AnimationDemo {

@State animate: boolean = false;

// 第一步: 声明相关状态变量

@State rotateValue: number = 0; // 组件一旋转角度

@State translateX: number = 0; // 组件二偏移量

@State opacityValue: number = 1; // 组件二透明度

// 第二步：将状态变量设置到相关可动画属性接口

build() {

Row() {

// 组件一

Column() {

}

.opacity(this.opacityValue)

.rotate({ angle: this.rotateValue })

// 第三步：通过属性动画接口开启属性动画

.animation({ curve: curves.springMotion() })

.backgroundColor('#317AF7')

.justifyContent(FlexAlign.Center)

.width(100)

.height(100)

.borderRadius(30)

.onClick(() => {

this.animate = !this.animate;

// 第四步：闭包内通过状态变量改变UI界面

// 这里可以写任何能改变UI的逻辑比如数组添加，显隐控制，系统会检测改变后的UI界面与之前的UI界面的差异，对有差异的部分添加动画

// 组件一的rotate属性发生变化，所以会给组件一添加rotate旋转动画

this.rotateValue = this.animate ? 90 : 0;

// 组件二的translate属性发生变化，所以会给组件二添加translate偏移动画

this.translateX = this.animate ? 50 : 0;

// 父组件column的opacity属性有变化，会导致其子节点的透明度也变化，所以这里会给column和其子节点的透明度属性都加动画

this.opacityValue = this.animate ? 0.6 : 1;

})

// 组件二

Column() {

}

.justifyContent(FlexAlign.Center)

.width(100)

.height(100)

.backgroundColor('#D94838')

.borderRadius(30)

.opacity(this.opacityValue)

.translate({ x: this.translateX })

.animation({ curve: curves.springMotion() })

}

.width('100%')

.height('100%')

.justifyContent(FlexAlign.Center)

}

自定义属性动画

@AnimatableExtend

// 第一步：使用@AnimatableExtend装饰器，自定义可动画属性接口
@AnimatableExtend(Text)
function animatableWidth(width: number) {
  .width(width) // 调用系统属性接口，逐帧回调函数每帧修改可动画属性的值，实现逐帧布局的效果。
}

@Entry
@Component
struct AnimatablePropertyExample {
  @State textWidth: number = 80;

  build() {
    Column() {
      Text("AnimatableProperty")
        .animatableWidth(this.textWidth)// 第二步：将自定义可动画属性接口设置到组件上
        .animation({ duration: 2000, curve: Curve.Ease }) // 第三步:为自定义可动画属性接口绑定动画

      Button("Play")
        .onClick(() => {
          this.textWidth = this.textWidth == 80 ? 160 : 80; // 第四步：改变自定义可动画属性的参数，产生动画
        })
    }
    .width("100%")
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .padding(10)
  }
}

// 第一步：使用@AnimatableExtend装饰器，自定义可动画属性接口

@AnimatableExtend(Text)

function animatableWidth(width: number) {

.width(width) // 调用系统属性接口，逐帧回调函数每帧修改可动画属性的值，实现逐帧布局的效果。

}

@Entry

@Component

struct AnimatablePropertyExample {

@State textWidth: number = 80;

build() {

Column() {

Text("AnimatableProperty")

.animatableWidth(this.textWidth)// 第二步：将自定义可动画属性接口设置到组件上

.animation({ duration: 2000, curve: Curve.Ease }) // 第三步:为自定义可动画属性接口绑定动画

Button("Play")

.onClick(() => {

this.textWidth = this.textWidth == 80 ? 160 : 80; // 第四步：改变自定义可动画属性的参数，产生动画

})

}

.width("100%")

.height('100%')

.justifyContent(FlexAlign.Center)

.padding(10)

}

declare type Point = number[];

// 定义可动画属性接口的参数类型，实现AnimatableArithmetic<T>接口中加法、减法、乘法和判断相等函数
class PointClass extends Array<number> {
  constructor(value: Point) {
    super(value[0], value[1])
  }

  add(rhs: PointClass): PointClass {
    let result: Point = new Array<number>() as Point;
    for (let i = 0; i < 2; i++) {
      result.push(rhs[i] + this[i])
    }
    return new PointClass(result);
  }

  subtract(rhs: PointClass): PointClass {
    let result: Point = new Array<number>() as Point;
    for (let i = 0; i < 2; i++) {
      result.push(this[i] - rhs[i]);
    }
    return new PointClass(result);
  }

  multiply(scale: number): PointClass {
    let result: Point = new Array<number>() as Point;
    for (let i = 0; i < 2; i++) {
      result.push(this[i] * scale)
    }
    return new PointClass(result);
  }
}

// 定义可动画属性接口的参数类型，实现AnimatableArithmetic<T>接口中加法、减法、乘法和判断相等函数
// 模板T支持嵌套实现AnimatableArithmetic<T>的类型
class PointVector extends Array<PointClass> implements AnimatableArithmetic<Array<Point>> {
  constructor(initialValue: Array<Point>) {
    super();
    if (initialValue.length) {
      initialValue.forEach((p: Point) => this.push(new PointClass(p)))
    }
  }

  // implement the IAnimatableArithmetic interface
  plus(rhs: PointVector): PointVector {
    let result = new PointVector([]);
    const len = Math.min(this.length, rhs.length)
    for (let i = 0; i < len; i++) {
      result.push(this[i].add(rhs[i]))
    }
    return result;
  }

  subtract(rhs: PointVector): PointVector {
    let result = new PointVector([]);
    const len = Math.min(this.length, rhs.length)
    for (let i = 0; i < len; i++) {
      result.push(this[i].subtract(rhs[i]))
    }
    return result;
  }

  multiply(scale: number): PointVector {
    let result = new PointVector([]);
    for (let i = 0; i < this.length; i++) {
      result.push(this[i].multiply(scale))
    }
    return result;
  }

  equals(rhs: PointVector): boolean {
    if (this.length !== rhs.length) {
      return false;
    }
    for (let index = 0, size = this.length; index < size; ++index) {
      if (this[index][0] !== rhs[index][0] || this[index][1] !== rhs[index][1]) {
        return false;
      }
    }
    return true;
  }
}

// 自定义可动画属性接口
@AnimatableExtend(Polyline)
function animatablePoints(points: PointVector) {
  .points(points)
}

@Entry
@Component
struct AnimatedShape {
  squareStartPointX: number = 75;
  squareStartPointY: number = 25;
  squareWidth: number = 150;
  squareEndTranslateX: number = 50;
  squareEndTranslateY: number = 50;
  @State pointVec1: PointVector = new PointVector([
    [this.squareStartPointX, this.squareStartPointY],
    [this.squareStartPointX + this.squareWidth, this.squareStartPointY],
    [this.squareStartPointX + this.squareWidth, this.squareStartPointY + this.squareWidth],
    [this.squareStartPointX, this.squareStartPointY + this.squareWidth]
  ]);
  @State pointVec2: PointVector = new PointVector([
    [this.squareStartPointX + this.squareEndTranslateX, this.squareStartPointY + this.squareStartPointY],
    [this.squareStartPointX + this.squareWidth + this.squareEndTranslateX,
      this.squareStartPointY + this.squareStartPointY],
    [this.squareStartPointX + this.squareWidth, this.squareStartPointY + this.squareWidth],
    [this.squareStartPointX, this.squareStartPointY + this.squareWidth]
  ]);
  @State color: Color = Color.Green;
  @State fontSize: number = 20.0;
  @State polyline1Vec: PointVector = this.pointVec1;
  @State polyline2Vec: PointVector = this.pointVec2;

  build() {
    Row() {
      Polyline()
        .width(300)
        .height(200)
        .backgroundColor("#0C000000")
        .fill('#317AF7')
        .animatablePoints(this.polyline1Vec)
        .animation({ duration: 2000, delay: 0, curve: Curve.Ease })
        .onClick(() => {

          if (this.polyline1Vec.equals(this.pointVec1)) {
            this.polyline1Vec = this.pointVec2;
          } else {
            this.polyline1Vec = this.pointVec1;
          }
        })
    }
    .width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

declare type Point = number[];

// 定义可动画属性接口的参数类型，实现AnimatableArithmetic<T>接口中加法、减法、乘法和判断相等函数

class PointClass extends Array<number> {

constructor(value: Point) {

super(value[0], value[1])

}

add(rhs: PointClass): PointClass {

let result: Point = new Array<number>() as Point;

for (let i = 0; i < 2; i++) {

result.push(rhs[i] + this[i])

}

return new PointClass(result);

}

subtract(rhs: PointClass): PointClass {

let result: Point = new Array<number>() as Point;

for (let i = 0; i < 2; i++) {

result.push(this[i] - rhs[i]);

}

return new PointClass(result);

}

multiply(scale: number): PointClass {

let result: Point = new Array<number>() as Point;

for (let i = 0; i < 2; i++) {

result.push(this[i] * scale)

}

return new PointClass(result);

}

// 定义可动画属性接口的参数类型，实现AnimatableArithmetic<T>接口中加法、减法、乘法和判断相等函数

// 模板T支持嵌套实现AnimatableArithmetic<T>的类型

class PointVector extends Array<PointClass> implements AnimatableArithmetic<Array<Point>> {

constructor(initialValue: Array<Point>) {

super();

if (initialValue.length) {

initialValue.forEach((p: Point) => this.push(new PointClass(p)))

}

// implement the IAnimatableArithmetic interface

plus(rhs: PointVector): PointVector {

let result = new PointVector([]);

const len = Math.min(this.length, rhs.length)

for (let i = 0; i < len; i++) {

result.push(this[i].add(rhs[i]))

}

return result;

}

subtract(rhs: PointVector): PointVector {

let result = new PointVector([]);

const len = Math.min(this.length, rhs.length)

for (let i = 0; i < len; i++) {

result.push(this[i].subtract(rhs[i]))

}

return result;

}

multiply(scale: number): PointVector {

let result = new PointVector([]);

for (let i = 0; i < this.length; i++) {

result.push(this[i].multiply(scale))

}

return result;

}

equals(rhs: PointVector): boolean {

if (this.length !== rhs.length) {

return false;

}

for (let index = 0, size = this.length; index < size; ++index) {

if (this[index][0] !== rhs[index][0] || this[index][1] !== rhs[index][1]) {

return false;

}

return true;

}

// 自定义可动画属性接口

@AnimatableExtend(Polyline)

function animatablePoints(points: PointVector) {

.points(points)

}

@Entry

@Component

struct AnimatedShape {

squareStartPointX: number = 75;

squareStartPointY: number = 25;

squareWidth: number = 150;

squareEndTranslateX: number = 50;

squareEndTranslateY: number = 50;

@State pointVec1: PointVector = new PointVector([

[this.squareStartPointX, this.squareStartPointY],

[this.squareStartPointX + this.squareWidth, this.squareStartPointY],

[this.squareStartPointX + this.squareWidth, this.squareStartPointY + this.squareWidth],

[this.squareStartPointX, this.squareStartPointY + this.squareWidth]

]);

@State pointVec2: PointVector = new PointVector([

[this.squareStartPointX + this.squareEndTranslateX, this.squareStartPointY + this.squareStartPointY],

[this.squareStartPointX + this.squareWidth + this.squareEndTranslateX,

this.squareStartPointY + this.squareStartPointY],

[this.squareStartPointX + this.squareWidth, this.squareStartPointY + this.squareWidth],

[this.squareStartPointX, this.squareStartPointY + this.squareWidth]

]);

@State color: Color = Color.Green;

@State fontSize: number = 20.0;

@State polyline1Vec: PointVector = this.pointVec1;

@State polyline2Vec: PointVector = this.pointVec2;

build() {

Row() {

Polyline()

.width(300)

.height(200)

.backgroundColor("#0C000000")

.fill('#317AF7')

.animatablePoints(this.polyline1Vec)

.animation({ duration: 2000, delay: 0, curve: Curve.Ease })

.onClick(() => {

if (this.polyline1Vec.equals(this.pointVec1)) {

this.polyline1Vec = this.pointVec2;

} else {

this.polyline1Vec = this.pointVec1;

}

})

}

.width('100%').height('100%').justifyContent(FlexAlign.Center)

}

转场动画

出现/消失转场

单个示例

import { curves } from '@kit.ArkUI';

@Entry
@Component
struct TransitionEffectDemo {
  @State isPresent: boolean = false;

  // 第一步，创建TransitionEffect
  private effect: TransitionEffect =
    // 创建默认透明度转场效果,并指定了springMotion(0.6, 0.8)曲线
  TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.8) })
    // 通过combine方法,这里的动画参数会跟随上面的TransitionEffect，也就是springMotion(0.6, 0.8)
    .combine(TransitionEffect.scale({ x: 0, y: 0 }))
      // 添加旋转转场效果，这里的动画参数会跟随上面带animation的TransitionEffect，也就是springMotion(0.6, 0.8)
    .combine(TransitionEffect.rotate({ angle: 90 }))
      // 添加平移转场效果，这里的动画参数使用指定的springMotion()
    .combine(TransitionEffect.translate({ y: 150 }).animation({ curve: curves.springMotion() }))
      // 添加move转场效果，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion()
    .combine(TransitionEffect.move(TransitionEdge.END))

  build() {
    Stack() {
      if (this.isPresent) {
        Column() {
          Text('ArkUI')
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .fontColor(Color.White)
        }
        .justifyContent(FlexAlign.Center)
        .width(150)
        .height(150)
        .borderRadius(10)
        .backgroundColor(0xf56c6c)
        // 第二步：将转场效果通过transition接口设置到组件
        .transition(this.effect)
      }

      // 边框
      Column()
        .width(155)
        .height(155)
        .border({
          width: 5,
          radius: 10,
          color: Color.Black
        })

      // 第三步：新增或者删除组件触发转场，控制新增或者删除组件
      Button('Click')
        .margin({ top: 320 })
        .onClick(() => {
          this.isPresent = !this.isPresent;
        })
    }
    .width('100%')
    .height('60%')
  }
}

import { curves } from '@kit.ArkUI';

@Entry

@Component

struct TransitionEffectDemo {

@State isPresent: boolean = false;

// 第一步，创建TransitionEffect

private effect: TransitionEffect =

// 创建默认透明度转场效果,并指定了springMotion(0.6, 0.8)曲线

TransitionEffect.OPACITY.animation({ curve: curves.springMotion(0.6, 0.8) })

// 通过combine方法,这里的动画参数会跟随上面的TransitionEffect，也就是springMotion(0.6, 0.8)

.combine(TransitionEffect.scale({ x: 0, y: 0 }))

// 添加旋转转场效果，这里的动画参数会跟随上面带animation的TransitionEffect，也就是springMotion(0.6, 0.8)

.combine(TransitionEffect.rotate({ angle: 90 }))

// 添加平移转场效果，这里的动画参数使用指定的springMotion()

.combine(TransitionEffect.translate({ y: 150 }).animation({ curve: curves.springMotion() }))

// 添加move转场效果，这里的动画参数会跟随上面的TransitionEffect，也就是springMotion()

.combine(TransitionEffect.move(TransitionEdge.END))

build() {

Stack() {

if (this.isPresent) {

Column() {

Text('ArkUI')

.fontWeight(FontWeight.Bold)

.fontSize(20)

.fontColor(Color.White)

}

.justifyContent(FlexAlign.Center)

.width(150)

.height(150)

.borderRadius(10)

.backgroundColor(0xf56c6c)

// 第二步：将转场效果通过transition接口设置到组件

.transition(this.effect)

}

// 边框

Column()

.width(155)

.height(155)

.border({

width: 5,

radius: 10,

color: Color.Black

})

// 第三步：新增或者删除组件触发转场，控制新增或者删除组件

Button('Click')

.margin({ top: 320 })

.onClick(() => {

this.isPresent = !this.isPresent;

})

}

.width('100%')

.height('60%')

}

多个delay示例

const ITEM_COUNTS = 9;
const ITEM_COLOR = '#ED6F21';
const INTERVAL = 30;
const DURATION = 300;

@Entry
@Component
struct Index1 {
  @State isGridShow: boolean = false;
  private dataArray: number[] = new Array(ITEM_COUNTS);

  aboutToAppear(): void {
    for (let i = 0; i < ITEM_COUNTS; i++) {
      this.dataArray[i] = i;
    }
  }

  build() {
    Stack() {
      if (this.isGridShow) {
        Grid() {
          ForEach(this.dataArray, (item: number, index: number) => {
            GridItem() {
              Stack() {
                Text((item + 1).toString())
              }
              .size({ width: 50, height: 50 })
              .backgroundColor(ITEM_COLOR)
              .transition(TransitionEffect.OPACITY
                .combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }))// 对每个方格的转场添加delay，实现组件的渐次出现消失效果
                .animation({ duration: DURATION, curve: Curve.Friction, delay: INTERVAL * index }))
              .borderRadius(10)
            }
            // 消失时，如果不对方格的所有父控件添加转场效果，则方格的消失转场不会生效
            // 此处让方格的父控件在出现消失转场时一直以0.99的透明度显示，使得方格的转场效果不受影响
            .transition(TransitionEffect.opacity(0.99))
          }, (item: number) => item.toString())
        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsGap(15)
        .columnsGap(15)
        .size({ width: 180, height: 180 })
        // 消失时，如果不对方格的所有父控件添加转场效果，则方格的消失转场不会生效
        // 此处让父控件在出现消失转场时一直以0.99的透明度显示，使得方格的转场效果不受影响
        .transition(TransitionEffect.opacity(0.99))
      }
    }
    .size({ width: '100%', height: '100%' })
    .onClick(() => {
      this.getUIContext()?.animateTo({
        duration: DURATION + INTERVAL * (ITEM_COUNTS - 1),
        curve: Curve.Friction
      }, () => {
        this.isGridShow = !this.isGridShow;
      })
    })
  }
}

const ITEM_COUNTS = 9;

const ITEM_COLOR = '#ED6F21';

const INTERVAL = 30;

const DURATION = 300;

@Entry

@Component

struct Index1 {

@State isGridShow: boolean = false;

private dataArray: number[] = new Array(ITEM_COUNTS);

aboutToAppear(): void {

for (let i = 0; i < ITEM_COUNTS; i++) {

this.dataArray[i] = i;

}

build() {

Stack() {

if (this.isGridShow) {

Grid() {

ForEach(this.dataArray, (item: number, index: number) => {

GridItem() {

Stack() {

Text((item + 1).toString())

}

.size({ width: 50, height: 50 })

.backgroundColor(ITEM_COLOR)

.transition(TransitionEffect.OPACITY

.combine(TransitionEffect.scale({ x: 0.5, y: 0.5 }))// 对每个方格的转场添加delay，实现组件的渐次出现消失效果

.animation({ duration: DURATION, curve: Curve.Friction, delay: INTERVAL * index }))

.borderRadius(10)

}

// 消失时，如果不对方格的所有父控件添加转场效果，则方格的消失转场不会生效

// 此处让方格的父控件在出现消失转场时一直以0.99的透明度显示，使得方格的转场效果不受影响

.transition(TransitionEffect.opacity(0.99))

}, (item: number) => item.toString())

}

.columnsTemplate('1fr 1fr 1fr')

.rowsGap(15)

.columnsGap(15)

.size({ width: 180, height: 180 })

// 消失时，如果不对方格的所有父控件添加转场效果，则方格的消失转场不会生效

// 此处让父控件在出现消失转场时一直以0.99的透明度显示，使得方格的转场效果不受影响

.transition(TransitionEffect.opacity(0.99))

}

.size({ width: '100%', height: '100%' })

.onClick(() => {

this.getUIContext()?.animateTo({

duration: DURATION + INTERVAL * (ITEM_COUNTS - 1),

curve: Curve.Friction

}, () => {

this.isGridShow = !this.isGridShow;

})

}

导航转场

PageOne.ets简单代码

// PageOne.ets
@Entry
@Component
struct PageOne {
  @Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack()
  private listArray: string[] = ['WLAN', 'Bluetooth', 'Personal Hotpot', 'Connect & Share']

  build() {
    Column() {
      Navigation(this.pathInfos) {
        ForEach(this.listArray, (item: string) => {
          Text(item)
            .onClick(() => {
              this.pathInfos.pushPathByName(`${item}`, '详情页面参数')
            })
        })
      }
      .title('设置')
      .mode(NavigationMode.Auto)
    }
  }
}

@Builder
export function MyCommonPageBuilder(name: string, param: string) {
  MyCommonPage({ name, value: param })
}

@Component
export struct MyCommonPage {
  pathInfos: NavPathStack = new NavPathStack()
  name: String = ''
  @State value: String = ''

  build() {
    NavDestination() {
      Column() {
        Text(`${this.name}设置页面`)
        Text(JSON.stringify(this.value))

        Button('返回')
          .onClick(() => {
            this.pathInfos.pop()
          })
      }
    }
    .title(`${this.name}`)
    .onReady((ctx: NavDestinationContext) => {
      this.pathInfos = ctx.pathStack
    })
  }
}

// PageOne.ets

@Entry

@Component

struct PageOne {

@Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack()

private listArray: string[] = ['WLAN', 'Bluetooth', 'Personal Hotpot', 'Connect & Share']

build() {

Column() {

Navigation(this.pathInfos) {

ForEach(this.listArray, (item: string) => {

Text(item)

.onClick(() => {

this.pathInfos.pushPathByName(`${item}`, '详情页面参数')

})

}

.title('设置')

.mode(NavigationMode.Auto)

}

@Builder

export function MyCommonPageBuilder(name: string, param: string) {

MyCommonPage({ name, value: param })

}

@Component

export struct MyCommonPage {

pathInfos: NavPathStack = new NavPathStack()

@State value: String = ''

build() {

NavDestination() {

Column() {

Text(`${this.name}设置页面`)

Text(JSON.stringify(this.value))

Button('返回')

.onClick(() => {

this.pathInfos.pop()

})

}

.title(`${this.name}`)

.onReady((ctx: NavDestinationContext) => {

this.pathInfos = ctx.pathStack

})

}

PageOne.ets使用@Extend写法代码

@Entry
@Component
struct PageOne {
  @Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack()
  private listArray: string[] = ['WLAN', 'Bluetooth', 'Personal Hotpot', 'Connect & Share']

  build() {
    Column() {
      Navigation(this.pathInfos) {

        TextInput({ placeholder: '输入关键字搜索' })
          .inputExtend()

        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.listArray, (item: string) => {
            ListItem() {
              Row() {
                this.initialLetterBuilder(item.slice(0, 1))

                Column() {
                  Text(item)
                    .fontSize(16)
                }
                .alignItems(HorizontalAlign.Center)

                Blank()

                this.rightArrowBuilder()
              }
              .listRowExtend()

            }
            .width('100%')
            .onClick(() => {
              this.pathInfos.pushPathByName(`${item}`, '详情页面参数')
            })
          }, (item: string): string => item)
        }
        .listExtend()
      }
      .navigationExtend()
    }
    .columnExtend()
  }

  @Builder
  initialLetterBuilder(letter: string) {
    Row() {
      Text(letter)
        .fontColor(Color.White)
        .fontSize(14)
        .fontWeight(FontWeight.Bold)
    }
    .width(30)
    .height(30)
    .backgroundColor('#a8a8a8')
    .margin({ right: 20 })
    .borderRadius(20)
    .justifyContent(FlexAlign.Center)
  }

  @Builder
  rightArrowBuilder() {
    Row()
      .width(12)
      .height(12)
      .border({
        width: { top: 2, right: 2 },
        color: 0xcccccc
      })
      .rotate({ angle: 45 })
  }
}

@Extend(Column)
function columnExtend() {
  .size({ width: '100%', height: '100%' })
  .backgroundColor(0xf4f4f5)
}

@Extend(Navigation)
function navigationExtend() {
  .width('100%')
  .title('设置')
  .mode(NavigationMode.Auto)
}

@Extend(List)
function listExtend() {
  .listDirection(Axis.Vertical)
  .edgeEffect(EdgeEffect.Spring)
  .sticky(StickyStyle.Header)
  .chainAnimation(false)
  .width('100%')
}

@Extend(Row)
function listRowExtend() {
  .width('90%')
  .padding(15)
  .backgroundColor(Color.White)
  .shadow({ radius: 100, color: '#ededed' })
  .borderRadius(15)
  .alignItems(VerticalAlign.Center)
}

@Extend(TextInput)
function inputExtend() {
  .width('90%')
  .height(40)
  .margin({ bottom: 10 })
}


@Builder
export function MyCommonPageBuilder(name: string, param: string) {
  MyCommonPage({ name, value: param })
}

@Component
export struct MyCommonPage {
  pathInfos: NavPathStack = new NavPathStack()
  name: String = ''
  @State value: String = ''

  build() {
    NavDestination() {
      Column() {
        Text(`${this.name}设置页面`)
          .width('100%')
          .fontSize(20)
          .fontColor(0x333333)
          .textAlign(TextAlign.Center)
          .textShadow({
            radius: 2,
            offsetX: 4,
            offsetY: 4,
            color: 0x909399
          })
          .padding({ top: 30 })

        Text(JSON.stringify(this.value))
          .width('100%')
          .fontSize(18)
          .fontColor(0x666666)
          .textAlign(TextAlign.Center)
          .padding({ top: 45 })

        Button('返回')
          .width('50%')
          .height(40)
          .margin({ top: 50 })
          .onClick(() => {
            this.pathInfos.pop()
          })
      }
      .size({ width: '100%', height: '100%' })
    }
    .title(`${this.name}`)
    .onReady((ctx: NavDestinationContext) => {
      this.pathInfos = ctx.pathStack
    })
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

@Entry

@Component

struct PageOne {

@Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack()

private listArray: string[] = ['WLAN', 'Bluetooth', 'Personal Hotpot', 'Connect & Share']

build() {

Column() {

Navigation(this.pathInfos) {

TextInput({ placeholder: '输入关键字搜索' })

.inputExtend()

List({ space: 12, initialIndex: 0 }) {

ForEach(this.listArray, (item: string) => {

ListItem() {

Row() {

this.initialLetterBuilder(item.slice(0, 1))

Column() {

Text(item)

.fontSize(16)

}

.alignItems(HorizontalAlign.Center)

Blank()

this.rightArrowBuilder()

}

.listRowExtend()

}

.width('100%')

.onClick(() => {

this.pathInfos.pushPathByName(`${item}`, '详情页面参数')

})

}, (item: string): string => item)

}

.listExtend()

}

.navigationExtend()

}

.columnExtend()

}

@Builder

initialLetterBuilder(letter: string) {

Row() {

Text(letter)

.fontColor(Color.White)

.fontSize(14)

.fontWeight(FontWeight.Bold)

}

.width(30)

.height(30)

.backgroundColor('#a8a8a8')

.margin({ right: 20 })

.borderRadius(20)

.justifyContent(FlexAlign.Center)

}

@Builder

rightArrowBuilder() {

Row()

.width(12)

.height(12)

.border({

width: { top: 2, right: 2 },

color: 0xcccccc

})

.rotate({ angle: 45 })

}

@Extend(Column)

function columnExtend() {

.size({ width: '100%', height: '100%' })

.backgroundColor(0xf4f4f5)

}

@Extend(Navigation)

function navigationExtend() {

.width('100%')

.title('设置')

.mode(NavigationMode.Auto)

}

@Extend(List)

function listExtend() {

.listDirection(Axis.Vertical)

.edgeEffect(EdgeEffect.Spring)

.sticky(StickyStyle.Header)

.chainAnimation(false)

.width('100%')

}

@Extend(Row)

function listRowExtend() {

.width('90%')

.padding(15)

.backgroundColor(Color.White)

.shadow({ radius: 100, color: '#ededed' })

.borderRadius(15)

.alignItems(VerticalAlign.Center)

}

@Extend(TextInput)

function inputExtend() {

.width('90%')

.height(40)

.margin({ bottom: 10 })

}

@Builder

export function MyCommonPageBuilder(name: string, param: string) {

MyCommonPage({ name, value: param })

}

@Component

export struct MyCommonPage {

pathInfos: NavPathStack = new NavPathStack()

@State value: String = ''

build() {

NavDestination() {

Column() {

Text(`${this.name}设置页面`)

.width('100%')

.fontSize(20)

.fontColor(0x333333)

.textAlign(TextAlign.Center)

.textShadow({

radius: 2,

offsetX: 4,

offsetY: 4,

color: 0x909399

})

.padding({ top: 30 })

Text(JSON.stringify(this.value))

.width('100%')

.fontSize(18)

.fontColor(0x666666)

.textAlign(TextAlign.Center)

.padding({ top: 45 })

Button('返回')

.width('50%')

.height(40)

.margin({ top: 50 })

.onClick(() => {

this.pathInfos.pop()

})

}

.size({ width: '100%', height: '100%' })

}

.title(`${this.name}`)

.onReady((ctx: NavDestinationContext) => {

this.pathInfos = ctx.pathStack

})

}

PageOne.ets官方代码

//PageOne.ets
@Entry
@Component
struct NavigationDemo {
  @Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack();
  private listArray: Array<string> = ['WLAN', 'Bluetooth', 'Personal Hotpot', 'Connect & Share'];

  build() {
    Column() {
      Navigation(this.pathInfos) {
        TextInput({ placeholder: '输入关键字搜索' })
          .width('90%')
          .height(40)
          .margin({ bottom: 10 })

        // 通过List定义导航的一级界面
        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.listArray, (item: string) => {
            ListItem() {
              Row() {
                Row() {
                  Text(`${item.slice(0, 1)}`)
                    .fontColor(Color.White)
                    .fontSize(14)
                    .fontWeight(FontWeight.Bold)
                }
                .width(30)
                .height(30)
                .backgroundColor('#a8a8a8')
                .margin({ right: 20 })
                .borderRadius(20)
                .justifyContent(FlexAlign.Center)

                Column() {
                  Text(item)
                    .fontSize(16)
                    .margin({ bottom: 5 })
                }
                .alignItems(HorizontalAlign.Start)

                Blank()

                Row()
                  .width(12)
                  .height(12)
                  .margin({ right: 15 })
                  .border({
                    width: { top: 2, right: 2 },
                    color: 0xcccccc
                  })
                  .rotate({ angle: 45 })
              }
              .borderRadius(15)
              .shadow({ radius: 100, color: '#ededed' })
              .width('90%')
              .alignItems(VerticalAlign.Center)
              .padding({ left: 15, top: 15, bottom: 15 })
              .backgroundColor(Color.White)
            }
            .width('100%')
            .onClick(() => {
              this.pathInfos.pushPathByName(`${item}`, '详情页面参数')//将name指定的NaviDestination页面信息入栈,传递的参数为param
            })
          }, (item: string): string => item)
        }
        .listDirection(Axis.Vertical)
        .edgeEffect(EdgeEffect.Spring)
        .sticky(StickyStyle.Header)
        .chainAnimation(false)
        .width('100%')
      }
      .width('100%')
      .mode(NavigationMode.Auto)
      .title('设置') // 设置标题文字
    }
    .size({ width: '100%', height: '100%' })
    .backgroundColor(0xf4f4f5)
  }
}

//PageOne.ets

@Builder
export function MyCommonPageBuilder(name: string, param: string) {
  MyCommonPage({ name: name, value: param })
}

@Component
export struct MyCommonPage {
  pathInfos: NavPathStack = new NavPathStack();
  name: String = '';
  @State value: String = '';

  build() {
    NavDestination() {
      Column() {
        Text(`${this.name}设置页面`)
          .width('100%')
          .fontSize(20)
          .fontColor(0x333333)
          .textAlign(TextAlign.Center)
          .textShadow({
            radius: 2,
            offsetX: 4,
            offsetY: 4,
            color: 0x909399
          })
          .padding({ top: 30 })
        Text(`${JSON.stringify(this.value)}`)
          .width('100%')
          .fontSize(18)
          .fontColor(0x666666)
          .textAlign(TextAlign.Center)
          .padding({ top: 45 })
        Button('返回')
          .width('50%')
          .height(40)
          .margin({ top: 50 })
          .onClick(() => {
            //弹出路由栈栈顶元素，返回上个页面
            this.pathInfos.pop();
          })
      }
      .size({ width: '100%', height: '100%' })
    }.title(`${this.name}`)
    .onReady((ctx: NavDestinationContext) => {
      //NavDestinationContext获取当前所在的页面栈
      this.pathInfos = ctx.pathStack;
    }) 

  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

//PageOne.ets

@Entry

@Component

struct NavigationDemo {

@Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack();

private listArray: Array<string> = ['WLAN', 'Bluetooth', 'Personal Hotpot', 'Connect & Share'];

build() {

Column() {

Navigation(this.pathInfos) {

TextInput({ placeholder: '输入关键字搜索' })

.width('90%')

.height(40)

.margin({ bottom: 10 })

// 通过List定义导航的一级界面

List({ space: 12, initialIndex: 0 }) {

ForEach(this.listArray, (item: string) => {

ListItem() {

Row() {

Text(`${item.slice(0, 1)}`)

.fontColor(Color.White)

.fontSize(14)

.fontWeight(FontWeight.Bold)

}

.width(30)

.height(30)

.backgroundColor('#a8a8a8')

.margin({ right: 20 })

.borderRadius(20)

.justifyContent(FlexAlign.Center)

Column() {

Text(item)

.fontSize(16)

.margin({ bottom: 5 })

}

.alignItems(HorizontalAlign.Start)

Blank()

Row()

.width(12)

.height(12)

.margin({ right: 15 })

.border({

width: { top: 2, right: 2 },

color: 0xcccccc

})

.rotate({ angle: 45 })

}

.borderRadius(15)

.shadow({ radius: 100, color: '#ededed' })

.width('90%')

.alignItems(VerticalAlign.Center)

.padding({ left: 15, top: 15, bottom: 15 })

.backgroundColor(Color.White)

}

.width('100%')

.onClick(() => {

this.pathInfos.pushPathByName(`${item}`, '详情页面参数')//将name指定的NaviDestination页面信息入栈,传递的参数为param

})

}, (item: string): string => item)

}

.listDirection(Axis.Vertical)

.edgeEffect(EdgeEffect.Spring)

.sticky(StickyStyle.Header)

.chainAnimation(false)

.width('100%')

}

.width('100%')

.mode(NavigationMode.Auto)

.title('设置') // 设置标题文字

}

.size({ width: '100%', height: '100%' })

.backgroundColor(0xf4f4f5)

}

//PageOne.ets

@Builder

export function MyCommonPageBuilder(name: string, param: string) {

MyCommonPage({ name: name, value: param })

}

@Component

export struct MyCommonPage {

pathInfos: NavPathStack = new NavPathStack();

@State value: String = '';

build() {

NavDestination() {

Column() {

Text(`${this.name}设置页面`)

.width('100%')

.fontSize(20)

.fontColor(0x333333)

.textAlign(TextAlign.Center)

.textShadow({

radius: 2,

offsetX: 4,

offsetY: 4,

color: 0x909399

})

.padding({ top: 30 })

Text(`${JSON.stringify(this.value)}`)

.width('100%')

.fontSize(18)

.fontColor(0x666666)

.textAlign(TextAlign.Center)

.padding({ top: 45 })

Button('返回')

.width('50%')

.height(40)

.margin({ top: 50 })

.onClick(() => {

//弹出路由栈栈顶元素，返回上个页面

this.pathInfos.pop();

})

}

.size({ width: '100%', height: '100%' })

}.title(`${this.name}`)

.onReady((ctx: NavDestinationContext) => {

//NavDestinationContext获取当前所在的页面栈

this.pathInfos = ctx.pathStack;

})

}

PageTwo.ets简单代码

//PageTwo.ets
@Builder
export function MySharePageBuilder(name: string, param: string) {
  MySharePage({ name: name })
}

@Component
export struct MySharePage {
  pathInfos: NavPathStack = new NavPathStack();
  name: String = '';
  private listArray: Array<string> = ['Projection', 'Print', 'VPN', 'Private DNS', 'NFC'];

  build() {
    NavDestination() {
      Column() {
        ForEach(this.listArray, (item: string) => {
          Text(item)
            .onClick(() => {
              this.pathInfos.pushPathByName(`${item}`, '页面设置参数')
            })
        }, (item: string): string => item)

      }
    }
    .title(`${this.name}`)
    .onReady((ctx: NavDestinationContext) => {
      //NavDestinationContext获取当前所在的页面栈
      this.pathInfos = ctx.pathStack;
    })
  }
}

//PageTwo.ets

@Builder

export function MySharePageBuilder(name: string, param: string) {

MySharePage({ name: name })

}

@Component

export struct MySharePage {

pathInfos: NavPathStack = new NavPathStack();

private listArray: Array<string> = ['Projection', 'Print', 'VPN', 'Private DNS', 'NFC'];

build() {

NavDestination() {

Column() {

ForEach(this.listArray, (item: string) => {

Text(item)

.onClick(() => {

this.pathInfos.pushPathByName(`${item}`, '页面设置参数')

})

}, (item: string): string => item)

}

.title(`${this.name}`)

.onReady((ctx: NavDestinationContext) => {

//NavDestinationContext获取当前所在的页面栈

this.pathInfos = ctx.pathStack;

})

}

PageTwo.ets官方代码

//PageTwo.ets
@Builder
export function MySharePageBuilder(name: string, param: string) {
  MySharePage({ name: name })
}

@Component
export struct MySharePage {
  pathInfos: NavPathStack = new NavPathStack();
  name: String = '';
  private listArray: Array<string> = ['Projection', 'Print', 'VPN', 'Private DNS', 'NFC'];

  build() {
    NavDestination() {
      Column() {
        List({ space: 12, initialIndex: 0 }) {
          ForEach(this.listArray, (item: string) => {
            ListItem() {
              Row() {
                Row() {
                  Text(`${item.slice(0, 1)}`)
                    .fontColor(Color.White)
                    .fontSize(14)
                    .fontWeight(FontWeight.Bold)
                }
                .width(30)
                .height(30)
                .backgroundColor('#a8a8a8')
                .margin({ right: 20 })
                .borderRadius(20)
                .justifyContent(FlexAlign.Center)

                Column() {
                  Text(item)
                    .fontSize(16)
                    .margin({ bottom: 5 })
                }
                .alignItems(HorizontalAlign.Start)

                Blank()

                Row()
                  .width(12)
                  .height(12)
                  .margin({ right: 15 })
                  .border({
                    width: { top: 2, right: 2 },
                    color: 0xcccccc
                  })
                  .rotate({ angle: 45 })
              }
              .borderRadius(15)
              .shadow({ radius: 100, color: '#ededed' })
              .width('90%')
              .alignItems(VerticalAlign.Center)
              .padding({ left: 15, top: 15, bottom: 15 })
              .backgroundColor(Color.White)
            }
            .width('100%')
            .onClick(() => {
              this.pathInfos.pushPathByName(`${item}`, '页面设置参数')
            })
          }, (item: string): string => item)
        }
        .listDirection(Axis.Vertical)
        .edgeEffect(EdgeEffect.Spring)
        .sticky(StickyStyle.Header)
        .width('100%')
      }
      .size({ width: '100%', height: '100%' })
    }.title(`${this.name}`)
    .onReady((ctx: NavDestinationContext) => {
      //NavDestinationContext获取当前所在的页面栈
      this.pathInfos = ctx.pathStack;
    }) 
  }
}

//PageTwo.ets

@Builder

export function MySharePageBuilder(name: string, param: string) {

MySharePage({ name: name })

}

@Component

export struct MySharePage {

pathInfos: NavPathStack = new NavPathStack();

private listArray: Array<string> = ['Projection', 'Print', 'VPN', 'Private DNS', 'NFC'];

build() {

NavDestination() {

Column() {

List({ space: 12, initialIndex: 0 }) {

ForEach(this.listArray, (item: string) => {

ListItem() {

Row() {

Text(`${item.slice(0, 1)}`)

.fontColor(Color.White)

.fontSize(14)

.fontWeight(FontWeight.Bold)

}

.width(30)

.height(30)

.backgroundColor('#a8a8a8')

.margin({ right: 20 })

.borderRadius(20)

.justifyContent(FlexAlign.Center)

Column() {

Text(item)

.fontSize(16)

.margin({ bottom: 5 })

}

.alignItems(HorizontalAlign.Start)

Blank()

Row()

.width(12)

.height(12)

.margin({ right: 15 })

.border({

width: { top: 2, right: 2 },

color: 0xcccccc

})

.rotate({ angle: 45 })

}

.borderRadius(15)

.shadow({ radius: 100, color: '#ededed' })

.width('90%')

.alignItems(VerticalAlign.Center)

.padding({ left: 15, top: 15, bottom: 15 })

.backgroundColor(Color.White)

}

.width('100%')

.onClick(() => {

this.pathInfos.pushPathByName(`${item}`, '页面设置参数')

})

}, (item: string): string => item)

}

.listDirection(Axis.Vertical)

.edgeEffect(EdgeEffect.Spring)

.sticky(StickyStyle.Header)

.width('100%')

}

.size({ width: '100%', height: '100%' })

}.title(`${this.name}`)

.onReady((ctx: NavDestinationContext) => {

//NavDestinationContext获取当前所在的页面栈

this.pathInfos = ctx.pathStack;

})

}

route_map.json

{
  "routerMap": [
    {
      "name": "WLAN",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "MyCommonPageBuilder"
    },
    {
      "name": "Bluetooth",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "MyCommonPageBuilder"
    },
    {
      "name": "Personal Hotpot",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "MyCommonPageBuilder"
    },
    {
      "name": "Connect & Share",
      "pageSourceFile": "src/main/ets/pages/PageTwo.ets",
      "buildFunction": "MySharePageBuilder"
    },
    {
      "name": "Projection",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "MyCommonPageBuilder"
    },
    {
      "name": "Print",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "MyCommonPageBuilder"
    },
    {
      "name": "VPN",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "MyCommonPageBuilder"
    },
    {
      "name": "Private DNS",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "MyCommonPageBuilder"
    },
    {
      "name": "NFC",
      "pageSourceFile": "src/main/ets/pages/PageOne.ets",
      "buildFunction": "MyCommonPageBuilder"
    }
  ]
}

{

"routerMap": [

{

"name": "WLAN",

"pageSourceFile": "src/main/ets/pages/PageOne.ets",

"buildFunction": "MyCommonPageBuilder"

{

"name": "Bluetooth",

"pageSourceFile": "src/main/ets/pages/PageOne.ets",

"buildFunction": "MyCommonPageBuilder"

{

"name": "Personal Hotpot",

"pageSourceFile": "src/main/ets/pages/PageOne.ets",

"buildFunction": "MyCommonPageBuilder"

{

"name": "Connect & Share",

"pageSourceFile": "src/main/ets/pages/PageTwo.ets",

"buildFunction": "MySharePageBuilder"

{

"name": "Projection",

"pageSourceFile": "src/main/ets/pages/PageOne.ets",

"buildFunction": "MyCommonPageBuilder"

{

"name": "Print",

"pageSourceFile": "src/main/ets/pages/PageOne.ets",

"buildFunction": "MyCommonPageBuilder"

{

"name": "VPN",

"pageSourceFile": "src/main/ets/pages/PageOne.ets",

"buildFunction": "MyCommonPageBuilder"

{

"name": "Private DNS",

"pageSourceFile": "src/main/ets/pages/PageOne.ets",

"buildFunction": "MyCommonPageBuilder"

{

"name": "NFC",

"pageSourceFile": "src/main/ets/pages/PageOne.ets",

"buildFunction": "MyCommonPageBuilder"

}

]

}

模态转场

使用bindContentCover构建全屏模态转场效果

import { curves } from '@kit.ArkUI';


@Entry
@Component
struct BindContentCoverDemo {
  // 第一步：定义全屏模态转场效果bindContentCover
  // 模态转场控制变量
  @State isPresent: boolean = false;

  // 第二步：定义模态展示界面
  // 通过@Builder构建模态展示界面
  @Builder
  MyBuilder() {
    Column() {
      Button('关闭')
        .onClick(() => {
          this.isPresent = !this.isPresent;
        })
    }
    .size({ width: '100%', height: '100%' })
    .justifyContent(FlexAlign.Center)
    .backgroundColor(0xf5f5f5)
    // 通过转场动画实现出现消失转场动画效果
    .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
  }

  build() {
    Column() {
      Button('弹出全屏模态组件')
        .bindContentCover(this.isPresent, this.MyBuilder(), {
          modalTransition: ModalTransition.DEFAULT,
          onDisappear: () => {
            if (this.isPresent) {
              this.isPresent = !this.isPresent;
            }
          }
        })
        .onClick(() => {
          // 第三步：通过模态接口调起模态展示界面，通过转场动画或者共享元素动画去实现对应的动画效果
          // 改变状态变量，显示模态界面
          this.isPresent = !this.isPresent;
        })
    }
  }
}

import { curves } from '@kit.ArkUI';

@Entry

@Component

struct BindContentCoverDemo {

// 第一步：定义全屏模态转场效果bindContentCover

// 模态转场控制变量

@State isPresent: boolean = false;

// 第二步：定义模态展示界面

// 通过@Builder构建模态展示界面

@Builder

MyBuilder() {

Column() {

Button('关闭')

.onClick(() => {

this.isPresent = !this.isPresent;

})

}

.size({ width: '100%', height: '100%' })

.justifyContent(FlexAlign.Center)

.backgroundColor(0xf5f5f5)

// 通过转场动画实现出现消失转场动画效果

.transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))

}

build() {

Column() {

Button('弹出全屏模态组件')

.bindContentCover(this.isPresent, this.MyBuilder(), {

modalTransition: ModalTransition.DEFAULT,

onDisappear: () => {

if (this.isPresent) {

this.isPresent = !this.isPresent;

}

})

.onClick(() => {

// 第三步：通过模态接口调起模态展示界面，通过转场动画或者共享元素动画去实现对应的动画效果

// 改变状态变量，显示模态界面

this.isPresent = !this.isPresent;

})

}

使用bindSheet构建半模态转场效果

@Entry
@Component
struct BindSheetDemo {
  // 半模态转场显示隐藏控制
  @State isShowSheet: boolean = false;

  // 通过@Builder构建半模态展示界面
  @Builder
  mySheet() {
    Column() {
      Text('内容')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.White)
  }

  build() {
    Column() {
      Button('使用bindSheet构建半模态转场效果')// 通过选定的半模态接口，绑定模态展示界面，style中包含两个参数，一个是设置半模态的高度，不设置时默认高度是Large，一个是是否显示控制条DragBar，默认是true显示控制条，通过onDisappear控制状态变量变换。
        .bindSheet(this.isShowSheet, this.mySheet(), {
          height: 300,
          dragBar: false,
          onDisappear: () => {
            this.isShowSheet = !this.isShowSheet;
          }
        })
        .onClick(() => {
          this.isShowSheet = !this.isShowSheet;
        })
    }
    .width('100%')
  }
}

@Entry

@Component

struct BindSheetDemo {

// 半模态转场显示隐藏控制

@State isShowSheet: boolean = false;

// 通过@Builder构建半模态展示界面

@Builder

mySheet() {

Column() {

Text('内容')

}

.width('100%')

.height('100%')

.backgroundColor(Color.White)

}

build() {

Column() {

Button('使用bindSheet构建半模态转场效果')// 通过选定的半模态接口，绑定模态展示界面，style中包含两个参数，一个是设置半模态的高度，不设置时默认高度是Large，一个是是否显示控制条DragBar，默认是true显示控制条，通过onDisappear控制状态变量变换。

.bindSheet(this.isShowSheet, this.mySheet(), {

height: 300,

dragBar: false,

onDisappear: () => {

this.isShowSheet = !this.isShowSheet;

}

})

.onClick(() => {

this.isShowSheet = !this.isShowSheet;

})

}

.width('100%')

}

使用bindMenu实现菜单弹出效果

class BMD {
  value: ResourceStr = ''
  action: () => void = () => {
  }
}

@Entry
@Component
struct BindMenuDemo {
  // 第一步: 定义一组数据用来表示菜单按钮项
  @State items: BMD[] = [
    {
      value: '菜单项1',
      action: () => {
        console.info('handle Menu1 select')
      }
    },
    {
      value: '菜单项2',
      action: () => {
        console.info('handle Menu2 select')
      }
    },
  ]

  build() {
    Column() {
      Button('click')
        .backgroundColor(0x409eff)
        .borderRadius(5)// 第二步: 通过bindMenu接口将菜单数据绑定给元素
        .bindMenu(this.items)
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(437)
  }
}

class BMD {

value: ResourceStr = ''

action: () => void = () => {

}

@Entry

@Component

struct BindMenuDemo {

// 第一步: 定义一组数据用来表示菜单按钮项

@State items: BMD[] = [

{

value: '菜单项1',

action: () => {

console.info('handle Menu1 select')

}

{

value: '菜单项2',

action: () => {

console.info('handle Menu2 select')

}

]

build() {

Column() {

Button('click')

.backgroundColor(0x409eff)

.borderRadius(5)// 第二步: 通过bindMenu接口将菜单数据绑定给元素

.bindMenu(this.items)

}

.justifyContent(FlexAlign.Center)

.width('100%')

.height(437)

}

使用bindContextMenu实现菜单弹出效果

@Entry
@Component
struct BindContextMenuDemo {
  // 通过@Builder构建自定义菜单项
  @Builder
  myMenu() {
    Column() {
      Text('Menu1')
        .height(40)
      Text('Menu2')
        .height(40)
    }
    .width(140)
    .backgroundColor(0xf1f1f1)
  }

  build() {
    Column() {
      Button('长按或右键点击')
        .bindContextMenu(this.myMenu, ResponseType.LongPress)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
  }
}

@Entry

@Component

struct BindContextMenuDemo {

// 通过@Builder构建自定义菜单项

@Builder

myMenu() {

Column() {

Text('Menu1')

.height(40)

Text('Menu2')

.height(40)

}

.width(140)

.backgroundColor(0xf1f1f1)

}

build() {

Column() {

Button('长按或右键点击')

.bindContextMenu(this.myMenu, ResponseType.LongPress)

}

.width('100%')

.alignItems(HorizontalAlign.Center)

}

使用bindPopUp实现气泡弹窗效果

@Entry
@Component
struct BindPopupDemo {
  // 第一步：定义变量控制弹窗显示
  @State customPopup: boolean = false;

  // 第二步：popup构造器定义弹框内容
  @Builder
  popupBuilder() {
    Column({ space: 2 }) {
      Row().width(64)
        .height(64)
        .backgroundColor(0x409eff)
      Text('Popup')
        .fontSize(10)
        .fontColor(Color.White)
    }
    .justifyContent(FlexAlign.SpaceAround)
    .width(100)
    .height(100)
    .padding(5)
  }

  build() {
    Column() {

      Button('click')// 第四步：创建点击事件，控制弹窗显隐
        .onClick(() => {
          this.customPopup = !this.customPopup;
        })
        .backgroundColor(0xf56c6c)// 第三步：使用bindPopup接口将弹窗内容绑定给元素
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          placement: Placement.Top,
          maskColor: 0x33000000,
          popupColor: 0xf56c6c,
          enableArrow: true,
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false;
            }
          }
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(437)
  }
}

@Entry

@Component

struct BindPopupDemo {

// 第一步：定义变量控制弹窗显示

@State customPopup: boolean = false;

// 第二步：popup构造器定义弹框内容

@Builder

popupBuilder() {

Column({ space: 2 }) {

Row().width(64)

.height(64)

.backgroundColor(0x409eff)

Text('Popup')

.fontSize(10)

.fontColor(Color.White)

}

.justifyContent(FlexAlign.SpaceAround)

.width(100)

.height(100)

.padding(5)

}

build() {

Column() {

Button('click')// 第四步：创建点击事件，控制弹窗显隐

.onClick(() => {

this.customPopup = !this.customPopup;

})

.backgroundColor(0xf56c6c)// 第三步：使用bindPopup接口将弹窗内容绑定给元素

.bindPopup(this.customPopup, {

builder: this.popupBuilder,

placement: Placement.Top,

maskColor: 0x33000000,

popupColor: 0xf56c6c,

enableArrow: true,

onStateChange: (e) => {

if (!e.isVisible) {

this.customPopup = false;

}

})

}

.justifyContent(FlexAlign.Center)

.width('100%')

.height(437)

}

使用if实现模态转场

@Entry
@Component
struct ModalTransitionWithIf {
  // 第一步：定义状态变量控制页面显示
  @State isShowShare: boolean = false;

  private shareFunc(): void {
    this.getUIContext()?.animateTo({ duration: 500 }, () => {
      this.isShowShare = !this.isShowShare;
    })
  }

  build() {
    // 第二步：定义Stack布局显示当前页面和模态页面
    Stack() {
      Column() {
        Button('click').onClick(() => {
          this.shareFunc();
        })
      }
      .width('100%')
      .height('100%')

      // 第三步：在if中定义模态页面，显示在最上层，通过if控制模态页面出现消失
      if (this.isShowShare) {
        Column() {
          Button('Close')
            .onClick(() => {
              this.shareFunc();
            })
        }
        .width('100%')
        .height('100%')
        .backgroundColor(0xffffff)
        // 第四步：定义模态页面出现消失转场方式
        .transition(TransitionEffect.OPACITY
          .combine(TransitionEffect.translate({ x: '100%' }))
          .combine(TransitionEffect.scale({ x: 0.95, y: 0.95 })))
      }
    }
  }
}

@Entry

@Component

struct ModalTransitionWithIf {

// 第一步：定义状态变量控制页面显示

@State isShowShare: boolean = false;

private shareFunc(): void {

this.getUIContext()?.animateTo({ duration: 500 }, () => {

this.isShowShare = !this.isShowShare;

})

}

build() {

// 第二步：定义Stack布局显示当前页面和模态页面

Stack() {

Column() {

Button('click').onClick(() => {

this.shareFunc();

})

}

.width('100%')

.height('100%')

// 第三步：在if中定义模态页面，显示在最上层，通过if控制模态页面出现消失

if (this.isShowShare) {

Column() {

Button('Close')

.onClick(() => {

this.shareFunc();

})

}

.width('100%')

.height('100%')

.backgroundColor(0xffffff)

// 第四步：定义模态页面出现消失转场方式

.transition(TransitionEffect.OPACITY

.combine(TransitionEffect.translate({ x: '100%' }))

.combine(TransitionEffect.scale({ x: 0.95, y: 0.95 })))

}

共享元素转场

不新建容器并直接变化原容器

class PostData {
  avatar: Resource = $r('app.media.app_icon');
  name: string = '';
  message: string = '';
  images: Resource[] = [];
}

@Entry
@Component
struct Index {
  @State isExpand: boolean = false;
  @State @Watch('onItemClicked') selectedIndex: number = -1;
  private allPostData: PostData[] = [
    {
      avatar: $r('app.media.app_icon'),
      name: 'Alice',
      message: '天气晴朗',
      images: [$r('app.media.app_icon'), $r('app.media.app_icon')]
    },
    {
      avatar: $r('app.media.app_icon'),
      name: 'Bob',
      message: '你好世界',
      images: [$r('app.media.app_icon')]
    },
    {
      avatar: $r('app.media.app_icon'),
      name: 'Carl',
      message: '万物生长',
      images: [$r('app.media.app_icon'), $r('app.media.app_icon'), $r('app.media.app_icon')]
    }];

  private onItemClicked(): void {
    if (this.selectedIndex < 0) {
      return;
    }
    this.getUIContext()?.animateTo({
      duration: 350,
      curve: Curve.Friction
    }, () => {
      this.isExpand = !this.isExpand;
    });
  }

  build() {
    Column({ space: 20 }) {
      ForEach(this.allPostData, (postData: PostData, index: number) => {
        // 当点击了某个post后，会使其余的post消失下树
        if (!this.isExpand || this.selectedIndex === index) {
          Column() {
            Post({ data: postData, selecteIndex: this.selectedIndex, index: index })
          }
          .width('100%')
          // 对出现消失的post添加透明度转场和位移转场效果
          .transition(TransitionEffect.OPACITY
            .combine(TransitionEffect.translate({ y: index < this.selectedIndex ? -250 : 250 }))
            .animation({ duration: 350, curve: Curve.Friction }))
        }
      }, (postData: PostData, index: number) => index.toString())
    }
    .size({ width: '100%', height: '100%' })
    .backgroundColor('#40808080')
  }
}

@Component
export default struct Post {
  @Link selecteIndex: number;
  @Prop data: PostData;
  @Prop index: number;
  @State itemHeight: number = 250;
  @State isExpand: boolean = false;
  @State expandImageSize: number = 100;
  @State avatarSize: number = 50;

  build() {
    Column({ space: 20 }) {
      Row({ space: 10 }) {
        Image(this.data.avatar)
          .size({ width: this.avatarSize, height: this.avatarSize })
          .borderRadius(this.avatarSize / 2)
          .clip(true)

        Text(this.data.name)
      }
      .justifyContent(FlexAlign.Start)

      Text(this.data.message)

      Row({ space: 15 }) {
        ForEach(this.data.images, (imageResource: Resource, index: number) => {
          Image(imageResource)
            .size({ width: this.expandImageSize, height: this.expandImageSize })
        }, (imageResource: Resource, index: number) => index.toString())
      }

      if (this.isExpand) {
        Column() {
          Text('评论区')// 对评论区文本添加出现消失转场效果
            .transition(TransitionEffect.OPACITY
              .animation({ duration: 350, curve: Curve.Friction }))
            .padding({ top: 10 })
        }
        .transition(TransitionEffect.asymmetric(
          TransitionEffect.opacity(0.99)
            .animation({ duration: 350, curve: Curve.Friction }),
          TransitionEffect.OPACITY.animation({ duration: 0 })
        ))
        .size({ width: '100%' })
      }
    }
    .backgroundColor(Color.White)
    .size({ width: '100%', height: this.itemHeight })
    .alignItems(HorizontalAlign.Start)
    .padding({ left: 10, top: 10 })
    .onClick(() => {
      this.selecteIndex = -1;
      this.selecteIndex = this.index;
      this.getUIContext()?.animateTo({
        duration: 350,
        curve: Curve.Friction
      }, () => {
        // 对展开的post做宽高动画，并对头像尺寸和图片尺寸加动画
        this.isExpand = !this.isExpand;
        this.itemHeight = this.isExpand ? 780 : 250;
        this.avatarSize = this.isExpand ? 75 : 50;
        this.expandImageSize = (this.isExpand && this.data.images.length > 0)
          ? (360 - (this.data.images.length + 1) * 15) / this.data.images.length : 100;
      })
    })
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

class PostData {

avatar: Resource = $r('app.media.app_icon');

message: string = '';

images: Resource[] = [];

}

@Entry

@Component

struct Index {

@State isExpand: boolean = false;

@State @Watch('onItemClicked') selectedIndex: number = -1;

private allPostData: PostData[] = [

{

avatar: $r('app.media.app_icon'),

message: '天气晴朗',

images: [$r('app.media.app_icon'), $r('app.media.app_icon')]

{

avatar: $r('app.media.app_icon'),

message: '你好世界',

images: [$r('app.media.app_icon')]

{

avatar: $r('app.media.app_icon'),

message: '万物生长',

images: [$r('app.media.app_icon'), $r('app.media.app_icon'), $r('app.media.app_icon')]

}];

private onItemClicked(): void {

if (this.selectedIndex < 0) {

return;

}

this.getUIContext()?.animateTo({

duration: 350,

curve: Curve.Friction

}, () => {

this.isExpand = !this.isExpand;

});

}

build() {

Column({ space: 20 }) {

ForEach(this.allPostData, (postData: PostData, index: number) => {

// 当点击了某个post后，会使其余的post消失下树

if (!this.isExpand || this.selectedIndex === index) {

Column() {

Post({ data: postData, selecteIndex: this.selectedIndex, index: index })

}

.width('100%')

// 对出现消失的post添加透明度转场和位移转场效果

.transition(TransitionEffect.OPACITY

.combine(TransitionEffect.translate({ y: index < this.selectedIndex ? -250 : 250 }))

.animation({ duration: 350, curve: Curve.Friction }))

}

}, (postData: PostData, index: number) => index.toString())

}

.size({ width: '100%', height: '100%' })

.backgroundColor('#40808080')

}

@Component

export default struct Post {

@Link selecteIndex: number;

@Prop data: PostData;

@Prop index: number;

@State itemHeight: number = 250;

@State isExpand: boolean = false;

@State expandImageSize: number = 100;

@State avatarSize: number = 50;

build() {

Column({ space: 20 }) {

Row({ space: 10 }) {

Image(this.data.avatar)

.size({ width: this.avatarSize, height: this.avatarSize })

.borderRadius(this.avatarSize / 2)

.clip(true)

Text(this.data.name)

}

.justifyContent(FlexAlign.Start)

Text(this.data.message)

Row({ space: 15 }) {

ForEach(this.data.images, (imageResource: Resource, index: number) => {

Image(imageResource)

.size({ width: this.expandImageSize, height: this.expandImageSize })

}, (imageResource: Resource, index: number) => index.toString())

}

if (this.isExpand) {

Column() {

Text('评论区')// 对评论区文本添加出现消失转场效果

.transition(TransitionEffect.OPACITY

.animation({ duration: 350, curve: Curve.Friction }))

.padding({ top: 10 })

}

.transition(TransitionEffect.asymmetric(

TransitionEffect.opacity(0.99)

.animation({ duration: 350, curve: Curve.Friction }),

TransitionEffect.OPACITY.animation({ duration: 0 })

))

.size({ width: '100%' })

}

.backgroundColor(Color.White)

.size({ width: '100%', height: this.itemHeight })

.alignItems(HorizontalAlign.Start)

.padding({ left: 10, top: 10 })

.onClick(() => {

this.selecteIndex = -1;

this.selecteIndex = this.index;

this.getUIContext()?.animateTo({

duration: 350,

curve: Curve.Friction

}, () => {

// 对展开的post做宽高动画，并对头像尺寸和图片尺寸加动画

this.isExpand = !this.isExpand;

this.itemHeight = this.isExpand ? 780 : 250;

this.avatarSize = this.isExpand ? 75 : 50;

this.expandImageSize = (this.isExpand && this.data.images.length > 0)

? (360 - (this.data.images.length + 1) * 15) / this.data.images.length : 100;

})

}

HarmonyOS装饰器：@Watch、@Observed、@ObjectLink

继续阅读 →

HarmonyOS：ForEach

接口描述

ForEach(
  arr: Array,
  itemGenerator: (item: any, index: number) => void,
  keyGenerator?: (item: any, index: number) => string
)

ForEach(

arr: Array,

itemGenerator: (item: any, index: number) => void,

keyGenerator?: (item: any, index: number) => string

)

示例

首次渲染

@Entry
@Component
struct Parent {
  @State simpleList: Array<string> = ['one', 'two', 'three'];

  build() {
    Row() {
      Column() {
        ForEach(this.simpleList, (item: string) => {
          ChildItem({ item: item })
        }, (item: string) => item)
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

@Component
struct ChildItem {
  @Prop item: string;

  build() {
    Text(this.item)
      .fontSize(50)
  }
}

@Entry

@Component

struct Parent {

@State simpleList: Array<string> = ['one', 'two', 'three'];

build() {

Row() {

Column() {

ForEach(this.simpleList, (item: string) => {

ChildItem({ item: item })

}, (item: string) => item)

}

.width('100%')

.height('100%')

}

.height('100%')

.backgroundColor(0xF1F3F5)

}

@Component

struct ChildItem {

@Prop item: string;

build() {

Text(this.item)

.fontSize(50)

}

数据源存在相同值

@Entry
@Component
struct Parent {
  @State simpleList: Array<string> = ['one', 'two', 'two', 'three'];

  build() {
    Row() {
      Column() {
        ForEach(this.simpleList, (item: string) => {
          ChildItem({ item: item })
        }, (item: string) => item)
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

@Component
struct ChildItem {
  @Prop item: string;

  build() {
    Text(this.item)
      .fontSize(50)
  }
}

@Entry

@Component

struct Parent {

@State simpleList: Array<string> = ['one', 'two', 'two', 'three'];

build() {

Row() {

Column() {

ForEach(this.simpleList, (item: string) => {

ChildItem({ item: item })

}, (item: string) => item)

}

.width('100%')

.height('100%')

}

.height('100%')

.backgroundColor(0xF1F3F5)

}

@Component

struct ChildItem {

@Prop item: string;

build() {

Text(this.item)

.fontSize(50)

}

非首次渲染

@Entry
@Component
struct Parent {
  @State simpleList: Array<string> = ['one', 'two', 'three'];

  build() {
    Row() {
      Column() {
        Text('点击修改第3个数组项的值')
          .fontSize(24)
          .fontColor(Color.Red)
          .onClick(() => {
            this.simpleList[2] = 'new three';
          })

        ForEach(this.simpleList, (item: string) => {
          ChildItem({ item: item })
            .margin({ top: 20 })
        }, (item: string) => item)
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

@Component
struct ChildItem {
  @Prop item: string;

  build() {
    Text(this.item)
      .fontSize(30)
  }
}

@Entry

@Component

struct Parent {

@State simpleList: Array<string> = ['one', 'two', 'three'];

build() {

Row() {

Column() {

Text('点击修改第3个数组项的值')

.fontSize(24)

.fontColor(Color.Red)

.onClick(() => {

this.simpleList[2] = 'new three';

})

ForEach(this.simpleList, (item: string) => {

ChildItem({ item: item })

.margin({ top: 20 })

}, (item: string) => item)

}

.justifyContent(FlexAlign.Center)

.width('100%')

.height('100%')

}

.height('100%')

.backgroundColor(0xF1F3F5)

}

@Component

struct ChildItem {

@Prop item: string;

build() {

Text(this.item)

.fontSize(30)

}

骨架屏

@Entry
@Component
struct ArticleList {
  @State simpleList: Array<number> = [1, 2, 3, 4, 5];

  build() {
    Column() {
      ForEach(this.simpleList, (item: number) => {
        ArticleSkeletonView()
          .margin({ top: 20 })
      }, (item: number) => item.toString())
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}

@Builder
function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {
  Row()
    .width(width)
    .height(height)
    .backgroundColor('#FFF2F3F4')
}

@Component
struct ArticleSkeletonView {
  build() {
    Row() {
      Column() {
        textArea(80, 80)
      }
      .margin({ right: 20 })

      Column() {
        textArea('60%', 20)
        textArea('50%', 20)
      }
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.SpaceAround)
      .height('100%')
    }
    .padding(20)
    .borderRadius(12)
    .backgroundColor('#FFECECEC')
    .height(120)
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

@Entry

@Component

struct ArticleList {

@State simpleList: Array<number> = [1, 2, 3, 4, 5];

build() {

Column() {

ForEach(this.simpleList, (item: number) => {

ArticleSkeletonView()

.margin({ top: 20 })

}, (item: number) => item.toString())

}

.padding(20)

.width('100%')

.height('100%')

}

@Builder

function textArea(width: number | Resource | string = '100%', height: number | Resource | string = '100%') {

Row()

.width(width)

.height(height)

.backgroundColor('#FFF2F3F4')

}

@Component

struct ArticleSkeletonView {

build() {

Row() {

Column() {

textArea(80, 80)

}

.margin({ right: 20 })

Column() {

textArea('60%', 20)

textArea('50%', 20)

}

.alignItems(HorizontalAlign.Start)

.justifyContent(FlexAlign.SpaceAround)

.height('100%')

}

.padding(20)

.borderRadius(12)

.backgroundColor('#FFECECEC')

.height(120)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

}

数据源数组项变化

class Article {
  id: string;
  title: string;
  brief: string;

  constructor(id: string, title: string, brief: string) {
    this.id = id;
    this.title = title;
    this.brief = brief;
  }
}

@Entry
@Component
struct ArticleListView {
  @State isListReachEnd: boolean = false;
  @State articleList: Array<Article> = [
    new Article('001', '第1篇文章', '文章简介内容'),
    new Article('002', '第2篇文章', '文章简介内容'),
    new Article('003', '第3篇文章', '文章简介内容'),
    new Article('004', '第4篇文章', '文章简介内容'),
    new Article('005', '第5篇文章', '文章简介内容'),
    new Article('006', '第6篇文章', '文章简介内容')
  ]

  loadMoreArticles() {
    this.articleList.push(new Article('007', '加载的新文章', '文章简介内容'));
  }

  build() {
    Column({ space: 5 }) {
      List() {
        ForEach(this.articleList, (item: Article) => {
          ListItem() {
            ArticleCard({ article: item })
              .margin({ top: 20 })
          }
        }, (item: Article) => item.id)
      }
      .onReachEnd(() => {
        this.isListReachEnd = true;
      })
      .parallelGesture(
        PanGesture({ direction: PanDirection.Up, distance: 80 })
          .onActionStart(() => {
            if (this.isListReachEnd) {
              this.loadMoreArticles();
              this.isListReachEnd = false;
            }
          })
      )
      .padding(20)
      .scrollBar(BarState.Off)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

@Component
struct ArticleCard {
  @Prop article: Article;

  build() {
    Row() {
      Image($r('app.media.icon'))
        .width(80)
        .height(80)
        .margin({ right: 20 })

      Column() {
        Text(this.article.title)
          .fontSize(20)
          .margin({ bottom: 8 })
        Text(this.article.brief)
          .fontSize(16)
          .fontColor(Color.Gray)
          .margin({ bottom: 8 })
      }
      .alignItems(HorizontalAlign.Start)
      .width('80%')
      .height('100%')
    }
    .padding(20)
    .borderRadius(12)
    .backgroundColor('#FFECECEC')
    .height(120)
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

class Article {

id: string;

title: string;

brief: string;

constructor(id: string, title: string, brief: string) {

this.id = id;

this.title = title;

this.brief = brief;

}

@Entry

@Component

struct ArticleListView {

@State isListReachEnd: boolean = false;

@State articleList: Array<Article> = [

new Article('001', '第1篇文章', '文章简介内容'),

new Article('002', '第2篇文章', '文章简介内容'),

new Article('003', '第3篇文章', '文章简介内容'),

new Article('004', '第4篇文章', '文章简介内容'),

new Article('005', '第5篇文章', '文章简介内容'),

new Article('006', '第6篇文章', '文章简介内容')

]

loadMoreArticles() {

this.articleList.push(new Article('007', '加载的新文章', '文章简介内容'));

}

build() {

Column({ space: 5 }) {

List() {

ForEach(this.articleList, (item: Article) => {

ListItem() {

ArticleCard({ article: item })

.margin({ top: 20 })

}

}, (item: Article) => item.id)

}

.onReachEnd(() => {

this.isListReachEnd = true;

})

.parallelGesture(

PanGesture({ direction: PanDirection.Up, distance: 80 })

.onActionStart(() => {

if (this.isListReachEnd) {

this.loadMoreArticles();

this.isListReachEnd = false;

}

})

)

.padding(20)

.scrollBar(BarState.Off)

}

.width('100%')

.height('100%')

.backgroundColor(0xF1F3F5)

}

@Component

struct ArticleCard {

@Prop article: Article;

build() {

Row() {

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

.width(80)

.height(80)

.margin({ right: 20 })

Column() {

Text(this.article.title)

.fontSize(20)

.margin({ bottom: 8 })

Text(this.article.brief)

.fontSize(16)

.fontColor(Color.Gray)

.margin({ bottom: 8 })

}

.alignItems(HorizontalAlign.Start)

.width('80%')

.height('100%')

}

.padding(20)

.borderRadius(12)

.backgroundColor('#FFECECEC')

.height(120)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

}

数据源数组项子属性变化

@Observed
class Article {
  id: string;
  title: string;
  brief: string;
  isLiked: boolean;
  likesCount: number;

  constructor(id: string, title: string, brief: string, isLiked: boolean, likesCount: number) {
    this.id = id;
    this.title = title;
    this.brief = brief;
    this.isLiked = isLiked;
    this.likesCount = likesCount;
  }
}

@Entry
@Component
struct ArticleListView {
  @State articleList: Array<Article> = [
    new Article('001', '第0篇文章', '文章简介内容', false, 100),
    new Article('002', '第1篇文章', '文章简介内容', false, 100),
    new Article('003', '第2篇文章', '文章简介内容', false, 100),
    new Article('004', '第4篇文章', '文章简介内容', false, 100),
    new Article('005', '第5篇文章', '文章简介内容', false, 100),
    new Article('006', '第6篇文章', '文章简介内容', false, 100),
  ];

  build() {
    List() {
      ForEach(this.articleList, (item: Article) => {
        ListItem() {
          ArticleCard({
            article: item
          })
            .margin({ top: 20 })
        }
      }, (item: Article) => item.id)
    }
    .padding(20)
    .scrollBar(BarState.Off)
    .backgroundColor(0xF1F3F5)
  }
}

@Component
struct ArticleCard {
  @ObjectLink article: Article;

  handleLiked() {
    this.article.isLiked = !this.article.isLiked;
    this.article.likesCount = this.article.isLiked ? this.article.likesCount + 1 : this.article.likesCount - 1;
  }

  build() {
    Row() {
      Image($r('app.media.icon'))
        .width(80)
        .height(80)
        .margin({ right: 20 })

      Column() {
        Text(this.article.title)
          .fontSize(20)
          .margin({ bottom: 8 })
        Text(this.article.brief)
          .fontSize(16)
          .fontColor(Color.Gray)
          .margin({ bottom: 8 })

        Row() {
          Image(this.article.isLiked ? $r('app.media.iconLiked') : $r('app.media.iconUnLiked'))
            .width(24)
            .height(24)
            .margin({ right: 8 })
          Text(this.article.likesCount.toString())
            .fontSize(16)
        }
        .onClick(() => this.handleLiked())
        .justifyContent(FlexAlign.Center)
      }
      .alignItems(HorizontalAlign.Start)
      .width('80%')
      .height('100%')
    }
    .padding(20)
    .borderRadius(12)
    .backgroundColor('#FFECECEC')
    .height(120)
    .width('100%')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

@Observed

class Article {

id: string;

title: string;

brief: string;

isLiked: boolean;

likesCount: number;

constructor(id: string, title: string, brief: string, isLiked: boolean, likesCount: number) {

this.id = id;

this.title = title;

this.brief = brief;

this.isLiked = isLiked;

this.likesCount = likesCount;

}

@Entry

@Component

struct ArticleListView {

@State articleList: Array<Article> = [

new Article('001', '第0篇文章', '文章简介内容', false, 100),

new Article('002', '第1篇文章', '文章简介内容', false, 100),

new Article('003', '第2篇文章', '文章简介内容', false, 100),

new Article('004', '第4篇文章', '文章简介内容', false, 100),

new Article('005', '第5篇文章', '文章简介内容', false, 100),

new Article('006', '第6篇文章', '文章简介内容', false, 100),

];

build() {

List() {

ForEach(this.articleList, (item: Article) => {

ListItem() {

ArticleCard({

article: item

})

.margin({ top: 20 })

}

}, (item: Article) => item.id)

}

.padding(20)

.scrollBar(BarState.Off)

.backgroundColor(0xF1F3F5)

}

@Component

struct ArticleCard {

@ObjectLink article: Article;

handleLiked() {

this.article.isLiked = !this.article.isLiked;

this.article.likesCount = this.article.isLiked ? this.article.likesCount + 1 : this.article.likesCount - 1;

}

build() {

Row() {

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

.width(80)

.height(80)

.margin({ right: 20 })

Column() {

Text(this.article.title)

.fontSize(20)

.margin({ bottom: 8 })

Text(this.article.brief)

.fontSize(16)

.fontColor(Color.Gray)

.margin({ bottom: 8 })

Row() {

Image(this.article.isLiked ? $r('app.media.iconLiked') : $r('app.media.iconUnLiked'))

.width(24)

.height(24)

.margin({ right: 8 })

Text(this.article.likesCount.toString())

.fontSize(16)

}

.onClick(() => this.handleLiked())

.justifyContent(FlexAlign.Center)

}

.alignItems(HorizontalAlign.Start)

.width('80%')

.height('100%')

}

.padding(20)

.borderRadius(12)

.backgroundColor('#FFECECEC')

.height(120)

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

}

拖拽排序

@Entry
@Component
struct ForEachSort {
  @State arr: Array<string> = [];

  build() {
    Row() {
      List() {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text(item.toString())
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .size({height: 100, width: "100%"})
          }.margin(10)
          .borderRadius(10)
          .backgroundColor("#FFFFFFFF")
        }, (item: string) => item)
          .onMove((from:number, to:number) => {
            let tmp = this.arr.splice(from, 1);
            this.arr.splice(to, 0, tmp[0])
          })
      }
      .width('100%')
      .height('100%')
      .backgroundColor("#FFDCDCDC")
    }
  }
  aboutToAppear(): void {
    for (let i = 0; i < 100; i++) {
      this.arr.push(i.toString())
    }
  }
}

@Entry

@Component

struct ForEachSort {

@State arr: Array<string> = [];

build() {

Row() {

List() {

ForEach(this.arr, (item: string) => {

ListItem() {

Text(item.toString())

.fontSize(16)

.textAlign(TextAlign.Center)

.size({height: 100, width: "100%"})

}.margin(10)

.borderRadius(10)

.backgroundColor("#FFFFFFFF")

}, (item: string) => item)

.onMove((from:number, to:number) => {

let tmp = this.arr.splice(from, 1);

this.arr.splice(to, 0, tmp[0])

})

}

.width('100%')

.height('100%')

.backgroundColor("#FFDCDCDC")

}

aboutToAppear(): void {

for (let i = 0; i < 100; i++) {

this.arr.push(i.toString())

}

文档地址

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-rendering-control-foreach-0000001524537153-V2

https://developer.huawei.com /consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-foreach-V5

HarmonyOS中级第一课01：HAR

继续阅读 →

HarmonyOS中级第一课01：HSP

继续阅读 →

HarmonyOS中级第一课01：UIAbility组件间的交互

继续阅读 →

HarmonyOS获取bundleName

继续阅读 →

HarmonyOS中级第一课01：AbilityStage组件容器介绍

继续阅读 →

HarmonyOS第一课08：案例-应用首次启动

继续阅读 →

HarmonyOS使用动态属性设置实现跨文件样式设置

继续阅读 →

HarmonyOS第一课08：案例-应用内字体大小调节

继续阅读 →

HarmonyOS第一课08：用户首选项介绍

继续阅读 →

HarmonyOS第一课08：案例-首选项

继续阅读 →

HarmonyOS第一课07：案例-新闻发布

效果演示

代码结构

├──entry/src/main/ets                // 代码区
│  ├──common
│  │  ├──constansts
│  │  │  └──Constants.ets            // 常量类
│  │  └──utils
│  │     ├──FileUtil.ets             // 文件工具类
│  │     ├──HttpUtil.ets             // 网络请求
│  │     ├──Logger.ets               // Logger公共类
│  │     └──ToastUtil.ets            // Toast弹窗
│  ├──entryability
│  │  └──EntryAbility.ets            // 程序入口类
│  ├──pages
│  │  ├──MainPage.ets                // 新闻列表主页面
│  │  └──NewsEditPage.ets            // 新闻发布页面
│  ├──view
│  │  ├──FailureLayout.ets           // 请求失败布局
│  │  ├──LoadingLayout.ets           // 加载中布局
│  │  ├──LoadMoreLayout.ets          // 加载更多布局
│  │  ├──NewsItem.ets                // 新闻Item
│  │  ├──NewsList.ets                // 新闻列表
│  │  ├──NoMoreLayout.ets            // 没有更多数据布局
│  │  ├──RefreshLayout.ets           // 下拉刷新布局
│  │  └──UploadingLayout.ets         // 上传中布局
│  └──viewmodel
│     ├──GlobalContext.ets           // 全局变量管理
│     ├──NewsData.ets                // 新闻数据
│     ├──NewsTypeModel.ets           // 新闻类型
│     ├──NewsTypeViewModel.ets       // 新闻类型ViewModel
│     ├──NewsViewModel.ets           // 新闻列表ViewModel
│     ├──RefreshListViewModel.ets    // 刷新列表ViewModel
│     ├──RefreshLoadingClass.ets     // 刷新布局模型
│     └──ResponseResult.ets          // 网络请求数据模型
├──entry/src/main/resources          // 资源文件
└──HttpServerOfNews                  // 服务端代码

├──entry/src/main/ets // 代码区

│ ├──common

│ │ ├──constansts

│ │ │ └──Constants.ets // 常量类

│ │ └──utils

│ │ ├──FileUtil.ets // 文件工具类

│ │ ├──HttpUtil.ets // 网络请求

│ │ ├──Logger.ets // Logger公共类

│ │ └──ToastUtil.ets // Toast弹窗

│ ├──entryability

│ │ └──EntryAbility.ets // 程序入口类

│ ├──pages

│ │ ├──MainPage.ets // 新闻列表主页面

│ │ └──NewsEditPage.ets // 新闻发布页面

│ ├──view

│ │ ├──FailureLayout.ets // 请求失败布局

│ │ ├──LoadingLayout.ets // 加载中布局

│ │ ├──LoadMoreLayout.ets // 加载更多布局

│ │ ├──NewsItem.ets // 新闻Item

│ │ ├──NewsList.ets // 新闻列表

│ │ ├──NoMoreLayout.ets // 没有更多数据布局

│ │ ├──RefreshLayout.ets // 下拉刷新布局

│ │ └──UploadingLayout.ets // 上传中布局

│ └──viewmodel

│ ├──GlobalContext.ets // 全局变量管理

│ ├──NewsData.ets // 新闻数据

│ ├──NewsTypeModel.ets // 新闻类型

│ ├──NewsTypeViewModel.ets // 新闻类型ViewModel

│ ├──NewsViewModel.ets // 新闻列表ViewModel

│ ├──RefreshListViewModel.ets // 刷新列表ViewModel

│ ├──RefreshLoadingClass.ets // 刷新布局模型

│ └──ResponseResult.ets // 网络请求数据模型

├──entry/src/main/resources // 资源文件

└──HttpServerOfNews // 服务端代码

启动服务

$ cd HttpServerOfNews
$ npm install
$ npm start

$ cd HttpServerOfNews

$ npm install

$ npm start

代码

common

Constants.ets

export default class Constants {
  /**
   * The host address of the server.
   */
  static readonly SERVER: string = 'http://192.168.10.37:9588';
  /**
   * Get the news type.
   */
  static readonly GET_NEWS_TYPE: string = 'news/getNewsType';
  /**
   * Get the news list.
   */
  static readonly GET_NEWS_LIST: string = 'news/getNewsList';
  /**
   * Get the news list.
   */
  static readonly UPLOAD_NEWS: string = 'news/addNews';
  /**
   * Upload File
   */
  static readonly UPLOAD_FILE: string = '/files/upload';
  /**
   * UploadFile
   */
  static readonly IMAGE_PREFIX: string = '/images/';
  /**
   * url of NewsUploadPage
   */
  static readonly NEWS_EDIT_PAGE: string = 'pages/NewsEditPage'
  /**
   * The request success status code.
   */
  static readonly SERVER_CODE_SUCCESS: string = 'success';
  /**
   * The off set coefficient.
   */
  static readonly Y_OFF_SET_COEFFICIENT: number = 0.1;
  /**
   * The page size.
   */
  static readonly PAGE_SIZE: number = 10;
  /**
   * The refresh and load height.
   */
  static readonly CUSTOM_LAYOUT_HEIGHT: number = 70;
  /**
   * Gt tab data current page.
   */
  static readonly GET_TAB_DATA_CURRENT_PAGE: number = 1;
  /**
   * Http request success status code.
   */
  static readonly HTTP_CODE_200: number = 200;
  /**
   * The animation delay time.
   */
  static readonly DELAY_ANIMATION_DURATION: number = 300;
  /**
   * The delay time.
   */
  static readonly DELAY_TIME: number = 1000;
  /**
   * The animation duration.
   */
  static readonly ANIMATION_DURATION: number = 2000;
  /**
   * The http timeout duration.
   */
  static readonly HTTP_READ_TIMEOUT: number = 10000;
  /**
   * Content maxLine.
   */
  static readonly CONTENT_MAX_LINE: number = 3;
  /**
   * List space.
   */
  static readonly LIST_SPACE: number = 12;
  /**
   * Item img space.
   */
  static readonly ITEM_IMG_SPACE: number = 8;
  /**
   * Type font weight.
   */
  static readonly TYPE_FONT_WEIGHT: number = 700;
  /**
   * Title font weight.
   */
  static readonly TITLE_FONT_WEIGHT: number = 500;
  /**
   * Desc font weight.
   */
  static readonly DESC_FONT_WEIGHT: number = 400;
  /**
   * Type aspect ratio.
   */
  static readonly TYPE_ASPECT_RATIO: number = 2;
  /**
   * Desc opacity.
   */
  static readonly DESC_OPACITY: number = 0.6;
  /**
   * 100 percent.
   */
  static readonly FULL_PERCENT: string = '100%';
  /**
   * Divider width.
   */
  static readonly DIVIDER_WIDTH: string = '90%';
  /**
   * Release title.
   */
  static readonly RELEASE_TITLE: string = '新闻发布';
}

/**
 * The RefreshConstant constants.
 */
export const enum RefreshConstant {
  DELAY_PULL_DOWN_REFRESH = 50,
  CLOSE_PULL_DOWN_REFRESH_TIME = 150,
  DELAY_SHRINK_ANIMATION_TIME = 500
}

/**
 * The refresh state enum.
 */
export const enum RefreshState {
  DropDown = 0,
  Release = 1,
  Refreshing = 2,
  Success = 3,
  Fail = 4
}

/**
 * The newsList state enum.
 */
export const enum PageState {
  Loading = 0,
  Success = 1,
  Fail = 2
}

/**
 * The file upload state enum.
 */
export const enum UploadingState {
  COMPLETE = 'complete',
  FAIL = 'fail'
}

/**
 * The request method enum.
 */
export const enum RequestMethod {
  POST = 'POST',
  GET = 'GET'
}

/**
 * The request content type enum.
 */
export const enum ContentType {
  JSON = 'application/json',
  FORM = 'multipart/form-data'
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

export default class Constants {

/**

* The host address of the server.

static readonly SERVER: string = 'http://192.168.10.37:9588';

/**

* Get the news type.

static readonly GET_NEWS_TYPE: string = 'news/getNewsType';

/**

* Get the news list.

static readonly GET_NEWS_LIST: string = 'news/getNewsList';

/**

* Get the news list.

static readonly UPLOAD_NEWS: string = 'news/addNews';

/**

* Upload File

static readonly UPLOAD_FILE: string = '/files/upload';

/**

* UploadFile

static readonly IMAGE_PREFIX: string = '/images/';

/**

* url of NewsUploadPage

static readonly NEWS_EDIT_PAGE: string = 'pages/NewsEditPage'

/**

* The request success status code.

static readonly SERVER_CODE_SUCCESS: string = 'success';

/**

* The off set coefficient.

static readonly Y_OFF_SET_COEFFICIENT: number = 0.1;

/**

* The page size.

static readonly PAGE_SIZE: number = 10;

/**

* The refresh and load height.

static readonly CUSTOM_LAYOUT_HEIGHT: number = 70;

/**

* Gt tab data current page.

static readonly GET_TAB_DATA_CURRENT_PAGE: number = 1;

/**

* Http request success status code.

static readonly HTTP_CODE_200: number = 200;

/**

* The animation delay time.

static readonly DELAY_ANIMATION_DURATION: number = 300;

/**

* The delay time.

static readonly DELAY_TIME: number = 1000;

/**

* The animation duration.

static readonly ANIMATION_DURATION: number = 2000;

/**

* The http timeout duration.

static readonly HTTP_READ_TIMEOUT: number = 10000;

/**

* Content maxLine.

static readonly CONTENT_MAX_LINE: number = 3;

/**

* List space.

static readonly LIST_SPACE: number = 12;

/**

* Item img space.

static readonly ITEM_IMG_SPACE: number = 8;

/**

* Type font weight.

static readonly TYPE_FONT_WEIGHT: number = 700;

/**

* Title font weight.

static readonly TITLE_FONT_WEIGHT: number = 500;

/**

* Desc font weight.

static readonly DESC_FONT_WEIGHT: number = 400;

/**

* Type aspect ratio.

static readonly TYPE_ASPECT_RATIO: number = 2;

/**

* Desc opacity.

static readonly DESC_OPACITY: number = 0.6;

/**

* 100 percent.

static readonly FULL_PERCENT: string = '100%';

/**

* Divider width.

static readonly DIVIDER_WIDTH: string = '90%';

/**

* Release title.

static readonly RELEASE_TITLE: string = '新闻发布';

}

/**

* The RefreshConstant constants.

export const enum RefreshConstant {

DELAY_PULL_DOWN_REFRESH = 50,

CLOSE_PULL_DOWN_REFRESH_TIME = 150,

DELAY_SHRINK_ANIMATION_TIME = 500

}

/**

* The refresh state enum.

export const enum RefreshState {

DropDown = 0,

Release = 1,

Refreshing = 2,

Success = 3,

Fail = 4

}

/**

* The newsList state enum.

export const enum PageState {

Loading = 0,

Success = 1,

Fail = 2

}

/**

* The file upload state enum.

export const enum UploadingState {

COMPLETE = 'complete',

FAIL = 'fail'

}

/**

* The request method enum.

export const enum RequestMethod {

POST = 'POST',

GET = 'GET'

}

/**

* The request content type enum.

export const enum ContentType {

JSON = 'application/json',

FORM = 'multipart/form-data'

}

utils/FileUtil.ets

import { fileIo } from '@kit.CoreFileKit';
import { request } from '@kit.BasicServicesKit';
import { picker } from '@kit.CoreFileKit';
import Constants, { ContentType, RequestMethod, UploadingState } from '../constants/Constants';
import ResponseResult from '../../viewmodel/ResponseResult';
import Logger from './Logger';
import { showToast } from './ToastUtil';

/**
 * PhotoViewPicker
 *
 * @returns uri The uri for the selected file.
 */
export async function fileSelect(): Promise<string> {
  let photoSelectOptions = new picker.PhotoSelectOptions();
  photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
  photoSelectOptions.maxSelectNumber = 1;
  let photoPicker = new picker.PhotoViewPicker();
  try {
    let photoSelectResult = await photoPicker.select(photoSelectOptions);
    if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {
      let imgUri = photoSelectResult.photoUris[0];
      if (imgUri.indexOf('media/Photo')<0) {
        showToast($r('app.string.prompt_select_img'));
        return '';
      }
      return photoSelectResult.photoUris[0];
    } else {
      return '';
    }
  } catch (err) {
    Logger.error('SelectedImage failed', JSON.stringify(err));
    return '';
  }
}

/**
 * Upload file.
 *
 * @param context Indicates the application BaseContext.
 * @param fileUri The local storage path of the file.
 * @returns the promise returned by the function.
 */
export function fileUpload(context: Context, fileUri: string): Promise<ResponseResult> {
  // Obtaining the Application File Path.
  let cacheDir = context.cacheDir;
  let imgName = fileUri.split('/').pop() + '.jpg';
  let dstPath = cacheDir + '/' + imgName;
  let url: string = Constants.SERVER + Constants.UPLOAD_FILE;
  let uploadRequestOptions: request.UploadConfig = {
    url: url,
    header: {
      'Content-Type': ContentType.FORM
    },
    method: RequestMethod.POST,
    files: [{
      filename: imgName,
      name: 'file',
      uri: 'internal://cache/' + imgName,
      type: 'jpg'
    }],
    data: []
  };

  let serverData = new ResponseResult();
  return new Promise((resolve: Function, reject: Function) => {
    try {
      // Copy the URI to the cacheDir directory and upload the file.
      let srcFile = fileIo.openSync(fileUri);
      let dstFile = fileIo.openSync(dstPath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
      fileIo.copyFileSync(srcFile.fd, dstFile.fd);
      fileIo.closeSync(srcFile);
      fileIo.closeSync(dstFile);

      // Upload the file.
      request.uploadFile(context, uploadRequestOptions).then((data: request.UploadTask) => {
        data.on(UploadingState.COMPLETE, (result: Array<request.TaskState>) => {
          Logger.info('uploadFile success', JSON.stringify(result));
          if (result && result.length >= 1) {
            serverData.code = Constants.SERVER_CODE_SUCCESS;
            serverData.msg = result[0].message;
            serverData.data = Constants.IMAGE_PREFIX + result[0].path.split('/').pop();
            resolve(serverData);
          }
        });
        data.on(UploadingState.FAIL, (result: Array<request.TaskState>) => {
          Logger.info('uploadFile failed', JSON.stringify(result));
          if (result && result.length >= 1) {
            serverData.msg = $r('app.string.upload_error_message');
            reject(serverData);
          }
        })
      }).catch((err: Error) => {
        Logger.error('uploadFile failed', JSON.stringify(err));
        reject(serverData);
      });
    } catch (err) {
      Logger.error('uploadFile failed', JSON.stringify(err));
      reject(serverData);
    }
  })
}

100

101

102

import { fileIo } from '@kit.CoreFileKit';

import { request } from '@kit.BasicServicesKit';

import { picker } from '@kit.CoreFileKit';

import Constants, { ContentType, RequestMethod, UploadingState } from '../constants/Constants';

import ResponseResult from '../../viewmodel/ResponseResult';

import Logger from './Logger';

import { showToast } from './ToastUtil';

/**

* PhotoViewPicker

* @returns uri The uri for the selected file.

export async function fileSelect(): Promise<string> {

let photoSelectOptions = new picker.PhotoSelectOptions();

photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;

photoSelectOptions.maxSelectNumber = 1;

let photoPicker = new picker.PhotoViewPicker();

try {

let photoSelectResult = await photoPicker.select(photoSelectOptions);

if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {

let imgUri = photoSelectResult.photoUris[0];

if (imgUri.indexOf('media/Photo')<0) {

showToast($r('app.string.prompt_select_img'));

return '';

}

return photoSelectResult.photoUris[0];

} else {

return '';

}

} catch (err) {

Logger.error('SelectedImage failed', JSON.stringify(err));

return '';

}

/**

* Upload file.

* @param context Indicates the application BaseContext.

* @param fileUri The local storage path of the file.

* @returns the promise returned by the function.

export function fileUpload(context: Context, fileUri: string): Promise<ResponseResult> {

// Obtaining the Application File Path.

let cacheDir = context.cacheDir;

let imgName = fileUri.split('/').pop() + '.jpg';

let dstPath = cacheDir + '/' + imgName;

let url: string = Constants.SERVER + Constants.UPLOAD_FILE;

let uploadRequestOptions: request.UploadConfig = {

url: url,

header: {

'Content-Type': ContentType.FORM

method: RequestMethod.POST,

files: [{

filename: imgName,

uri: 'internal://cache/' + imgName,

type: 'jpg'

}],

data: []

};

let serverData = new ResponseResult();

return new Promise((resolve: Function, reject: Function) => {

try {

// Copy the URI to the cacheDir directory and upload the file.

let srcFile = fileIo.openSync(fileUri);

let dstFile = fileIo.openSync(dstPath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);

fileIo.copyFileSync(srcFile.fd, dstFile.fd);

fileIo.closeSync(srcFile);

fileIo.closeSync(dstFile);

// Upload the file.

request.uploadFile(context, uploadRequestOptions).then((data: request.UploadTask) => {

data.on(UploadingState.COMPLETE, (result: Array<request.TaskState>) => {

Logger.info('uploadFile success', JSON.stringify(result));

if (result && result.length >= 1) {

serverData.code = Constants.SERVER_CODE_SUCCESS;

serverData.msg = result[0].message;

serverData.data = Constants.IMAGE_PREFIX + result[0].path.split('/').pop();

resolve(serverData);

}

});

data.on(UploadingState.FAIL, (result: Array<request.TaskState>) => {

Logger.info('uploadFile failed', JSON.stringify(result));

if (result && result.length >= 1) {

serverData.msg = $r('app.string.upload_error_message');

reject(serverData);

}

})

}).catch((err: Error) => {

Logger.error('uploadFile failed', JSON.stringify(err));

reject(serverData);

});

} catch (err) {

Logger.error('uploadFile failed', JSON.stringify(err));

reject(serverData);

}

})

}

utils/HttpUtil.ets


import { http } from '@kit.NetworkKit';
import { NewsData } from '../../viewmodel/NewsData';
import ResponseResult from '../../viewmodel/ResponseResult';
import Constants, { ContentType } from '../constants/Constants';

/**
 * Initiate an HTTP GET request to the specified URL.
 *
 * @param url URL for initiating an HTTP request.
 */
export function httpRequestGet(url: string) {
  return httpRequest(url, http.RequestMethod.GET);
}

/**
 * Initiate an HTTP POST request to the specified URL.
 *
 * @param url URL for initiating an HTTP request
 * @param newsData Additional data of the request
 * @returns
 */
export function httpRequestPost(url: string, newsData: NewsData) {
  return httpRequest(url, http.RequestMethod.POST, newsData);
}

/**
 * Initiates an HTTP request to a given URL.
 *
 * @param url URL for initiating an HTTP request
 * @param method Request method.
 * @param extraData Additional data of the request.
 * @returns Returns {@link ResponseResult}.
 */
function httpRequest(url: string, method: http.RequestMethod, params?: NewsData): Promise<ResponseResult> {
  let httpRequest = http.createHttp();
  let responseResult = httpRequest.request(url, {
    method: method,
    readTimeout: Constants.HTTP_READ_TIMEOUT,
    header: {
      'Content-Type': ContentType.JSON
    },
    connectTimeout: Constants.HTTP_READ_TIMEOUT,
    extraData: params
  });
  let serverData = new ResponseResult();
  // Processes the data and returns.
  return responseResult.then((value: http.HttpResponse) => {
    if (value.responseCode === Constants.HTTP_CODE_200) {
      // Obtains the returned data.
      let result = `${value.result}`;
      let resultJson: ResponseResult = JSON.parse(result);
      if (resultJson.code === Constants.SERVER_CODE_SUCCESS) {
        serverData.data = resultJson.data;
      }
      serverData.code = resultJson.code;
      serverData.msg = resultJson.msg;
    } else {
      serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`;
    }
    return serverData;
  }).catch(() => {
    serverData.msg = $r('app.string.http_error_message');
    return serverData;
  });
}

import { http } from '@kit.NetworkKit';

import { NewsData } from '../../viewmodel/NewsData';

import ResponseResult from '../../viewmodel/ResponseResult';

import Constants, { ContentType } from '../constants/Constants';

/**

* Initiate an HTTP GET request to the specified URL.

* @param url URL for initiating an HTTP request.

export function httpRequestGet(url: string) {

return httpRequest(url, http.RequestMethod.GET);

}

/**

* Initiate an HTTP POST request to the specified URL.

* @param url URL for initiating an HTTP request

* @param newsData Additional data of the request

* @returns

export function httpRequestPost(url: string, newsData: NewsData) {

return httpRequest(url, http.RequestMethod.POST, newsData);

}

/**

* Initiates an HTTP request to a given URL.

* @param url URL for initiating an HTTP request

* @param method Request method.

* @param extraData Additional data of the request.

* @returns Returns {@link ResponseResult}.

function httpRequest(url: string, method: http.RequestMethod, params?: NewsData): Promise<ResponseResult> {

let httpRequest = http.createHttp();

let responseResult = httpRequest.request(url, {

method: method,

readTimeout: Constants.HTTP_READ_TIMEOUT,

header: {

'Content-Type': ContentType.JSON

connectTimeout: Constants.HTTP_READ_TIMEOUT,

extraData: params

});

let serverData = new ResponseResult();

// Processes the data and returns.

return responseResult.then((value: http.HttpResponse) => {

if (value.responseCode === Constants.HTTP_CODE_200) {

// Obtains the returned data.

let result = `${value.result}`;

let resultJson: ResponseResult = JSON.parse(result);

if (resultJson.code === Constants.SERVER_CODE_SUCCESS) {

serverData.data = resultJson.data;

}

serverData.code = resultJson.code;

serverData.msg = resultJson.msg;

} else {

serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`;

}

return serverData;

}).catch(() => {

serverData.msg = $r('app.string.http_error_message');

return serverData;

});

}

utils/Logger.ets


import { hilog } from '@kit.PerformanceAnalysisKit';

const LOGGER_PREFIX: string = 'News Release';

class Logger {
  private domain: number;
  private prefix: string;

  // format Indicates the log format string.
  private format: string = '%{public}s, %{public}s';

  /**
   * constructor.
   *
   * @param prefix Identifies the log tag.
   * @param domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF
   * @param args Indicates the log parameters.
   */
  constructor(prefix: string = '', domain: number = 0xFF00) {
    this.prefix = prefix;
    this.domain = domain;
  }

  debug(...args: string[]): void {
    hilog.debug(this.domain, this.prefix, this.format, args);
  }

  info(...args: string[]): void {
    hilog.info(this.domain, this.prefix, this.format, args);
  }

  warn(...args: string[]): void {
    hilog.warn(this.domain, this.prefix, this.format, args);
  }

  error(...args: string[]): void {
    hilog.error(this.domain, this.prefix, this.format, args);
  }
}

export default new Logger(LOGGER_PREFIX);

import { hilog } from '@kit.PerformanceAnalysisKit';

const LOGGER_PREFIX: string = 'News Release';

class Logger {

private domain: number;

private prefix: string;

// format Indicates the log format string.

private format: string = '%{public}s, %{public}s';

/**

* constructor.

* @param prefix Identifies the log tag.

* @param domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF

* @param args Indicates the log parameters.

constructor(prefix: string = '', domain: number = 0xFF00) {

this.prefix = prefix;

this.domain = domain;

}

debug(...args: string[]): void {

hilog.debug(this.domain, this.prefix, this.format, args);

}

info(...args: string[]): void {

hilog.info(this.domain, this.prefix, this.format, args);

}

warn(...args: string[]): void {

hilog.warn(this.domain, this.prefix, this.format, args);

}

error(...args: string[]): void {

hilog.error(this.domain, this.prefix, this.format, args);

}

export default new Logger(LOGGER_PREFIX);

utils/ToastUtil.ets


import { promptAction } from '@kit.ArkUI';
import Constants from '../constants/Constants';

export function showToast(msg: string | Resource) {
  promptAction.showToast({
    message: msg,
    duration: Constants.ANIMATION_DURATION
  });
}

import { promptAction } from '@kit.ArkUI';

import Constants from '../constants/Constants';

export function showToast(msg: string | Resource) {

promptAction.showToast({

message: msg,

duration: Constants.ANIMATION_DURATION

});

}

entryability

EntryAbility.ets


import { abilityAccessCtrl, AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import Logger from '../common/utils/Logger';
import { GlobalContext } from '../viewmodel/GlobalContext';


export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    Logger.info('testTag', '%{public}s', 'Ability onCreate');
    GlobalContext.getContext().setObject('abilityWant', want);
  }

  onDestroy(): void | Promise<void> {
    Logger.info('testTag', '%{public}s', 'Ability onDestroy');
  }

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

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

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

  onForeground(): void {
    // Ability has brought to foreground.
    GlobalContext.getContext().setObject('isBackRouter', false);
    Logger.info('testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background.
    Logger.info('testTag', '%{public}s', 'Ability onBackground');
  }

  private requestPermissions() {
    let atManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(this.context, ['ohos.permission.READ_MEDIA'])
      .then((data) => {
        Logger.info('testTag', '%{public}s', `request permission data result: ${data}`);
      })
      .catch((err: Error) => {
        Logger.error('testTag', '%{public}s', `fail to request permission error:${err}`)
      });
  }
}

import { abilityAccessCtrl, AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';

import { window } from '@kit.ArkUI';

import Logger from '../common/utils/Logger';

import { GlobalContext } from '../viewmodel/GlobalContext';

export default class EntryAbility extends UIAbility {

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {

Logger.info('testTag', '%{public}s', 'Ability onCreate');

GlobalContext.getContext().setObject('abilityWant', want);

}

onDestroy(): void | Promise<void> {

Logger.info('testTag', '%{public}s', 'Ability onDestroy');

}

onWindowStageCreate(windowStage: window.WindowStage): void {

// Main window is created, set main page for this ability.

Logger.info('testTag', '%{public}s', 'Ability onWindowStageCreate');

this.requestPermissions();

windowStage.loadContent('pages/MainPage', (err, data) => {

if (err.code) {

Logger.error('testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');

return;

}

Logger.info('testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');

});

}

onWindowStageDestroy(): void {

// Main window is destroyed, release UI related resources.

Logger.info('testTag', '%{public}s', 'Ability onWindowStageDestroy');

}

onForeground(): void {

// Ability has brought to foreground.

GlobalContext.getContext().setObject('isBackRouter', false);

Logger.info('testTag', '%{public}s', 'Ability onForeground');

}

onBackground(): void {

// Ability has back to background.

Logger.info('testTag', '%{public}s', 'Ability onBackground');

}

private requestPermissions() {

let atManager = abilityAccessCtrl.createAtManager();

atManager.requestPermissionsFromUser(this.context, ['ohos.permission.READ_MEDIA'])

.then((data) => {

Logger.info('testTag', '%{public}s', `request permission data result: ${data}`);

})

.catch((err: Error) => {

Logger.error('testTag', '%{public}s', `fail to request permission error:${err}`)

});

}

pages

MainPage.ets


import Constants from '../common/constants/Constants';
import NewsList from '../view/NewsList';
import { router } from '@kit.ArkUI';
import NewsTypeViewModel from '../viewmodel/NewsTypeViewModel';
import NewsTypeBean from '../viewmodel/NewsTypeModel';
import { GlobalContext } from '../viewmodel/GlobalContext';

/**
 * MainPage
 */
@Entry
@Component
struct MainPage {
  @State tabBarArray: NewsTypeBean[] = NewsTypeViewModel.getDefaultTypeList();
  @State currentIndex: number = 0;

  @Builder
  TabBuilder(index: number) {
    Column() {
      Text(this.tabBarArray[index].name)
        .height(Constants.FULL_PERCENT)
        .fontSize(this.currentIndex === index ? $r('app.float.bar_selected_font') : $r('app.float.bar_normal_font'))
        .fontWeight(this.currentIndex === index ? Constants.TYPE_FONT_WEIGHT : Constants.DESC_FONT_WEIGHT)
        .fontColor($r('app.color.title_color'))
    }
    .padding({ left: $r('app.float.normal_padding'), right: $r('app.float.normal_padding') })
    .margin({
      left: index === 0 ? $r('app.float.common_padding') : 0,
      right: index === this.tabBarArray.length - 1 ? $r('app.float.common_padding') : 0
    })
  }

  aboutToAppear() {
    // Request news category.
    NewsTypeViewModel.getNewsTypeList().then((typeList: NewsTypeBean[]) => {
      this.tabBarArray = typeList;
    });
  }

  onPageShow() {
    if (GlobalContext.getContext().getObject('isBackRouter') === true) {
      GlobalContext.getContext().setObject('isBackRouter', false);
      let tempIndex = this.currentIndex;
      this.currentIndex = -1;
      this.currentIndex = tempIndex;
    }
  }

  build() {
    Stack() {
      Tabs() {
        ForEach(this.tabBarArray, (tabsItem: NewsTypeBean, index?: number) => {
          TabContent() {
            NewsList({ index, currentIndex: $currentIndex })
          }
          .tabBar(this.TabBuilder(tabsItem.id))
        }, (tabsItem: NewsTypeBean) => JSON.stringify(tabsItem));
      }
      .barHeight($r('app.float.nav_height'))
      .height(Constants.FULL_PERCENT)
      .barMode(BarMode.Scrollable)
      .onChange((index: number) => {
        this.currentIndex = index;
      })
      .vertical(false)

      Image($r('app.media.ic_add'))
        .width($r('app.float.btn_size'))
        .height($r('app.float.btn_size'))
        .margin({ bottom: $r('app.float.btn_margin'), right: $r('app.float.btn_margin') })
        .onClick(() => {
          router.pushUrl({ url: 'pages/NewsAddPage' });
        })
    }
    .width(Constants.FULL_PERCENT)
    .height(Constants.FULL_PERCENT)
    .alignContent(Alignment.BottomEnd)
    .backgroundColor($r('app.color.listColor'))
  }
}

import Constants from '../common/constants/Constants';

import NewsList from '../view/NewsList';

import { router } from '@kit.ArkUI';

import NewsTypeViewModel from '../viewmodel/NewsTypeViewModel';

import NewsTypeBean from '../viewmodel/NewsTypeModel';

import { GlobalContext } from '../viewmodel/GlobalContext';

/**

* MainPage

@Entry

@Component

struct MainPage {

@State tabBarArray: NewsTypeBean[] = NewsTypeViewModel.getDefaultTypeList();

@State currentIndex: number = 0;

@Builder

TabBuilder(index: number) {

Column() {

Text(this.tabBarArray[index].name)

.height(Constants.FULL_PERCENT)

.fontSize(this.currentIndex === index ? $r('app.float.bar_selected_font') : $r('app.float.bar_normal_font'))

.fontWeight(this.currentIndex === index ? Constants.TYPE_FONT_WEIGHT : Constants.DESC_FONT_WEIGHT)

.fontColor($r('app.color.title_color'))

}

.padding({ left: $r('app.float.normal_padding'), right: $r('app.float.normal_padding') })

.margin({

left: index === 0 ? $r('app.float.common_padding') : 0,

right: index === this.tabBarArray.length - 1 ? $r('app.float.common_padding') : 0

})

}

aboutToAppear() {

// Request news category.

NewsTypeViewModel.getNewsTypeList().then((typeList: NewsTypeBean[]) => {

this.tabBarArray = typeList;

});

}

onPageShow() {

if (GlobalContext.getContext().getObject('isBackRouter') === true) {

GlobalContext.getContext().setObject('isBackRouter', false);

let tempIndex = this.currentIndex;

this.currentIndex = -1;

this.currentIndex = tempIndex;

}

build() {

Stack() {

Tabs() {

ForEach(this.tabBarArray, (tabsItem: NewsTypeBean, index?: number) => {

TabContent() {

NewsList({ index, currentIndex: $currentIndex })

}

.tabBar(this.TabBuilder(tabsItem.id))

}, (tabsItem: NewsTypeBean) => JSON.stringify(tabsItem));

}

.barHeight($r('app.float.nav_height'))

.height(Constants.FULL_PERCENT)

.barMode(BarMode.Scrollable)

.onChange((index: number) => {

this.currentIndex = index;

})

.vertical(false)

Image($r('app.media.ic_add'))

.width($r('app.float.btn_size'))

.height($r('app.float.btn_size'))

.margin({ bottom: $r('app.float.btn_margin'), right: $r('app.float.btn_margin') })

.onClick(() => {

router.pushUrl({ url: 'pages/NewsAddPage' });

})

}

.width(Constants.FULL_PERCENT)

.height(Constants.FULL_PERCENT)

.alignContent(Alignment.BottomEnd)

.backgroundColor($r('app.color.listColor'))

}

NewsAddPage.ets

import { fileSelect, fileUpload } from '../common/utils/FileUtil'
import Logger from '../common/utils/Logger'
import Constants from '../common/constants/Constants'
import { showToast } from '../common/utils/ToastUtil'
import ResponseResult from '../viewmodel/ResponseResult'
import { NewsData, NewsFile } from '../viewmodel/NewsData'
import NewsViewModel from '../viewmodel/NewsViewModel'
import { GlobalContext } from '../viewmodel/GlobalContext'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct NewsAddPage {
  title: string = ''
  content: string = ''
  @State imageUri: string = ''
  @State isUploading: boolean = false

  selectImage() {
    Logger.info('selectImage')
    fileSelect().then((uri: string) => {
      Logger.info(uri)
      this.imageUri = uri || ''
    })
  }

  uploadNewsData() {
    if (this.title === '') {
      showToast($r('app.string.prompt_no_title'))
      return
    }
    if (this.content === '') {
      showToast($r('app.string.prompt_no_content'))
      return
    }
    if (this.imageUri === '') {
      showToast($r('app.string.prompt_no_file'))
      return
    }

    this.isUploading = true
    let serverData = fileUpload(getContext(this), this.imageUri)
    serverData.then((data: ResponseResult) => {
      let imageUrl = data.data

      let newsFile = new NewsFile()
      newsFile.id = 0
      newsFile.url = imageUrl
      newsFile.type = 0
      newsFile.newsId = 0

      let newsData: NewsData = new NewsData()
      newsData.title = this.title
      newsData.content = this.content
      newsData.imagesUrl = [newsFile]

      NewsViewModel.uploadNews(newsData).then(() => {
        this.isUploading = false
        GlobalContext.getContext().setObject('isBackRouter', true)
        router.back()
      }).catch(() => {
        this.isUploading = false
        showToast($r('app.string.upload_error_message'))
      })
    }).catch(() => {
      this.isUploading = false
      showToast($r('app.string.upload_error_message'))
    })
  }

  build() {
    Stack() {
      Navigation() {
        Column() {
          Column() {
            TextInput({ placeholder: $r('app.string.title_default_text') })
              .textInputExtend()
              .onChange((value: string) => {
                this.title = value;
              })

            Divider()
              .dividerExtend()

            TextArea({ placeholder: $r('app.string.content_default_text') })
              .textAreaExtend()
              .onChange((value: string) => {
                this.content = value
              })

            Scroll() {
              Row() {
                Image(this.imageUri ? this.imageUri : $r('app.media.ic_add_pic'))
                  .addImageExtend()
                  .onClick(() => this.selectImage())
              }
              .imageRowExtend()
            }
            .scrollExtend()
          }
          .topColumnExtend()

          Button($r('app.string.release_btn'))
            .releaseButtonExtend()
            .onClick(() => this.uploadNewsData())
        }
        .mainColumnExtend()

      }
      .navigationExtend()
    }
  }
}

@Extend(Navigation)
function navigationExtend() {
  .height(Constants.FULL_PERCENT)
  .title(Constants.RELEASE_TITLE)
  .titleMode(NavigationTitleMode.Mini)
  .backgroundColor($r('app.color.listColor'))
}

@Extend(Column)
function mainColumnExtend() {
  .height(Constants.FULL_PERCENT)
  .justifyContent(FlexAlign.SpaceBetween)
  .padding({
    left: $r('app.float.common_padding'),
    right: $r('app.float.common_padding'),
    bottom: $r('app.float.common_padding')
  })
}

@Extend(Column)
function topColumnExtend() {
  .borderRadius($r('app.float.edit_view_radius'))
  .backgroundColor(Color.White)
  .width(Constants.FULL_PERCENT)
}

@Extend(TextInput)
function textInputExtend() {
  .fontSize($r('app.float.title_font'))
  .placeholderFont({ size: $r('app.float.title_font') })
  .margin({ top: $r('app.float.common_padding') })
  .fontColor($r('app.color.title_color'))
  .backgroundColor(Color.White)
  .width(Constants.FULL_PERCENT)
  .height($r('app.float.input_height'))
}

@Extend(Divider)
function dividerExtend() {
  .opacity($r('app.float.divider_opacity'))
  .color($r('app.color.title_color'))
  .width(Constants.DIVIDER_WIDTH)
}

@Extend(TextArea)
function textAreaExtend() {
  .placeholderFont({ size: $r('app.float.title_font') })
  .fontColor($r('app.color.title_color'))
  .height($r('app.float.area_height'))
  .fontSize($r('app.float.title_font'))
  .margin({ top: $r('app.float.normal_padding') })
  .backgroundColor(Color.White)
}

@Extend(Scroll)
function scrollExtend() {
  .width(Constants.FULL_PERCENT)
  .align(Alignment.Start)
  .scrollable(ScrollDirection.Horizontal)
}

@Extend(Row)
function imageRowExtend() {
  .padding($r('app.float.common_padding'))
}

@Extend(Image)
function addImageExtend() {
  .width($r('app.float.img_size'))
  .height($r('app.float.img_size'))
  .objectFit(ImageFit.Cover)
}

@Extend(Button)
function releaseButtonExtend() {
  .fontSize($r('app.float.title_font'))
  .height($r('app.float.release_btn_height'))
  .width($r('app.float.release_btn_width'))
  .margin({ bottom: $r('app.float.common_padding') })
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

import { fileSelect, fileUpload } from '../common/utils/FileUtil'

import Logger from '../common/utils/Logger'

import Constants from '../common/constants/Constants'

import { showToast } from '../common/utils/ToastUtil'

import ResponseResult from '../viewmodel/ResponseResult'

import { NewsData, NewsFile } from '../viewmodel/NewsData'

import NewsViewModel from '../viewmodel/NewsViewModel'

import { GlobalContext } from '../viewmodel/GlobalContext'

import { router } from '@kit.ArkUI'

@Entry

@Component

struct NewsAddPage {

title: string = ''

content: string = ''

@State imageUri: string = ''

@State isUploading: boolean = false

selectImage() {

Logger.info('selectImage')

fileSelect().then((uri: string) => {

Logger.info(uri)

this.imageUri = uri || ''

})

}

uploadNewsData() {

if (this.title === '') {

showToast($r('app.string.prompt_no_title'))

return

}

if (this.content === '') {

showToast($r('app.string.prompt_no_content'))

return

}

if (this.imageUri === '') {

showToast($r('app.string.prompt_no_file'))

return

}

this.isUploading = true

let serverData = fileUpload(getContext(this), this.imageUri)

serverData.then((data: ResponseResult) => {

let imageUrl = data.data

let newsFile = new NewsFile()

newsFile.id = 0

newsFile.url = imageUrl

newsFile.type = 0

newsFile.newsId = 0

let newsData: NewsData = new NewsData()

newsData.title = this.title

newsData.content = this.content

newsData.imagesUrl = [newsFile]

NewsViewModel.uploadNews(newsData).then(() => {

this.isUploading = false

GlobalContext.getContext().setObject('isBackRouter', true)

router.back()

}).catch(() => {

this.isUploading = false

showToast($r('app.string.upload_error_message'))

})

}).catch(() => {

this.isUploading = false

showToast($r('app.string.upload_error_message'))

})

}

build() {

Stack() {

Navigation() {

Column() {

TextInput({ placeholder: $r('app.string.title_default_text') })

.textInputExtend()

.onChange((value: string) => {

this.title = value;

})

Divider()

.dividerExtend()

TextArea({ placeholder: $r('app.string.content_default_text') })

.textAreaExtend()

.onChange((value: string) => {

this.content = value

})

Scroll() {

Row() {

Image(this.imageUri ? this.imageUri : $r('app.media.ic_add_pic'))

.addImageExtend()

.onClick(() => this.selectImage())

}

.imageRowExtend()

}

.scrollExtend()

}

.topColumnExtend()

Button($r('app.string.release_btn'))

.releaseButtonExtend()

.onClick(() => this.uploadNewsData())

}

.mainColumnExtend()

}

.navigationExtend()

}

@Extend(Navigation)

function navigationExtend() {

.height(Constants.FULL_PERCENT)

.title(Constants.RELEASE_TITLE)

.titleMode(NavigationTitleMode.Mini)

.backgroundColor($r('app.color.listColor'))

}

@Extend(Column)

function mainColumnExtend() {

.height(Constants.FULL_PERCENT)

.justifyContent(FlexAlign.SpaceBetween)

.padding({

left: $r('app.float.common_padding'),

right: $r('app.float.common_padding'),

bottom: $r('app.float.common_padding')

})

}

@Extend(Column)

function topColumnExtend() {

.borderRadius($r('app.float.edit_view_radius'))

.backgroundColor(Color.White)

.width(Constants.FULL_PERCENT)

}

@Extend(TextInput)

function textInputExtend() {

.fontSize($r('app.float.title_font'))

.placeholderFont({ size: $r('app.float.title_font') })

.margin({ top: $r('app.float.common_padding') })

.fontColor($r('app.color.title_color'))

.backgroundColor(Color.White)

.width(Constants.FULL_PERCENT)

.height($r('app.float.input_height'))

}

@Extend(Divider)

function dividerExtend() {

.opacity($r('app.float.divider_opacity'))

.color($r('app.color.title_color'))

.width(Constants.DIVIDER_WIDTH)

}

@Extend(TextArea)

function textAreaExtend() {

.placeholderFont({ size: $r('app.float.title_font') })

.fontColor($r('app.color.title_color'))

.height($r('app.float.area_height'))

.fontSize($r('app.float.title_font'))

.margin({ top: $r('app.float.normal_padding') })

.backgroundColor(Color.White)

}

@Extend(Scroll)

function scrollExtend() {

.width(Constants.FULL_PERCENT)

.align(Alignment.Start)

.scrollable(ScrollDirection.Horizontal)

}

@Extend(Row)

function imageRowExtend() {

.padding($r('app.float.common_padding'))

}

@Extend(Image)

function addImageExtend() {

.width($r('app.float.img_size'))

.height($r('app.float.img_size'))

.objectFit(ImageFit.Cover)

}

@Extend(Button)

function releaseButtonExtend() {

.fontSize($r('app.float.title_font'))

.height($r('app.float.release_btn_height'))

.width($r('app.float.release_btn_width'))

.margin({ bottom: $r('app.float.common_padding') })

}

NewEditPage.ets


import { router } from '@kit.ArkUI';
import Constants from '../common/constants/Constants';
import { fileSelect, fileUpload } from '../common/utils/FileUtil';
import { NewsFile, NewsData } from '../viewmodel/NewsData';
import NewsViewModel from '../viewmodel/NewsViewModel';
import { showToast } from '../common/utils/ToastUtil';
import UploadingLayout from '../view/UploadingLayout';
import ResponseResult from '../viewmodel/ResponseResult';
import { GlobalContext } from '../viewmodel/GlobalContext';

/**
 * NewsEditPage.
 */
@Entry
@Component
struct NewsEditPage {
  title: string = '';
  content: string = '';
  @State imageUri: string = '';
  @State isUploading: boolean = false;

  selectImage() {
    fileSelect().then((uri: string) => {
      this.imageUri = uri || '';
    });
  }

  uploadNewsData() {
    if (this.title === '') {
      showToast($r('app.string.prompt_no_title'));
      return;
    }
    if (this.content === '') {
      showToast($r('app.string.prompt_no_content'));
      return;
    }
    if (this.imageUri === '') {
      showToast($r('app.string.prompt_no_file'));
      return;
    }
    this.isUploading = true;
    let serverData = fileUpload(getContext(this), this.imageUri);
    serverData.then((data: ResponseResult) => {
      let imageUrl = data.data;
      let newsFile = new NewsFile();
      newsFile.id = 0;
      newsFile.url = imageUrl;
      newsFile.type = 0;
      newsFile.newsId = 0;
      let newsData: NewsData = new NewsData();
      newsData.title = this.title;
      newsData.content = this.content;
      newsData.imagesUrl = [newsFile];
      NewsViewModel.uploadNews(newsData).then(() => {
        this.isUploading = false;
        GlobalContext.getContext().setObject('isBackRouter', true);
        router.back();
      }).catch(() => {
        this.isUploading = false;
        showToast($r('app.string.upload_error_message'));
      });
    }).catch(() => {
      this.isUploading = false;
      showToast($r('app.string.upload_error_message'));
    });
  }

  build() {
    Stack() {
      Navigation() {
        Column() {
          Column() {
            TextInput({ placeholder: $r('app.string.title_default_text') })
              .fontSize($r('app.float.title_font'))
              .placeholderFont({ size: $r('app.float.title_font') })
              .margin({ top: $r('app.float.common_padding') })
              .fontColor($r('app.color.title_color'))
              .backgroundColor(Color.White)
              .onChange((value: string) => {
                this.title = value;
              })
              .width(Constants.FULL_PERCENT)
              .height($r('app.float.input_height'))
            Divider()
              .opacity($r('app.float.divider_opacity'))
              .color($r('app.color.title_color'))
              .width(Constants.DIVIDER_WIDTH)
            TextArea({ placeholder: $r('app.string.content_default_text') })
              .placeholderFont({ size: $r('app.float.title_font') })
              .fontColor($r('app.color.title_color'))
              .height($r('app.float.area_height'))
              .fontSize($r('app.float.title_font'))
              .margin({ top: $r('app.float.normal_padding') })
              .backgroundColor(Color.White)
              .onChange((value: string) => {
                this.content = value;
              })
            Scroll() {
              Row() {
                Image(this.imageUri ? this.imageUri : $r('app.media.ic_add_pic'))
                  .width($r('app.float.img_size'))
                  .height($r('app.float.img_size'))
                  .objectFit(ImageFit.Cover)
                  .onClick(() => this.selectImage())
              }
              .padding($r('app.float.common_padding'))
            }
            .width(Constants.FULL_PERCENT)
            .scrollable(ScrollDirection.Horizontal)
            .align(Alignment.Start)
          }
          .borderRadius($r('app.float.edit_view_radius'))
          .backgroundColor(Color.White)
          .width(Constants.FULL_PERCENT)

          Button($r('app.string.release_btn'))
            .fontSize($r('app.float.title_font'))
            .height($r('app.float.release_btn_height'))
            .width($r('app.float.release_btn_width'))
            .margin({ bottom: $r('app.float.common_padding') })
            .onClick(() => this.uploadNewsData())
        }
        .padding({
          left: $r('app.float.common_padding'),
          right: $r('app.float.common_padding'),
          bottom: $r('app.float.common_padding')
        })
        .height(Constants.FULL_PERCENT)
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .height(Constants.FULL_PERCENT)
      .title(Constants.RELEASE_TITLE)
      .titleMode(NavigationTitleMode.Mini)
      .backgroundColor($r('app.color.listColor'))

      if (this.isUploading) {
        UploadingLayout()
      }
    }
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

import { router } from '@kit.ArkUI';

import Constants from '../common/constants/Constants';

import { fileSelect, fileUpload } from '../common/utils/FileUtil';

import { NewsFile, NewsData } from '../viewmodel/NewsData';

import NewsViewModel from '../viewmodel/NewsViewModel';

import { showToast } from '../common/utils/ToastUtil';

import UploadingLayout from '../view/UploadingLayout';

import ResponseResult from '../viewmodel/ResponseResult';

import { GlobalContext } from '../viewmodel/GlobalContext';

/**

* NewsEditPage.

@Entry

@Component

struct NewsEditPage {

title: string = '';

content: string = '';

@State imageUri: string = '';

@State isUploading: boolean = false;

selectImage() {

fileSelect().then((uri: string) => {

this.imageUri = uri || '';

});

}

uploadNewsData() {

if (this.title === '') {

showToast($r('app.string.prompt_no_title'));

return;

}

if (this.content === '') {

showToast($r('app.string.prompt_no_content'));

return;

}

if (this.imageUri === '') {

showToast($r('app.string.prompt_no_file'));

return;

}

this.isUploading = true;

let serverData = fileUpload(getContext(this), this.imageUri);

serverData.then((data: ResponseResult) => {

let imageUrl = data.data;

let newsFile = new NewsFile();

newsFile.id = 0;

newsFile.url = imageUrl;

newsFile.type = 0;

newsFile.newsId = 0;

let newsData: NewsData = new NewsData();

newsData.title = this.title;

newsData.content = this.content;

newsData.imagesUrl = [newsFile];

NewsViewModel.uploadNews(newsData).then(() => {

this.isUploading = false;

GlobalContext.getContext().setObject('isBackRouter', true);

router.back();

}).catch(() => {

this.isUploading = false;

showToast($r('app.string.upload_error_message'));

});

}).catch(() => {

this.isUploading = false;

showToast($r('app.string.upload_error_message'));

});

}

build() {

Stack() {

Navigation() {

Column() {

TextInput({ placeholder: $r('app.string.title_default_text') })

.fontSize($r('app.float.title_font'))

.placeholderFont({ size: $r('app.float.title_font') })

.margin({ top: $r('app.float.common_padding') })

.fontColor($r('app.color.title_color'))

.backgroundColor(Color.White)

.onChange((value: string) => {

this.title = value;

})

.width(Constants.FULL_PERCENT)

.height($r('app.float.input_height'))

Divider()

.opacity($r('app.float.divider_opacity'))

.color($r('app.color.title_color'))

.width(Constants.DIVIDER_WIDTH)

TextArea({ placeholder: $r('app.string.content_default_text') })

.placeholderFont({ size: $r('app.float.title_font') })

.fontColor($r('app.color.title_color'))

.height($r('app.float.area_height'))

.fontSize($r('app.float.title_font'))

.margin({ top: $r('app.float.normal_padding') })

.backgroundColor(Color.White)

.onChange((value: string) => {

this.content = value;

})

Scroll() {

Row() {

Image(this.imageUri ? this.imageUri : $r('app.media.ic_add_pic'))

.width($r('app.float.img_size'))

.height($r('app.float.img_size'))

.objectFit(ImageFit.Cover)

.onClick(() => this.selectImage())

}

.padding($r('app.float.common_padding'))

}

.width(Constants.FULL_PERCENT)

.scrollable(ScrollDirection.Horizontal)

.align(Alignment.Start)

}

.borderRadius($r('app.float.edit_view_radius'))

.backgroundColor(Color.White)

.width(Constants.FULL_PERCENT)

Button($r('app.string.release_btn'))

.fontSize($r('app.float.title_font'))

.height($r('app.float.release_btn_height'))

.width($r('app.float.release_btn_width'))

.margin({ bottom: $r('app.float.common_padding') })

.onClick(() => this.uploadNewsData())

}

.padding({

left: $r('app.float.common_padding'),

right: $r('app.float.common_padding'),

bottom: $r('app.float.common_padding')

})

.height(Constants.FULL_PERCENT)

.justifyContent(FlexAlign.SpaceBetween)

}

.height(Constants.FULL_PERCENT)

.title(Constants.RELEASE_TITLE)

.titleMode(NavigationTitleMode.Mini)

.backgroundColor($r('app.color.listColor'))

if (this.isUploading) {

UploadingLayout()

}

view

FailureLayout.ets


import Constants from '../common/constants/Constants';

@Component
export default struct FailureLayout {
  reloadAction = () => {};

  build() {
    Column() {
      Image($r('app.media.ic_none'))
        .height($r('app.float.no_data_img_size'))
        .width($r('app.float.no_data_img_size'))
      Text($r('app.string.page_none_msg'))
        .opacity($r('app.float.no_data_opacity'))
        .fontSize($r('app.float.title_font'))
        .fontColor($r('app.color.title_color'))
        .margin({ top: $r('app.float.common_padding') })
      Text($r('app.string.click_reload'))
        .opacity($r('app.float.no_data_opacity'))
        .fontSize($r('app.float.title_font'))
        .fontColor($r('app.color.color_index'))
        .padding($r('app.float.common_padding'))
        .onClick(this.reloadAction)
    }
    .width(Constants.FULL_PERCENT)
    .height(Constants.FULL_PERCENT)
    .justifyContent(FlexAlign.Center)
  }
}

import Constants from '../common/constants/Constants';

@Component

export default struct FailureLayout {

reloadAction = () => {};

build() {

Column() {

Image($r('app.media.ic_none'))

.height($r('app.float.no_data_img_size'))

.width($r('app.float.no_data_img_size'))

Text($r('app.string.page_none_msg'))

.opacity($r('app.float.no_data_opacity'))

.fontSize($r('app.float.title_font'))

.fontColor($r('app.color.title_color'))

.margin({ top: $r('app.float.common_padding') })

Text($r('app.string.click_reload'))

.opacity($r('app.float.no_data_opacity'))

.fontSize($r('app.float.title_font'))

.fontColor($r('app.color.color_index'))

.padding($r('app.float.common_padding'))

.onClick(this.reloadAction)

}

.width(Constants.FULL_PERCENT)

.height(Constants.FULL_PERCENT)

.justifyContent(FlexAlign.Center)

}

LoadingLayout.ets


import Constants from '../common/constants/Constants';

@Component
export default struct LoadingLayout {
  build() {
    Row() {
      Image($r('app.media.ic_pull_up_load'))
        .width($r('app.float.refresh_img_size'))
        .height($r('app.float.refresh_img_size'))
      Text($r('app.string.pull_up_load_text'))
        .margin({ left: $r('app.float.normal_padding') })
        .fontSize($r('app.float.title_font'))
        .textAlign(TextAlign.Center)
    }
    .width(Constants.FULL_PERCENT)
    .height(Constants.CUSTOM_LAYOUT_HEIGHT)
    .justifyContent(FlexAlign.Center)
  }
}

import Constants from '../common/constants/Constants';

@Component

export default struct LoadingLayout {

build() {

Row() {

Image($r('app.media.ic_pull_up_load'))

.width($r('app.float.refresh_img_size'))

.height($r('app.float.refresh_img_size'))

Text($r('app.string.pull_up_load_text'))

.margin({ left: $r('app.float.normal_padding') })

.fontSize($r('app.float.title_font'))

.textAlign(TextAlign.Center)

}

.width(Constants.FULL_PERCENT)

.height(Constants.CUSTOM_LAYOUT_HEIGHT)

.justifyContent(FlexAlign.Center)

}

LoadMoreLayout.ets


import RefreshLoadingClass from '../viewmodel/RefreshLoadingClass';
import Constants from '../common/constants/Constants';

/**
 * The load more layout component.
 */
@Component
export default struct LoadMoreLayout {
  @ObjectLink loadMoreLayoutClass: RefreshLoadingClass;

  build() {
    Row() {
      Image(this.loadMoreLayoutClass.imageSrc)
        .width($r('app.float.refresh_img_size'))
        .height($r('app.float.refresh_img_size'))

      Text(this.loadMoreLayoutClass.textValue)
        .margin({ left: $r('app.float.normal_padding') })
        .fontSize($r('app.float.title_font'))
        .textAlign(TextAlign.Center)
    }
    .clip(true)
    .width(Constants.FULL_PERCENT)
    .justifyContent(FlexAlign.Center)
    .height(this.loadMoreLayoutClass.heightValue)
  }
}

import RefreshLoadingClass from '../viewmodel/RefreshLoadingClass';

import Constants from '../common/constants/Constants';

/**

* The load more layout component.

@Component

export default struct LoadMoreLayout {

@ObjectLink loadMoreLayoutClass: RefreshLoadingClass;

build() {

Row() {

Image(this.loadMoreLayoutClass.imageSrc)

.width($r('app.float.refresh_img_size'))

.height($r('app.float.refresh_img_size'))

Text(this.loadMoreLayoutClass.textValue)

.margin({ left: $r('app.float.normal_padding') })

.fontSize($r('app.float.title_font'))

.textAlign(TextAlign.Center)

}

.clip(true)

.width(Constants.FULL_PERCENT)

.justifyContent(FlexAlign.Center)

.height(this.loadMoreLayoutClass.heightValue)

}

NewsItem.ets


import { NewsData, NewsFile } from '../viewmodel/NewsData';
import Constants from '../common/constants/Constants';

/**
 * The news list item component.
 */
@Component
export default struct NewsItem {
  newsData: NewsData = new NewsData();

  build() {
    Column() {
      Row() {
        Image($r('app.media.ic_news'))
          .height($r('app.float.title_font'))
          .aspectRatio(Constants.TYPE_ASPECT_RATIO)
        Text(this.newsData?.title)
          .fontSize($r('app.float.title_font'))
          .fontColor($r('app.color.title_color'))
          .layoutWeight(1)
          .maxLines(1)
          .lineHeight($r('app.float.title_line_height'))
          .fontFamily($r('app.string.harmony_hei_ti_medium'))
          .margin({ left: $r('app.float.normal_padding') })
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .fontWeight(Constants.TITLE_FONT_WEIGHT)
      }
      .alignItems(VerticalAlign.Center)
      .width(Constants.FULL_PERCENT)

      Text(this.newsData?.content)
        .fontSize($r('app.float.desc_font'))
        .fontFamily($r('app.string.harmony_hei_ti'))
        .opacity(Constants.DESC_OPACITY)
        .fontColor($r('app.color.title_color'))
        .lineHeight($r('app.float.desc_line_height'))
        .width(Constants.FULL_PERCENT)
        .maxLines(Constants.CONTENT_MAX_LINE)
        .fontWeight(Constants.DESC_FONT_WEIGHT)
        .textOverflow({ overflow: TextOverflow.Ellipsis })

      Row({ space: Constants.ITEM_IMG_SPACE }) {
        ForEach((this.newsData.imagesUrl), (itemImg: NewsFile) => {
          Image(Constants.SERVER + itemImg?.url)
            .height(Constants.FULL_PERCENT)
            .aspectRatio(1)
            .objectFit(ImageFit.Cover)
            .borderRadius($r('app.float.item_img_border_radius'))
        }, (itemImg: NewsFile) => JSON.stringify(itemImg))
      }
      .clip(true)
      .width(Constants.FULL_PERCENT)
      .height($r('app.float.item_img_size'))
      .margin({ top: $r('app.float.common_padding') })

      Text(this.newsData?.source)
        .fontSize($r('app.float.source_font'))
        .fontColor($r('app.color.fontColor_text2'))
        .width(Constants.FULL_PERCENT)
        .margin({ top: $r('app.float.normal_padding') })
    }
    .padding($r('app.float.common_padding'))
  }
}

import { NewsData, NewsFile } from '../viewmodel/NewsData';

import Constants from '../common/constants/Constants';

/**

* The news list item component.

@Component

export default struct NewsItem {

newsData: NewsData = new NewsData();

build() {

Column() {

Row() {

Image($r('app.media.ic_news'))

.height($r('app.float.title_font'))

.aspectRatio(Constants.TYPE_ASPECT_RATIO)

Text(this.newsData?.title)

.fontSize($r('app.float.title_font'))

.fontColor($r('app.color.title_color'))

.layoutWeight(1)

.maxLines(1)

.lineHeight($r('app.float.title_line_height'))

.fontFamily($r('app.string.harmony_hei_ti_medium'))

.margin({ left: $r('app.float.normal_padding') })

.textOverflow({ overflow: TextOverflow.Ellipsis })

.fontWeight(Constants.TITLE_FONT_WEIGHT)

}

.alignItems(VerticalAlign.Center)

.width(Constants.FULL_PERCENT)

Text(this.newsData?.content)

.fontSize($r('app.float.desc_font'))

.fontFamily($r('app.string.harmony_hei_ti'))

.opacity(Constants.DESC_OPACITY)

.fontColor($r('app.color.title_color'))

.lineHeight($r('app.float.desc_line_height'))

.width(Constants.FULL_PERCENT)

.maxLines(Constants.CONTENT_MAX_LINE)

.fontWeight(Constants.DESC_FONT_WEIGHT)

.textOverflow({ overflow: TextOverflow.Ellipsis })

Row({ space: Constants.ITEM_IMG_SPACE }) {

ForEach((this.newsData.imagesUrl), (itemImg: NewsFile) => {

Image(Constants.SERVER + itemImg?.url)

.height(Constants.FULL_PERCENT)

.aspectRatio(1)

.objectFit(ImageFit.Cover)

.borderRadius($r('app.float.item_img_border_radius'))

}, (itemImg: NewsFile) => JSON.stringify(itemImg))

}

.clip(true)

.width(Constants.FULL_PERCENT)

.height($r('app.float.item_img_size'))

.margin({ top: $r('app.float.common_padding') })

Text(this.newsData?.source)

.fontSize($r('app.float.source_font'))

.fontColor($r('app.color.fontColor_text2'))

.width(Constants.FULL_PERCENT)

.margin({ top: $r('app.float.normal_padding') })

}

.padding($r('app.float.common_padding'))

}

NewsList.ets


import NewsItem from './NewsItem';
import LoadMoreLayout from './LoadMoreLayout';
import RefreshLayout from './RefreshLayout';
import { NewsData } from '../viewmodel/NewsData';
import Constants, { PageState } from '../common/constants/Constants';
import NewsViewModel from '../viewmodel/NewsViewModel';
import { showToast } from '../common/utils/ToastUtil';
import FailureLayout from './FailureLayout';
import LoadingLayout from './LoadingLayout';
import NoMoreLayout from './NoMoreLayout';
import RefreshListViewModel from '../viewmodel/RefreshListViewModel';

/**
 * The news list component.
 */
@Component
export default struct NewsList {
  index: number = 0;
  @Watch('changeCategory') @Link currentIndex: number;
  @State refreshStore: RefreshListViewModel = new RefreshListViewModel();

  changeCategory() {
    if (this.currentIndex !== this.index) {
      return;
    }
    this.refreshStore.currentPage = 1;
    NewsViewModel.getNewsList(this.refreshStore.currentPage, this.refreshStore.pageSize).then((data: NewsData[]) => {
      this.refreshStore.pageState = PageState.Success;
      if (data.length === this.refreshStore.pageSize) {
        this.refreshStore.currentPage++;
        this.refreshStore.hasMore = true;
      } else {
        this.refreshStore.hasMore = false;
      }
      this.refreshStore.newsData = data;
    }).catch((err: string | Resource) => {
      showToast(err);
      this.refreshStore.pageState = PageState.Fail;
    });
  }

  aboutToAppear() {
    // Load data.
    this.changeCategory();
  }

  reloadAction() {
    this.refreshStore.pageState = PageState.Loading;
    this.changeCategory();
  }

  build() {
    Column() {
      if (this.refreshStore.pageState === PageState.Loading) {
        LoadingLayout()
      } else if (this.refreshStore.pageState === PageState.Success) {
        this.ListLayout()
      } else {
        FailureLayout({ reloadAction: () => {
          this.reloadAction();
        } })
      }
    }
    .width(Constants.FULL_PERCENT)
    .height(Constants.FULL_PERCENT)
    .justifyContent(FlexAlign.Center)
    .onTouch((event?: TouchEvent) => {
      if (event) {
        if (this.refreshStore.pageState === PageState.Success) {
          this.refreshStore.listTouchEvent(event);
        }
      }
    })
  }

  @Builder ListLayout() {
    List({ space: Constants.LIST_SPACE }) {
      ListItem() {
        RefreshLayout({ refreshLoadingClass: this.refreshStore.refreshLayoutClass })
      }
      ForEach(this.refreshStore.newsData, (item: NewsData) => {
        ListItem() {
          NewsItem({ newsData: item })
        }
        .backgroundColor($r('app.color.white'))
        .borderRadius($r('app.float.item_border_radius'))
      }, (item: NewsData, index?: number) => JSON.stringify(item) + index)
      ListItem() {
        if (this.refreshStore.hasMore) {
          LoadMoreLayout({ loadMoreLayoutClass: this.refreshStore.loadingMoreClass })
        } else {
          NoMoreLayout()
        }
      }
    }
    .width(Constants.FULL_PERCENT)
    .height(Constants.FULL_PERCENT)
    .padding({ left: $r('app.float.common_padding'), right: $r('app.float.common_padding') })
    .backgroundColor($r('app.color.listColor'))
    .edgeEffect(EdgeEffect.None)
    .onScrollIndex((start: number, end: number) => {
      // Listen to the first index of the current list.
      this.refreshStore.startIndex = start;
      this.refreshStore.endIndex = end;
    })
  }
}

100

101

102

103

104

105

106

107

108

import NewsItem from './NewsItem';

import LoadMoreLayout from './LoadMoreLayout';

import RefreshLayout from './RefreshLayout';

import { NewsData } from '../viewmodel/NewsData';

import Constants, { PageState } from '../common/constants/Constants';

import NewsViewModel from '../viewmodel/NewsViewModel';

import { showToast } from '../common/utils/ToastUtil';

import FailureLayout from './FailureLayout';

import LoadingLayout from './LoadingLayout';

import NoMoreLayout from './NoMoreLayout';

import RefreshListViewModel from '../viewmodel/RefreshListViewModel';

/**

* The news list component.

@Component

export default struct NewsList {

index: number = 0;

@Watch('changeCategory') @Link currentIndex: number;

@State refreshStore: RefreshListViewModel = new RefreshListViewModel();

changeCategory() {

if (this.currentIndex !== this.index) {

return;

}

this.refreshStore.currentPage = 1;

NewsViewModel.getNewsList(this.refreshStore.currentPage, this.refreshStore.pageSize).then((data: NewsData[]) => {

this.refreshStore.pageState = PageState.Success;

if (data.length === this.refreshStore.pageSize) {

this.refreshStore.currentPage++;

this.refreshStore.hasMore = true;

} else {

this.refreshStore.hasMore = false;

}

this.refreshStore.newsData = data;

}).catch((err: string | Resource) => {

showToast(err);

this.refreshStore.pageState = PageState.Fail;

});

}

aboutToAppear() {

// Load data.

this.changeCategory();

}

reloadAction() {

this.refreshStore.pageState = PageState.Loading;

this.changeCategory();

}

build() {

Column() {

if (this.refreshStore.pageState === PageState.Loading) {

LoadingLayout()

} else if (this.refreshStore.pageState === PageState.Success) {

this.ListLayout()

} else {

FailureLayout({ reloadAction: () => {

this.reloadAction();

} })

}

.width(Constants.FULL_PERCENT)

.height(Constants.FULL_PERCENT)

.justifyContent(FlexAlign.Center)

.onTouch((event?: TouchEvent) => {

if (event) {

if (this.refreshStore.pageState === PageState.Success) {

this.refreshStore.listTouchEvent(event);

}

})

}

@Builder ListLayout() {

List({ space: Constants.LIST_SPACE }) {

ListItem() {

RefreshLayout({ refreshLoadingClass: this.refreshStore.refreshLayoutClass })

}

ForEach(this.refreshStore.newsData, (item: NewsData) => {

ListItem() {

NewsItem({ newsData: item })

}

.backgroundColor($r('app.color.white'))

.borderRadius($r('app.float.item_border_radius'))

}, (item: NewsData, index?: number) => JSON.stringify(item) + index)

ListItem() {

if (this.refreshStore.hasMore) {

LoadMoreLayout({ loadMoreLayoutClass: this.refreshStore.loadingMoreClass })

} else {

NoMoreLayout()

}

.width(Constants.FULL_PERCENT)

.height(Constants.FULL_PERCENT)

.padding({ left: $r('app.float.common_padding'), right: $r('app.float.common_padding') })

.backgroundColor($r('app.color.listColor'))

.edgeEffect(EdgeEffect.None)

.onScrollIndex((start: number, end: number) => {

// Listen to the first index of the current list.

this.refreshStore.startIndex = start;

this.refreshStore.endIndex = end;

})

}

NoMoreLayout.ets


/**
 * The No more data layout component.
 */
import Constants from '../common/constants/Constants';

@Component
export default struct NoMoreLayout {
  build() {
    Row() {
      Text($r('app.string.prompt_message'))
        .margin({ left: $r('app.float.normal_padding') })
        .fontSize($r('app.float.title_font'))
        .textAlign(TextAlign.Center)
    }
    .width(Constants.FULL_PERCENT)
    .justifyContent(FlexAlign.Center)
    .height(Constants.CUSTOM_LAYOUT_HEIGHT)
  }
}

/**

* The No more data layout component.

import Constants from '../common/constants/Constants';

@Component

export default struct NoMoreLayout {

build() {

Row() {

Text($r('app.string.prompt_message'))

.margin({ left: $r('app.float.normal_padding') })

.fontSize($r('app.float.title_font'))

.textAlign(TextAlign.Center)

}

.width(Constants.FULL_PERCENT)

.justifyContent(FlexAlign.Center)

.height(Constants.CUSTOM_LAYOUT_HEIGHT)

}

RefreshLayout.ets


import RefreshLoadingClass from '../viewmodel/RefreshLoadingClass';
import Constants from '../common/constants/Constants';

/**
 * The refresh layout component.
 */
@Component
export default struct RefreshLayout {
  @ObjectLink refreshLoadingClass: RefreshLoadingClass;

  build() {
    Row() {
      Image(this.refreshLoadingClass.imageSrc)
        .width($r('app.float.refresh_img_size'))
        .height($r('app.float.refresh_img_size'))

      Text(this.refreshLoadingClass.textValue)
        .margin({ left: $r('app.float.normal_padding') })
        .fontSize($r('app.float.title_font'))
        .textAlign(TextAlign.Center)
    }
    .clip(true)
    .width(Constants.FULL_PERCENT)
    .justifyContent(FlexAlign.Center)
    .height(this.refreshLoadingClass.heightValue)
  }
}

import RefreshLoadingClass from '../viewmodel/RefreshLoadingClass';

import Constants from '../common/constants/Constants';

/**

* The refresh layout component.

@Component

export default struct RefreshLayout {

@ObjectLink refreshLoadingClass: RefreshLoadingClass;

build() {

Row() {

Image(this.refreshLoadingClass.imageSrc)

.width($r('app.float.refresh_img_size'))

.height($r('app.float.refresh_img_size'))

Text(this.refreshLoadingClass.textValue)

.margin({ left: $r('app.float.normal_padding') })

.fontSize($r('app.float.title_font'))

.textAlign(TextAlign.Center)

}

.clip(true)

.width(Constants.FULL_PERCENT)

.justifyContent(FlexAlign.Center)

.height(this.refreshLoadingClass.heightValue)

}

UploadingLayout.ets


import Constants from '../common/constants/Constants';

@Component
export default struct UploadingLayout {

  build() {
    Column() {
      Image($r('app.media.ic_pull_up_load'))
        .width($r('app.float.btn_size'))
        .height($r('app.float.btn_size'))
      Text($r('app.string.uploading_text'))
        .margin({ top: $r('app.float.common_padding') })
        .fontSize($r('app.float.title_font'))
        .fontColor($r('app.color.title_color'))
        .textAlign(TextAlign.Center)
    }
    .width(Constants.FULL_PERCENT)
    .height(Constants.FULL_PERCENT)
    .justifyContent(FlexAlign.Center)
  }
}

import Constants from '../common/constants/Constants';

@Component

export default struct UploadingLayout {

build() {

Column() {

Image($r('app.media.ic_pull_up_load'))

.width($r('app.float.btn_size'))

.height($r('app.float.btn_size'))

Text($r('app.string.uploading_text'))

.margin({ top: $r('app.float.common_padding') })

.fontSize($r('app.float.title_font'))

.fontColor($r('app.color.title_color'))

.textAlign(TextAlign.Center)

}

.width(Constants.FULL_PERCENT)

.height(Constants.FULL_PERCENT)

.justifyContent(FlexAlign.Center)

}

viewmodel

GlobalContext.ets


export class GlobalContext {
  private constructor() { }
  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}

export class GlobalContext {

private constructor() { }

private static instance: GlobalContext;

private _objects = new Map<string, Object>();

public static getContext(): GlobalContext {

if (!GlobalContext.instance) {

GlobalContext.instance = new GlobalContext();

}

return GlobalContext.instance;

}

getObject(value: string): Object | undefined {

return this._objects.get(value);

}

setObject(key: string, objectClass: Object): void {

this._objects.set(key, objectClass);

}

NewsData.ets


/**
 * News list item info.
 */
export class NewsData {
  /**
   * News list item title.
   */
  title: string = '';

  /**
   * News list item content.
   */
  content: string = '';

  /**
   * News list item imagesUrl.
   */
  imagesUrl: Array<NewsFile> = [new NewsFile()];

  /**
   * News list item source.
   */
  source: string = '';
}

/**
 * News image list item info.
 */
export class NewsFile {
  /**
   * News image list item id.
   */
  id: number = 0;

  /**
   * News image list item url.
   */
  url:  | Object | ArrayBuffer = '';

  /**
   * News image list item type.
   */
  type: number = 0;

  /**
   * News image list item newsId.
   */
  newsId: number = 0;
}

/**

* News list item info.

export class NewsData {

/**

* News list item title.

title: string = '';

/**

* News list item content.

content: string = '';

/**

* News list item imagesUrl.

imagesUrl: Array<NewsFile> = [new NewsFile()];

/**

* News list item source.

source: string = '';

}

/**

* News image list item info.

export class NewsFile {

/**

* News image list item id.

id: number = 0;

/**

* News image list item url.

url: | Object | ArrayBuffer = '';

/**

* News image list item type.

type: number = 0;

/**

* News image list item newsId.

newsId: number = 0;

}

NewsTypeModel.ets


export default  class NewsTypeBean {
  id: number;
  name: ResourceStr;

  constructor(id: number, name: ResourceStr) {
    this.id = id;
    this.name = name;
  }
}

export default class NewsTypeBean {

id: number;

constructor(id: number, name: ResourceStr) {

this.id = id;

this.name = name;

}

NewsTypeViewModel.ets


import NewsTypeBean from './NewsTypeModel'
import ResponseResult from './ResponseResult';
import Constants from '../common/constants/Constants';
import { httpRequestGet } from '../common/utils/HttpUtil';

const DEFAULT_NEWS_TYPES: NewsTypeBean[] = [
  new NewsTypeBean(0, $r('app.string.tab_all')),
  new NewsTypeBean(1, $r('app.string.tab_domestic')),
  new NewsTypeBean(2, $r('app.string.tab_international')),
  new NewsTypeBean(3, $r('app.string.tab_fun')),
  new NewsTypeBean(4, $r('app.string.tab_military')),
  new NewsTypeBean(5, $r('app.string.tab_sports')),
  new NewsTypeBean(6, $r('app.string.tab_science'))
];

class NewsTypeViewModel {
  /**
   * Get news type list from server.
   *
   * @return NewsTypeBean[] newsTypeList
   */
  getNewsTypeList(): Promise<NewsTypeBean[]> {
    return new Promise((resolve: Function) => {
      let url = `${Constants.SERVER}/${Constants.GET_NEWS_TYPE}`;
      httpRequestGet(url).then((data: ResponseResult) => {
        if (data.code === Constants.SERVER_CODE_SUCCESS) {
          resolve(data.data);
        } else {
          resolve(DEFAULT_NEWS_TYPES);
        }
      }).catch(() => {
        resolve(DEFAULT_NEWS_TYPES);
      });
    });
  }

  /**
   * Get default news type list.
   *
   * @return NewsTypeBean[] newsTypeList
   */
  getDefaultTypeList(): NewsTypeBean[] {
    return DEFAULT_NEWS_TYPES;
  }
}

let newsTypeViewModel = new NewsTypeViewModel();

export default newsTypeViewModel as NewsTypeViewModel;

import NewsTypeBean from './NewsTypeModel'

import ResponseResult from './ResponseResult';

import Constants from '../common/constants/Constants';

import { httpRequestGet } from '../common/utils/HttpUtil';

const DEFAULT_NEWS_TYPES: NewsTypeBean[] = [

new NewsTypeBean(0, $r('app.string.tab_all')),

new NewsTypeBean(1, $r('app.string.tab_domestic')),

new NewsTypeBean(2, $r('app.string.tab_international')),

new NewsTypeBean(3, $r('app.string.tab_fun')),

new NewsTypeBean(4, $r('app.string.tab_military')),

new NewsTypeBean(5, $r('app.string.tab_sports')),

new NewsTypeBean(6, $r('app.string.tab_science'))

];

class NewsTypeViewModel {

/**

* Get news type list from server.

* @return NewsTypeBean[] newsTypeList

getNewsTypeList(): Promise<NewsTypeBean[]> {

return new Promise((resolve: Function) => {

let url = `${Constants.SERVER}/${Constants.GET_NEWS_TYPE}`;

httpRequestGet(url).then((data: ResponseResult) => {

if (data.code === Constants.SERVER_CODE_SUCCESS) {

resolve(data.data);

} else {

resolve(DEFAULT_NEWS_TYPES);

}

}).catch(() => {

resolve(DEFAULT_NEWS_TYPES);

});

}

/**

* Get default news type list.

* @return NewsTypeBean[] newsTypeList

getDefaultTypeList(): NewsTypeBean[] {

return DEFAULT_NEWS_TYPES;

}

let newsTypeViewModel = new NewsTypeViewModel();

export default newsTypeViewModel as NewsTypeViewModel;

NewsViewModel.ets


import { NewsData } from './NewsData';
import ResponseResult from './ResponseResult';
import Constants from '../common/constants/Constants';
import { httpRequestGet, httpRequestPost } from '../common/utils/HttpUtil';
import Logger from '../common/utils/Logger';

class NewsViewModel {
  /**
   * Get news type list from server.
   *
   * @return NewsData[] newsDataList
   */
  getNewsList(currentPage: number, pageSize: number): Promise<NewsData[]> {
    return new Promise(async (resolve: Function, reject: Function) => {
      let url = `${Constants.SERVER}/${Constants.GET_NEWS_LIST}`;
      url += '?currentPage=' + currentPage + '&pageSize=' + pageSize;
      httpRequestGet(url).then((data: ResponseResult) => {
        if (data.code === Constants.SERVER_CODE_SUCCESS) {
          resolve(data.data);
        } else {
          Logger.error('getNewsList failed', JSON.stringify(data));
          reject($r('app.string.page_none_msg'));
        }
      }).catch((err: Error) => {
        Logger.error('getNewsList failed', JSON.stringify(err));
        reject($r('app.string.http_error_message'));
      });
    });
  }

  /**
   * Upload news data.
   *
   * @param newsData
   * @returns NewsData[] newsDataList
   */
  uploadNews(newsData: NewsData): Promise<NewsData[]> {
    return new Promise((resolve: Function, reject: Function) => {
      let url = `${Constants.SERVER}/${Constants.UPLOAD_NEWS}`;
      httpRequestPost(url, newsData).then((result: ResponseResult) => {
        if (result && result.code === Constants.SERVER_CODE_SUCCESS) {
          resolve(result.data);
        } else {
          reject($r('app.string.upload_error_message'));
        }
      }).catch((err: Error) => {
        Logger.error('uploadNews failed', JSON.stringify(err));
        reject($r('app.string.upload_error_message'));
      });
    });
  }
}

let newsViewModel = new NewsViewModel();

export default newsViewModel as NewsViewModel;

import { NewsData } from './NewsData';

import ResponseResult from './ResponseResult';

import Constants from '../common/constants/Constants';

import { httpRequestGet, httpRequestPost } from '../common/utils/HttpUtil';

import Logger from '../common/utils/Logger';

class NewsViewModel {

/**

* Get news type list from server.

* @return NewsData[] newsDataList

getNewsList(currentPage: number, pageSize: number): Promise<NewsData[]> {

return new Promise(async (resolve: Function, reject: Function) => {

let url = `${Constants.SERVER}/${Constants.GET_NEWS_LIST}`;

url += '?currentPage=' + currentPage + '&pageSize=' + pageSize;

httpRequestGet(url).then((data: ResponseResult) => {

if (data.code === Constants.SERVER_CODE_SUCCESS) {

resolve(data.data);

} else {

Logger.error('getNewsList failed', JSON.stringify(data));

reject($r('app.string.page_none_msg'));

}

}).catch((err: Error) => {

Logger.error('getNewsList failed', JSON.stringify(err));

reject($r('app.string.http_error_message'));

});

}

/**

* Upload news data.

* @param newsData

* @returns NewsData[] newsDataList

uploadNews(newsData: NewsData): Promise<NewsData[]> {

return new Promise((resolve: Function, reject: Function) => {

let url = `${Constants.SERVER}/${Constants.UPLOAD_NEWS}`;

httpRequestPost(url, newsData).then((result: ResponseResult) => {

if (result && result.code === Constants.SERVER_CODE_SUCCESS) {

resolve(result.data);

} else {

reject($r('app.string.upload_error_message'));

}

}).catch((err: Error) => {

Logger.error('uploadNews failed', JSON.stringify(err));

reject($r('app.string.upload_error_message'));

});

}

let newsViewModel = new NewsViewModel();

export default newsViewModel as NewsViewModel;

RefreshListViewModel.ets


import { promptAction } from '@kit.ArkUI';
import Constants, { RefreshState, RefreshConstant, PageState } from '../common/constants/Constants';
import NewsViewModel from './NewsViewModel';
import { NewsData } from './NewsData';
import RefreshLoadingClass from './RefreshLoadingClass';

@Observed
export default class RefreshListViewModel {
  private downY = 0;
  private lastMoveY = 0;
  private isRefreshing: boolean = false;
  private isCanRefresh = false;
  private isPullRefreshOperation = false;
  private isLoading: boolean = false;
  private isCanLoadMore = false;
  public startIndex = 0;
  public endIndex = 0;
  public newsData: Array<NewsData> = [];
  public currentPage: number = 1;
  public pageSize: number = 4;
  public offsetY: number = 0;
  public hasMore: boolean = true;
  public refreshLayoutClass: RefreshLoadingClass = new RefreshLoadingClass($r('app.media.ic_pull_down_refresh'),
    $r('app.string.pull_down_refresh_text'), 0);
  public loadingMoreClass: RefreshLoadingClass = new RefreshLoadingClass($r('app.media.ic_pull_up_load'),
    $r('app.string.pull_up_load_text'), 0);
  public pageState: number = PageState.Loading;

  listTouchEvent(event: TouchEvent) {
    switch (event.type) {
      case TouchType.Down:
        this.downY = event.touches[0].y;
        this.lastMoveY = event.touches[0].y;
        break;
      case TouchType.Move:
        if (this.isRefreshing || this.isLoading) {
          return;
        }
        let isDownPull = event.touches[0].y - this.lastMoveY > 0;
        if ((isDownPull || this.isPullRefreshOperation) && !this.isCanLoadMore) {
          // Touch move pull refresh.
          this.touchMovePullRefresh(event);
        } else {
          // Touch move load more.
          this.touchMoveLoadMore(event);
        }
        this.lastMoveY = event.touches[0].y;
        break;
      case TouchType.Cancel:
        break;
      case TouchType.Up:
        if (this.isRefreshing || this.isLoading) {
          return;
        }
        if (this.isPullRefreshOperation) {
          // Touch up pull refresh.
          this.touchUpPullRefresh();
        } else {
          // Touch up load more.
          this.touchUpLoadMore();
        }
        break;
      default:
        break;
    }
  }

  touchMovePullRefresh(event: TouchEvent) {
    if (this.startIndex === 0) {
      this.isPullRefreshOperation = true;
      let height = vp2px(Constants.CUSTOM_LAYOUT_HEIGHT);
      this.offsetY = event.touches[0].y - this.downY;
      // Check offsetY to Refresh.
      if (this.offsetY >= height) {
        this.pullRefreshState(RefreshState.Release);
        this.offsetY = height + this.offsetY * Constants.Y_OFF_SET_COEFFICIENT;
      } else {
        this.pullRefreshState(RefreshState.DropDown);
      }
      if (this.offsetY < 0) {
        this.offsetY = 0;
        this.isPullRefreshOperation = false;
      }
    }
  }

  touchUpPullRefresh() {
    if (this.isCanRefresh) {
      this.offsetY = vp2px(Constants.CUSTOM_LAYOUT_HEIGHT);
      this.pullRefreshState(RefreshState.Refreshing);
      this.currentPage = 1;
      setTimeout(() => {
        NewsViewModel.getNewsList(this.currentPage, this.pageSize).then((data: NewsData[]) => {
          if (data.length === this.pageSize) {
            this.currentPage++;
            this.hasMore = true;
          } else {
            this.hasMore = false;
          }
          this.newsData = data;
          this.closeRefresh(true);
        }).catch((errMsg: string | Resource) => {
          promptAction.showToast({ message: errMsg });
          this.closeRefresh(false);
        })
      }, Constants.DELAY_TIME);
    } else {
      this.closeRefresh(false);
    }
  }

  pullRefreshState(state: number) {
    switch (state) {
      case RefreshState.DropDown:
        this.isCanRefresh = false;
        this.isRefreshing = false;
        this.refreshLayoutClass = new RefreshLoadingClass($r('app.media.ic_pull_down_refresh'),
          $r('app.string.pull_down_refresh_text'), Constants.CUSTOM_LAYOUT_HEIGHT)
        break;
      case RefreshState.Release:
        this.refreshLayoutClass.imageSrc = $r('app.media.ic_pull_up_refresh');
        this.refreshLayoutClass.textValue = $r('app.string.release_refresh_text');
        this.isCanRefresh = true;
        this.isRefreshing = false;
        break;
      case RefreshState.Refreshing:
        this.offsetY = vp2px(this.refreshLayoutClass.heightValue);
        this.refreshLayoutClass.imageSrc = $r('app.media.ic_pull_up_load');
        this.refreshLayoutClass.textValue = $r('app.string.refreshing_text');
        this.isCanRefresh = true;
        this.isRefreshing = true;
        break;
      case RefreshState.Success:
        this.refreshLayoutClass.imageSrc = $r('app.media.ic_succeed_refresh');
        this.refreshLayoutClass.textValue = $r('app.string.refresh_success_text');
        this.isCanRefresh = true;
        this.isRefreshing = true;
        break;
      case RefreshState.Fail:
        this.refreshLayoutClass.imageSrc = $r('app.media.ic_fail_refresh');
        this.refreshLayoutClass.textValue = $r('app.string.refresh_fail_text');
        this.isCanRefresh = true;
        this.isRefreshing = true;
        break;
      default:
        break;
    }
  }

  closeRefresh(isRefreshSuccess: boolean) {
    setTimeout(() => {
      let delay = RefreshConstant.DELAY_PULL_DOWN_REFRESH;
      if (this.isCanRefresh) {
        this.pullRefreshState(isRefreshSuccess ? RefreshState.Success : RefreshState.Fail);
        delay = RefreshConstant.DELAY_SHRINK_ANIMATION_TIME;
      }
      animateTo({
        duration: RefreshConstant.CLOSE_PULL_DOWN_REFRESH_TIME,
        delay: delay,
        onFinish: () => {
          this.pullRefreshState(RefreshState.DropDown);
          this.refreshLayoutClass.heightValue = 0;
          this.isPullRefreshOperation = false;
        }
      }, () => {
        this.offsetY = 0;
      });
    }, this.isCanRefresh ? Constants.DELAY_ANIMATION_DURATION : 0);
  }

  touchMoveLoadMore(event: TouchEvent) {
    if (this.endIndex >= this.newsData.length - 1) {
      this.offsetY = event.touches[0].y - this.downY;
      if (Math.abs(this.offsetY) > vp2px(Constants.CUSTOM_LAYOUT_HEIGHT) / 2) {
        this.isCanLoadMore = true;
        this.loadingMoreClass.heightValue = Constants.CUSTOM_LAYOUT_HEIGHT;
        this.offsetY = -vp2px(Constants.CUSTOM_LAYOUT_HEIGHT) + this.offsetY * Constants.Y_OFF_SET_COEFFICIENT;
      }
    }
  }

  touchUpLoadMore() {
    if (this.isCanLoadMore && this.hasMore) {
      this.isLoading = true;
      setTimeout(() => {
        NewsViewModel.getNewsList(this.currentPage, this.pageSize).then((data: NewsData[]) => {
          if (data.length === this.pageSize) {
            this.currentPage++;
            this.hasMore = true;
          } else {
            this.hasMore = false;
          }
          this.newsData = this.newsData.concat(data);
        }).catch((errMsg: string | Resource) => {
          promptAction.showToast({ message: errMsg });
        })
        this.closeLoadMore();
      }, Constants.DELAY_TIME);
    } else {
      this.closeLoadMore();
    }
  }

  closeLoadMore() {
    this.isCanLoadMore = false;
    this.isLoading = false;
    this.loadingMoreClass.heightValue = 0;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

import { promptAction } from '@kit.ArkUI';

import Constants, { RefreshState, RefreshConstant, PageState } from '../common/constants/Constants';

import NewsViewModel from './NewsViewModel';

import { NewsData } from './NewsData';

import RefreshLoadingClass from './RefreshLoadingClass';

@Observed

export default class RefreshListViewModel {

private downY = 0;

private lastMoveY = 0;

private isRefreshing: boolean = false;

private isCanRefresh = false;

private isPullRefreshOperation = false;

private isLoading: boolean = false;

private isCanLoadMore = false;

public startIndex = 0;

public endIndex = 0;

public newsData: Array<NewsData> = [];

public currentPage: number = 1;

public pageSize: number = 4;

public offsetY: number = 0;

public hasMore: boolean = true;

public refreshLayoutClass: RefreshLoadingClass = new RefreshLoadingClass($r('app.media.ic_pull_down_refresh'),

$r('app.string.pull_down_refresh_text'), 0);

public loadingMoreClass: RefreshLoadingClass = new RefreshLoadingClass($r('app.media.ic_pull_up_load'),

$r('app.string.pull_up_load_text'), 0);

public pageState: number = PageState.Loading;

listTouchEvent(event: TouchEvent) {

switch (event.type) {

case TouchType.Down:

this.downY = event.touches[0].y;

this.lastMoveY = event.touches[0].y;

break;

case TouchType.Move:

if (this.isRefreshing || this.isLoading) {

return;

}

let isDownPull = event.touches[0].y - this.lastMoveY > 0;

if ((isDownPull || this.isPullRefreshOperation) && !this.isCanLoadMore) {

// Touch move pull refresh.

this.touchMovePullRefresh(event);

} else {

// Touch move load more.

this.touchMoveLoadMore(event);

}

this.lastMoveY = event.touches[0].y;

break;

case TouchType.Cancel:

break;

case TouchType.Up:

if (this.isRefreshing || this.isLoading) {

return;

}

if (this.isPullRefreshOperation) {

// Touch up pull refresh.

this.touchUpPullRefresh();

} else {

// Touch up load more.

this.touchUpLoadMore();

}

break;

default:

break;

}

touchMovePullRefresh(event: TouchEvent) {

if (this.startIndex === 0) {

this.isPullRefreshOperation = true;

let height = vp2px(Constants.CUSTOM_LAYOUT_HEIGHT);

this.offsetY = event.touches[0].y - this.downY;

// Check offsetY to Refresh.

if (this.offsetY >= height) {

this.pullRefreshState(RefreshState.Release);

this.offsetY = height + this.offsetY * Constants.Y_OFF_SET_COEFFICIENT;

} else {

this.pullRefreshState(RefreshState.DropDown);

}

if (this.offsetY < 0) {

this.offsetY = 0;

this.isPullRefreshOperation = false;

}

touchUpPullRefresh() {

if (this.isCanRefresh) {

this.offsetY = vp2px(Constants.CUSTOM_LAYOUT_HEIGHT);

this.pullRefreshState(RefreshState.Refreshing);

this.currentPage = 1;

setTimeout(() => {

NewsViewModel.getNewsList(this.currentPage, this.pageSize).then((data: NewsData[]) => {

if (data.length === this.pageSize) {

this.currentPage++;

this.hasMore = true;

} else {

this.hasMore = false;

}

this.newsData = data;

this.closeRefresh(true);

}).catch((errMsg: string | Resource) => {

promptAction.showToast({ message: errMsg });

this.closeRefresh(false);

})

}, Constants.DELAY_TIME);

} else {

this.closeRefresh(false);

}

pullRefreshState(state: number) {

switch (state) {

case RefreshState.DropDown:

this.isCanRefresh = false;

this.isRefreshing = false;

this.refreshLayoutClass = new RefreshLoadingClass($r('app.media.ic_pull_down_refresh'),

$r('app.string.pull_down_refresh_text'), Constants.CUSTOM_LAYOUT_HEIGHT)

break;

case RefreshState.Release:

this.refreshLayoutClass.imageSrc = $r('app.media.ic_pull_up_refresh');

this.refreshLayoutClass.textValue = $r('app.string.release_refresh_text');

this.isCanRefresh = true;

this.isRefreshing = false;

break;

case RefreshState.Refreshing:

this.offsetY = vp2px(this.refreshLayoutClass.heightValue);

this.refreshLayoutClass.imageSrc = $r('app.media.ic_pull_up_load');

this.refreshLayoutClass.textValue = $r('app.string.refreshing_text');

this.isCanRefresh = true;

this.isRefreshing = true;

break;

case RefreshState.Success:

this.refreshLayoutClass.imageSrc = $r('app.media.ic_succeed_refresh');

this.refreshLayoutClass.textValue = $r('app.string.refresh_success_text');

this.isCanRefresh = true;

this.isRefreshing = true;

break;

case RefreshState.Fail:

this.refreshLayoutClass.imageSrc = $r('app.media.ic_fail_refresh');

this.refreshLayoutClass.textValue = $r('app.string.refresh_fail_text');

this.isCanRefresh = true;

this.isRefreshing = true;

break;

default:

break;

}

closeRefresh(isRefreshSuccess: boolean) {

setTimeout(() => {

let delay = RefreshConstant.DELAY_PULL_DOWN_REFRESH;

if (this.isCanRefresh) {

this.pullRefreshState(isRefreshSuccess ? RefreshState.Success : RefreshState.Fail);

delay = RefreshConstant.DELAY_SHRINK_ANIMATION_TIME;

}

animateTo({

duration: RefreshConstant.CLOSE_PULL_DOWN_REFRESH_TIME,

delay: delay,

onFinish: () => {

this.pullRefreshState(RefreshState.DropDown);

this.refreshLayoutClass.heightValue = 0;

this.isPullRefreshOperation = false;

}

}, () => {

this.offsetY = 0;

});

}, this.isCanRefresh ? Constants.DELAY_ANIMATION_DURATION : 0);

}

touchMoveLoadMore(event: TouchEvent) {

if (this.endIndex >= this.newsData.length - 1) {

this.offsetY = event.touches[0].y - this.downY;

if (Math.abs(this.offsetY) > vp2px(Constants.CUSTOM_LAYOUT_HEIGHT) / 2) {

this.isCanLoadMore = true;

this.loadingMoreClass.heightValue = Constants.CUSTOM_LAYOUT_HEIGHT;

this.offsetY = -vp2px(Constants.CUSTOM_LAYOUT_HEIGHT) + this.offsetY * Constants.Y_OFF_SET_COEFFICIENT;

}

touchUpLoadMore() {

if (this.isCanLoadMore && this.hasMore) {

this.isLoading = true;

setTimeout(() => {

NewsViewModel.getNewsList(this.currentPage, this.pageSize).then((data: NewsData[]) => {

if (data.length === this.pageSize) {

this.currentPage++;

this.hasMore = true;

} else {

this.hasMore = false;

}

this.newsData = this.newsData.concat(data);

}).catch((errMsg: string | Resource) => {

promptAction.showToast({ message: errMsg });

})

this.closeLoadMore();

}, Constants.DELAY_TIME);

} else {

this.closeLoadMore();

}

closeLoadMore() {

this.isCanLoadMore = false;

this.isLoading = false;

this.loadingMoreClass.heightValue = 0;

}

RefreshLoadingClass.ets


/**
 * Custom refresh load layout data.
 */
@Observed
export default class RefreshLoadingClass {

  /**
   * Custom refresh load layout imageSrc.
   */
  imageSrc: Resource;

  /**
   * Custom refresh load layout textValue.
   */
  textValue: Resource;

  /**
   * Custom refresh load layout heightValue.
   */
  heightValue: number;

  constructor(imageSrc: Resource, textValue: Resource, heightValue: number) {
    this.imageSrc = imageSrc;
    this.textValue = textValue;
    this.heightValue = heightValue;
  }
}

/**

* Custom refresh load layout data.

@Observed

export default class RefreshLoadingClass {

/**

* Custom refresh load layout imageSrc.

imageSrc: Resource;

/**

* Custom refresh load layout textValue.

textValue: Resource;

/**

* Custom refresh load layout heightValue.

heightValue: number;

constructor(imageSrc: Resource, textValue: Resource, heightValue: number) {

this.imageSrc = imageSrc;

this.textValue = textValue;

this.heightValue = heightValue;

}

ResponseResult.ets


/**
 * Data returned by the network request.
 */
export default class ResponseResult {
  /**
   * Code returned by the network request: success, fail.
   */
  code: string;

  /**
   * Message returned by the network request.
   */
  msg: string | Resource;

  /**
   * Data returned by the network request.
   */
  data: string | Object | ArrayBuffer;

  constructor() {
    this.code = '';
    this.msg = '';
    this.data = '';
  }
}

/**

* Data returned by the network request.

export default class ResponseResult {

/**

* Code returned by the network request: success, fail.

code: string;

/**

* Message returned by the network request.

msg: string | Resource;

/**

* Data returned by the network request.

data: string | Object | ArrayBuffer;

constructor() {

this.code = '';

this.msg = '';

this.data = '';

}

配置

module.json5

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone"
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ],
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string:reason",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "inuse"
        }
      }
    ]
  }
}

{

"module": {

"name": "entry",

"type": "entry",

"description": "$string:module_desc",

"mainElement": "EntryAbility",

"deviceTypes": [

"phone"

"deliveryWithInstall": true,

"installationFree": false,

"pages": "$profile:main_pages",

"abilities": [

{

"name": "EntryAbility",

"srcEntry": "./ets/entryability/EntryAbility.ets",

"description": "$string:EntryAbility_desc",

"icon": "$media:icon",

"label": "$string:EntryAbility_label",

"startWindowIcon": "$media:icon",

"startWindowBackground": "$color:start_window_background",

"exported": true,

"skills": [

{

"entities": [

"entity.system.home"

"actions": [

"action.system.home"

]

}

]

}

"requestPermissions": [

{

"name": "ohos.permission.INTERNET",

"reason": "$string:reason",

"usedScene": {

"abilities": [

"EntryAbility"

"when": "inuse"

}

]

}

下载源码

NewsRelease 下载

官网地址

新闻发布

往HarmonyOS模拟器相册添加图片

继续阅读 →

HarmonyOS第一课07：案例-HTTPS请求过程

继续阅读 →

HarmonyOS第一课07：案例-新闻数据加载

继续阅读 →

HarmonyOS第一课07：HTTP数据请求

继续阅读 →

HarmonyOS第一课06：设置组件导航

关联章节

说明：本章代码基于HarmonyOS第一课06：通过结构化数据构建页面代码

页面效果

文件变动

代码

default

pages/Index.ets

import { QuickStartPage } from '@ohos/quickstart'
import { CourseLearning } from '@ohos/learning'
import { KnowledgeMap } from '@ohos/map'

@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private tabsController: TabsController = new TabsController()

  @Builder
  tabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource, unselectIcon: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedIcon : unselectIcon)
        .width(24)
        .height(24)

      Text(title)
        .fontFamily('HarmonyHeiTi-Medium')
        .fontSize(10)
        .fontColor(this.currentIndex === targetIndex ? '#0A59F7' : 'rgba(0,0,0,0.6)')
        .textAlign(TextAlign.Center)
        .lineHeight(14)
        .fontWeight(500)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex
      this.tabsController.changeIndex(targetIndex)
    })
  }

  build() {
    Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
      TabContent() {
        QuickStartPage()
      }
      .tabBar(this.tabBarBuilder('快速入门', 0, $r('app.media.ic_01_on'), $r('app.media.ic_01_off')))

      TabContent() {
        CourseLearning()
      }
      .tabBar(this.tabBarBuilder('课程学习', 1, $r('app.media.ic_02_on'), $r('app.media.ic_02_off')))

      TabContent() {
        KnowledgeMap()
      }
      .tabBar(this.tabBarBuilder('知识地图', 2, $r('app.media.ic_03_on'), $r('app.media.ic_03_off')))

    }
    .scrollable(false)
    .vertical(false)
    .divider({
      strokeWidth: 0.5,
      color: '#0D182431'
    })
    .backgroundColor('#F1F3F5')
    .padding({ top: 36, bottom: 28 })
  }
}

import { QuickStartPage } from '@ohos/quickstart'

import { CourseLearning } from '@ohos/learning'

import { KnowledgeMap } from '@ohos/map'

@Entry

@Component

struct Index {

@State currentIndex: number = 0

private tabsController: TabsController = new TabsController()

@Builder

tabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource, unselectIcon: Resource) {

Column() {

Image(this.currentIndex === targetIndex ? selectedIcon : unselectIcon)

.width(24)

.height(24)

Text(title)

.fontFamily('HarmonyHeiTi-Medium')

.fontSize(10)

.fontColor(this.currentIndex === targetIndex ? '#0A59F7' : 'rgba(0,0,0,0.6)')

.textAlign(TextAlign.Center)

.lineHeight(14)

.fontWeight(500)

}

.width('100%')

.height('100%')

.justifyContent(FlexAlign.Center)

.alignItems(HorizontalAlign.Center)

.onClick(() => {

this.currentIndex = targetIndex

this.tabsController.changeIndex(targetIndex)

})

}

build() {

Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {

TabContent() {

QuickStartPage()

}

.tabBar(this.tabBarBuilder('快速入门', 0, $r('app.media.ic_01_on'), $r('app.media.ic_01_off')))

TabContent() {

CourseLearning()

}

.tabBar(this.tabBarBuilder('课程学习', 1, $r('app.media.ic_02_on'), $r('app.media.ic_02_off')))

TabContent() {

KnowledgeMap()

}

.tabBar(this.tabBarBuilder('知识地图', 2, $r('app.media.ic_03_on'), $r('app.media.ic_03_off')))

}

.scrollable(false)

.vertical(false)

.divider({

strokeWidth: 0.5,

color: '#0D182431'

})

.backgroundColor('#F1F3F5')

.padding({ top: 36, bottom: 28 })

}

map

pages/KnowledgeMap.ets

import { NavBarItemType, NavBarItem } from '../view/NavBarItem'
import { KnowledgeMapContent, Section } from '../view/KnowledgeMapContent'
import { BusinessError } from '@kit.BasicServicesKit'
import { util } from '@kit.ArkTS'

@Component
export struct KnowledgeMap {
  @State navBarList: NavBarItemType[] = [
    { order: '01', title: '准备与学习' },
    { order: '02', title: '构建应用' },
    { order: '03', title: '应用测试' },
    { order: '04', title: '上架' },
    { order: '05', title: '运营增长' },
    { order: '06', title: '商业变现' },
    { order: '07', title: '更多' }
  ]
  @State sections: Section[] = []
  @Provide('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack = new NavPathStack()
  @State currentNavBarIndex: number = -1

  @Builder
  PageMap(name: string) {
    if (name === 'KnowledgeMapContent') {
      KnowledgeMapContent({ section: this.sections[this.currentNavBarIndex] })
    }
  }

  private getSections() {
    try {
      getContext(this).resourceManager.getRawFileContent("MapData.json", (error: BusinessError, value: Uint8Array) => {
        const textDecoder = util.TextDecoder.create('utf-8')
        const res = textDecoder.decodeWithStream(value, {
          stream: false
        })
        this.sections = JSON.parse(res)
      })
    } catch (error) {
      console.error(`callback getRawFileContent failed, error is ${JSON.stringify(error)}`)
    }
  }

  aboutToAppear(): void {
    this.getSections()
  }

  build() {
    Navigation(this.knowledgeMapPageStack) {
      Scroll() {
        Column() {
          Text('知识地图')
            .fontFamily('HarmonyHeiTi-Bold')
            .fontSize(24)
            .fontColor(Color.Black)
            .textAlign(TextAlign.Start)
            .lineHeight(33)
            .fontWeight(700)
            .width('100%')

          Image($r('app.media.knowledge_map_banner'))
            .width('100%')
            .borderRadius(16)
            .margin({ top: 19, bottom: 8 })

          Text('通过循序渐进的学习路径，无经验和有经验的开发者都可以轻松掌握ArkTS语言声明式开发范式，体验更简洁、更友好的HarmonyOS应用开发旅程。')
            .fontFamily('HarmonyHeiti')
            .fontSize(14)
            .fontColor('rgba(0, 0, 0, 0.6)')
            .fontWeight(400)
            .textAlign(TextAlign.Start)

          List({ space: 12 }) {
            ForEach(this.navBarList, (item: NavBarItemType, index: number) => {
              ListItem() {
                NavBarItem({ navBarItem: item, currentNavBarIndex: this.currentNavBarIndex })
              }
              .width('100%')
            }, (item: NavBarItemType): string => item.title)
          }
          .width('100%')
          .margin({ top: 24 })
        }
        .padding({
          top: 12,
          right: 16,
          bottom: 12,
          left: 16
        })
        .backgroundColor("#F1F3F5")
      }
      .backgroundColor('#F1F3F5')
      .align(Alignment.TopStart)
      .constraintSize({ minHeight: '100%' })
      .edgeEffect(EdgeEffect.Spring)
    }
    .hideTitleBar(true)
    .navDestination(this.PageMap)
    .mode(NavigationMode.Stack)
  }
}

100

import { NavBarItemType, NavBarItem } from '../view/NavBarItem'

import { KnowledgeMapContent, Section } from '../view/KnowledgeMapContent'

import { BusinessError } from '@kit.BasicServicesKit'

import { util } from '@kit.ArkTS'

@Component

export struct KnowledgeMap {

@State navBarList: NavBarItemType[] = [

{ order: '01', title: '准备与学习' },

{ order: '02', title: '构建应用' },

{ order: '03', title: '应用测试' },

{ order: '04', title: '上架' },

{ order: '05', title: '运营增长' },

{ order: '06', title: '商业变现' },

{ order: '07', title: '更多' }

]

@State sections: Section[] = []

@Provide('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack = new NavPathStack()

@State currentNavBarIndex: number = -1

@Builder

PageMap(name: string) {

if (name === 'KnowledgeMapContent') {

KnowledgeMapContent({ section: this.sections[this.currentNavBarIndex] })

}

private getSections() {

try {

getContext(this).resourceManager.getRawFileContent("MapData.json", (error: BusinessError, value: Uint8Array) => {

const textDecoder = util.TextDecoder.create('utf-8')

const res = textDecoder.decodeWithStream(value, {

stream: false

})

this.sections = JSON.parse(res)

})

} catch (error) {

console.error(`callback getRawFileContent failed, error is ${JSON.stringify(error)}`)

}

aboutToAppear(): void {

this.getSections()

}

build() {

Navigation(this.knowledgeMapPageStack) {

Scroll() {

Column() {

Text('知识地图')

.fontFamily('HarmonyHeiTi-Bold')

.fontSize(24)

.fontColor(Color.Black)

.textAlign(TextAlign.Start)

.lineHeight(33)

.fontWeight(700)

.width('100%')

Image($r('app.media.knowledge_map_banner'))

.width('100%')

.borderRadius(16)

.margin({ top: 19, bottom: 8 })

Text('通过循序渐进的学习路径，无经验和有经验的开发者都可以轻松掌握ArkTS语言声明式开发范式，体验更简洁、更友好的HarmonyOS应用开发旅程。')

.fontFamily('HarmonyHeiti')

.fontSize(14)

.fontColor('rgba(0, 0, 0, 0.6)')

.fontWeight(400)

.textAlign(TextAlign.Start)

List({ space: 12 }) {

ForEach(this.navBarList, (item: NavBarItemType, index: number) => {

ListItem() {

NavBarItem({ navBarItem: item, currentNavBarIndex: this.currentNavBarIndex })

}

.width('100%')

}, (item: NavBarItemType): string => item.title)

}

.width('100%')

.margin({ top: 24 })

}

.padding({

top: 12,

right: 16,

bottom: 12,

left: 16

})

.backgroundColor("#F1F3F5")

}

.backgroundColor('#F1F3F5')

.align(Alignment.TopStart)

.constraintSize({ minHeight: '100%' })

.edgeEffect(EdgeEffect.Spring)

}

.hideTitleBar(true)

.navDestination(this.PageMap)

.mode(NavigationMode.Stack)

}

view/KnowledgeMapContent.ets

interface KnowledgeBaseItem {
  type: string,
  title: string
}

interface Material {
  subtitle: string,
  knowledgeBase: KnowledgeBaseItem[]
}

export interface Section {
  title: string,
  brief: string,
  materials: Material[]
}

const TypeMapIcon: Record<string, string> = {
  '指南': 'app.media.ic_guide',
  '准备': 'app.media.ic_prepare',
  '学习与获取证书': 'app.media.ic_medals',
  '视频教程': 'app.media.ic_video'
}

@Component
export struct KnowledgeMapContent {
  @Prop section: Section

  @Builder
  KnowledgeBlockLine(knowledgeBaseItem: KnowledgeBaseItem) {
    Row() {
      Image($r(TypeMapIcon[knowledgeBaseItem.type]))
        .width(20)
        .height(20)
      Column() {
        Text(knowledgeBaseItem.title)
          .fontFamily('HarmonyHeiTi-Medium')
          .fontSize(16)
          .fontWeight(500)

        Text(knowledgeBaseItem.type)
          .fontFamily('HarmonyHeiTi')
          .fontSize(14)
          .fontWeight(400)
      }
      .alignItems(HorizontalAlign.Start)
      .margin({ left: 18 })

      Blank()

      Image($r('app.media.ic_arrow'))
        .width(12)
        .height(24)
    }
    .width('100%')
    .height(64)
    .alignItems(VerticalAlign.Center)
  }

  @Builder
  KnowledgeBlock(material: Material) {
    Column() {
      Text(material.subtitle)
        .fontFamily('HarmonyHeiTi-Medium')
        .fontSize(14)
        .fontWeight(500)
        .margin({ bottom: 8 })

      List({ space: 12 }) {
        ForEach(material.knowledgeBase, (item: KnowledgeBaseItem, index: number) => {
          ListItem() {
            this.KnowledgeBlockLine(item)
          }
        }, (item: KnowledgeBaseItem, index: number) => item.title)
      }
      .backgroundColor(Color.White)
      .borderRadius(16)
      .padding({ left: 12, right: 12 })
      .divider({
        strokeWidth: 0.5,
        startMargin: 38,
        endMargin: 0,
        color: '#F2F2F2'
      })
    }
    .width('100%')
    .margin({ top: 28 })
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    NavDestination() {
      Scroll() {
        Column() {
          Text(this.section.title)
            .fontFamily('HarmonyHeiTi-Bold')
            .fontSize(20)
            .fontWeight(700)
            .fontColor(Color.Black)

          Text(this.section.brief)
            .fontFamily('HarmonyHeiTi')
            .fontSize(12)
            .fontColor('rgba(0, 0, 0, 0.6)')
            .textAlign(TextAlign.JUSTIFY)
            .fontWeight(400)
            .margin({ top: 12 })

          ForEach(this.section.materials, (material: Material) => {
            this.KnowledgeBlock(material)
          }, (material: Material, index: number) => material.subtitle)
        }
        .alignItems(HorizontalAlign.Start)
        .padding({
          top: 12,
          left: 16,
          bottom: 12,
          right: 16
        })
        .backgroundColor('#F1F3F5')
        .width('100%')
      }
      .align(Alignment.TopStart)
      .constraintSize({ minHeight: '100%' })
      .edgeEffect(EdgeEffect.Spring)
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.Auto)
      .backgroundColor('#F1F3F5')
    }
    .hideTitleBar(true)
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

interface KnowledgeBaseItem {

type: string,

title: string

}

interface Material {

subtitle: string,

knowledgeBase: KnowledgeBaseItem[]

}

export interface Section {

title: string,

brief: string,

materials: Material[]

}

const TypeMapIcon: Record<string, string> = {

'指南': 'app.media.ic_guide',

'准备': 'app.media.ic_prepare',

'学习与获取证书': 'app.media.ic_medals',

'视频教程': 'app.media.ic_video'

}

@Component

export struct KnowledgeMapContent {

@Prop section: Section

@Builder

KnowledgeBlockLine(knowledgeBaseItem: KnowledgeBaseItem) {

Row() {

Image($r(TypeMapIcon[knowledgeBaseItem.type]))

.width(20)

.height(20)

Column() {

Text(knowledgeBaseItem.title)

.fontFamily('HarmonyHeiTi-Medium')

.fontSize(16)

.fontWeight(500)

Text(knowledgeBaseItem.type)

.fontFamily('HarmonyHeiTi')

.fontSize(14)

.fontWeight(400)

}

.alignItems(HorizontalAlign.Start)

.margin({ left: 18 })

Blank()

Image($r('app.media.ic_arrow'))

.width(12)

.height(24)

}

.width('100%')

.height(64)

.alignItems(VerticalAlign.Center)

}

@Builder

KnowledgeBlock(material: Material) {

Column() {

Text(material.subtitle)

.fontFamily('HarmonyHeiTi-Medium')

.fontSize(14)

.fontWeight(500)

.margin({ bottom: 8 })

List({ space: 12 }) {

ForEach(material.knowledgeBase, (item: KnowledgeBaseItem, index: number) => {

ListItem() {

this.KnowledgeBlockLine(item)

}

}, (item: KnowledgeBaseItem, index: number) => item.title)

}

.backgroundColor(Color.White)

.borderRadius(16)

.padding({ left: 12, right: 12 })

.divider({

strokeWidth: 0.5,

startMargin: 38,

endMargin: 0,

color: '#F2F2F2'

})

}

.width('100%')

.margin({ top: 28 })

.alignItems(HorizontalAlign.Start)

}

build() {

NavDestination() {

Scroll() {

Column() {

Text(this.section.title)

.fontFamily('HarmonyHeiTi-Bold')

.fontSize(20)

.fontWeight(700)

.fontColor(Color.Black)

Text(this.section.brief)

.fontFamily('HarmonyHeiTi')

.fontSize(12)

.fontColor('rgba(0, 0, 0, 0.6)')

.textAlign(TextAlign.JUSTIFY)

.fontWeight(400)

.margin({ top: 12 })

ForEach(this.section.materials, (material: Material) => {

this.KnowledgeBlock(material)

}, (material: Material, index: number) => material.subtitle)

}

.alignItems(HorizontalAlign.Start)

.padding({

top: 12,

left: 16,

bottom: 12,

right: 16

})

.backgroundColor('#F1F3F5')

.width('100%')

}

.align(Alignment.TopStart)

.constraintSize({ minHeight: '100%' })

.edgeEffect(EdgeEffect.Spring)

.scrollable(ScrollDirection.Vertical)

.scrollBar(BarState.Auto)

.backgroundColor('#F1F3F5')

}

.hideTitleBar(true)

}

view/NavBarItem.ets

export interface NavBarItemType {
  order: string
  title: string
}

@Component
export struct NavBarItem {
  @Prop navBarItem: NavBarItemType
  @Consume('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack
  @Link currentNavBarIndex: number

  build() {
    Row() {
      Text(this.navBarItem.order)
        .margin({ right: 6 })
        .fontFamily('HarmonyHeiti-Bold')
        .fontSize(21)
        .fontColor('#182431')
        .textAlign(TextAlign.Start)
        .lineHeight(22)
        .fontWeight(700)

      Text(this.navBarItem.title)
        .fontFamily('HarmonyHeiti-Medium')
        .fontSize(16)
        .fontColor('#182431')
        .lineHeight(22)
        .fontWeight(500)

      Blank()

      Image($r('app.media.ic_arrow'))
        .width(12)
        .height(24)
    }
    .width('100%')
    .height(48)
    .borderRadius(16)
    .alignItems(VerticalAlign.Center)
    .padding({ left: 12, right: 12 })
    .backgroundColor(
      this.currentNavBarIndex === Number(this.navBarItem.order) - 1 ?
        '#1A0A59F7' :
      Color.Transparent
    )
    .onClick(() => {
      const index = Number(this.navBarItem.order) - 1
      this.currentNavBarIndex = index
      this.knowledgeMapPageStack.replacePath({ name: 'KnowledgeMapContent' })
    })

  }
}

export interface NavBarItemType {

order: string

title: string

}

@Component

export struct NavBarItem {

@Prop navBarItem: NavBarItemType

@Consume('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack

@Link currentNavBarIndex: number

build() {

Row() {

Text(this.navBarItem.order)

.margin({ right: 6 })

.fontFamily('HarmonyHeiti-Bold')

.fontSize(21)

.fontColor('#182431')

.textAlign(TextAlign.Start)

.lineHeight(22)

.fontWeight(700)

Text(this.navBarItem.title)

.fontFamily('HarmonyHeiti-Medium')

.fontSize(16)

.fontColor('#182431')

.lineHeight(22)

.fontWeight(500)

Blank()

Image($r('app.media.ic_arrow'))

.width(12)

.height(24)

}

.width('100%')

.height(48)

.borderRadius(16)

.alignItems(VerticalAlign.Center)

.padding({ left: 12, right: 12 })

.backgroundColor(

this.currentNavBarIndex === Number(this.navBarItem.order) - 1 ?

'#1A0A59F7' :

Color.Transparent

)

.onClick(() => {

const index = Number(this.navBarItem.order) - 1

this.currentNavBarIndex = index

this.knowledgeMapPageStack.replacePath({ name: 'KnowledgeMapContent' })

})

}

quickstart

pages/QuickStartPage.ets

import { TutorialView } from '../view/TutorialView'
import { Banner } from '../view/Banner'
import { EnablementView } from '../view/EnablementView'
import { ArticleClass } from '../model/ArticleClass'
import { BannerClass } from '../model/BannerClass'
import { ArticleDetailPage } from './ArticleDetailPage'
import { BannerDetailPage } from './BannerDetailPage'

@Component
export struct QuickStartPage {
  @State message: string = '快速入门'
  @Provide('articlePathStack') articlePathStack: NavPathStack = new NavPathStack()

  @Builder
  quickStartRouter(name: string, param?: ArticleClass | BannerClass) {
    if (name === 'articleDetail') {
      ArticleDetailPage()
    } else if (name === 'bannerDetailPage') {
      BannerDetailPage()
    }
  }

  build() {
    Navigation(this.articlePathStack) {
      Column() {
        Text(this.message)
          .fontFamily('HarmonyHeiTi-Bold')
          .fontSize(24)
          .fontWeight(700)
          .lineHeight(33)
          .width('100%')
          .textAlign(TextAlign.Start)
          .margin({ left: 16 })

        Scroll() {
          Column() {
            Banner()
            EnablementView()
            TutorialView()
          }
        }
        .layoutWeight(1)
        .scrollBar(BarState.Off)
        .align(Alignment.TopStart)

      }
      .height('100%')
      .width('100%')
      .backgroundColor('#F1F3F5')
    }
    .navDestination(this.quickStartRouter)
    .hideTitleBar(true)
    .mode(NavigationMode.Stack)
  }
}

import { TutorialView } from '../view/TutorialView'

import { Banner } from '../view/Banner'

import { EnablementView } from '../view/EnablementView'

import { ArticleClass } from '../model/ArticleClass'

import { BannerClass } from '../model/BannerClass'

import { ArticleDetailPage } from './ArticleDetailPage'

import { BannerDetailPage } from './BannerDetailPage'

@Component

export struct QuickStartPage {

@State message: string = '快速入门'

@Provide('articlePathStack') articlePathStack: NavPathStack = new NavPathStack()

@Builder

quickStartRouter(name: string, param?: ArticleClass | BannerClass) {

if (name === 'articleDetail') {

ArticleDetailPage()

} else if (name === 'bannerDetailPage') {

BannerDetailPage()

}

build() {

Navigation(this.articlePathStack) {

Column() {

Text(this.message)

.fontFamily('HarmonyHeiTi-Bold')

.fontSize(24)

.fontWeight(700)

.lineHeight(33)

.width('100%')

.textAlign(TextAlign.Start)

.margin({ left: 16 })

Scroll() {

Column() {

Banner()

EnablementView()

TutorialView()

}

.layoutWeight(1)

.scrollBar(BarState.Off)

.align(Alignment.TopStart)

}

.height('100%')

.width('100%')

.backgroundColor('#F1F3F5')

}

.navDestination(this.quickStartRouter)

.hideTitleBar(true)

.mode(NavigationMode.Stack)

}

pages/ArticleDetailPage.ets

import { ArticleClass } from '../model/ArticleClass'
import { webview } from '@kit.ArkWeb'

@Preview
@Component
export struct ArticleDetailPage {
  @State articleDetail: ArticleClass | null = null
  @Consume('articlePathStack') articlePathStack: NavPathStack

  aboutToAppear(): void {
    this.articleDetail = this.articlePathStack.getParamByName('articleDetail')[0] as ArticleClass
  }

  build() {
    NavDestination() {
      Column() {
        Row() {
          Row() {

            Image($r('app.media.ic_back'))
              .width(40)
              .height(40)
              .onClick(() => {
                this.articlePathStack.pop()
              })
            Row() {
              Text(this.articleDetail?.title)
                .fontFamily('HarmonyHeiTi-Bold')
                .fontSize(20)
                .textAlign(TextAlign.Center)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .maxLines(1)
                .fontWeight(700)
                .margin({ left: 8 })
            }
          }
          .width('80%')
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
        .height(56)

        WebComponent({ articleDetail: this.articleDetail })
      }
      .padding({ left: 16, right: 16 })
      .width('100%')
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .hideTitleBar(true)
  }
}


@Component
struct WebComponent {
  @Prop articleDetail: ArticleClass | null
  private webviewController: webview.WebviewController = new webview.WebviewController()

  build() {
    Column() {
      Web({ src: this.articleDetail?.webUrl, controller: this.webviewController })
        .darkMode(WebDarkMode.Auto)
        .domStorageAccess(true)
        .zoomAccess(true)
        .fileAccess(true)
        .mixedMode(MixedMode.All)
        .cacheMode(CacheMode.None)
        .javaScriptAccess(true)
        .width('100%')
        .layoutWeight(1)
    }
  }
}

import { ArticleClass } from '../model/ArticleClass'

import { webview } from '@kit.ArkWeb'

@Preview

@Component

export struct ArticleDetailPage {

@State articleDetail: ArticleClass | null = null

@Consume('articlePathStack') articlePathStack: NavPathStack

aboutToAppear(): void {

this.articleDetail = this.articlePathStack.getParamByName('articleDetail')[0] as ArticleClass

}

build() {

NavDestination() {

Column() {

Row() {

Image($r('app.media.ic_back'))

.width(40)

.height(40)

.onClick(() => {

this.articlePathStack.pop()

})

Row() {

Text(this.articleDetail?.title)

.fontFamily('HarmonyHeiTi-Bold')

.fontSize(20)

.textAlign(TextAlign.Center)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.maxLines(1)

.fontWeight(700)

.margin({ left: 8 })

}

.width('80%')

}

.justifyContent(FlexAlign.SpaceBetween)

.width('100%')

.height(56)

WebComponent({ articleDetail: this.articleDetail })

}

.padding({ left: 16, right: 16 })

.width('100%')

.height('100%')

.justifyContent(FlexAlign.SpaceBetween)

}

.hideTitleBar(true)

}

@Component

struct WebComponent {

@Prop articleDetail: ArticleClass | null

private webviewController: webview.WebviewController = new webview.WebviewController()

build() {

Column() {

Web({ src: this.articleDetail?.webUrl, controller: this.webviewController })

.darkMode(WebDarkMode.Auto)

.domStorageAccess(true)

.zoomAccess(true)

.fileAccess(true)

.mixedMode(MixedMode.All)

.cacheMode(CacheMode.None)

.javaScriptAccess(true)

.width('100%')

.layoutWeight(1)

}

pages/BannerDetailPage.ets

import { BannerClass } from '../model/BannerClass'
import { webview } from '@kit.ArkWeb'

@Component
export struct BannerDetailPage {
  @State bannerClass: BannerClass | null = null
  controller: webview.WebviewController = new webview.WebviewController()
  @Consume('articlePathStack') articlePathStack: NavPathStack

  aboutToAppear(): void {
    this.bannerClass = this.articlePathStack.getParamByName('bannerDetailPage')[0] as BannerClass
  }

  build() {
    NavDestination() {
      Column() {
        Web({
          src: this.bannerClass?.url,
          controller: this.controller
        })
          .darkMode(WebDarkMode.Auto)
          .domStorageAccess(true)
          .zoomAccess(true)
          .fileAccess(true)
          .mixedMode(MixedMode.All)
          .javaScriptAccess(true)
          .width('100%')
          .layoutWeight(1)
      }
    }
    .width('100%')
    .height('100%')

  }
}

import { BannerClass } from '../model/BannerClass'

import { webview } from '@kit.ArkWeb'

@Component

export struct BannerDetailPage {

@State bannerClass: BannerClass | null = null

controller: webview.WebviewController = new webview.WebviewController()

@Consume('articlePathStack') articlePathStack: NavPathStack

aboutToAppear(): void {

this.bannerClass = this.articlePathStack.getParamByName('bannerDetailPage')[0] as BannerClass

}

build() {

NavDestination() {

Column() {

Web({

src: this.bannerClass?.url,

controller: this.controller

})

.darkMode(WebDarkMode.Auto)

.domStorageAccess(true)

.zoomAccess(true)

.fileAccess(true)

.mixedMode(MixedMode.All)

.javaScriptAccess(true)

.width('100%')

.layoutWeight(1)

}

.width('100%')

.height('100%')

}

view/Banner.ets

import { BannerClass } from '../model/BannerClass'
import { bufferToString } from '../util/BufferUtil'

@Preview
@Component
export struct Banner {
  @State bannerList: BannerClass[] = []
  @Consume('articlePathStack') articlePathStack: NavPathStack

  getBannerDataFromJSON() {
    getContext(this).resourceManager.getRawFileContent('BannerData.json').then(value => {
      // 获取buffer内容
      // let buffer: ArrayBufferLike = value.buffer

      // 转换为字符串
      // let res: string = bufferToString(buffer)

      // 解析为数据结构
      // this.bannerList = JSON.parse(res) as BannerClass[]

      // 简写
      this.bannerList = JSON.parse(bufferToString(value.buffer)) as BannerClass[]
    })
  }

  aboutToAppear(): void {
    this.getBannerDataFromJSON()
  }

  build() {
    Swiper() {
      ForEach(this.bannerList, (item: BannerClass, index: number) => {
        Image($r(item.imageSrc))
          .objectFit(ImageFit.Contain)
          .width('100%')
          .padding({ top: 11, left: 16, right: 16 })
          .borderRadius(16)
          .onClick(() => {
            this.articlePathStack.pushPathByName('bannerDetailPage', item)
          })
      }, (item: BannerClass, index: number) => item.id)
    }
    .autoPlay(true)
    .loop(true)
    .indicator(
      new DotIndicator()
        .color('#1a000000')
        .selectedColor('#0A59F7')
    )

  }
}

import { BannerClass } from '../model/BannerClass'

import { bufferToString } from '../util/BufferUtil'

@Preview

@Component

export struct Banner {

@State bannerList: BannerClass[] = []

@Consume('articlePathStack') articlePathStack: NavPathStack

getBannerDataFromJSON() {

getContext(this).resourceManager.getRawFileContent('BannerData.json').then(value => {

// 获取buffer内容

// let buffer: ArrayBufferLike = value.buffer

// 转换为字符串

// let res: string = bufferToString(buffer)

// 解析为数据结构

// this.bannerList = JSON.parse(res) as BannerClass[]

// 简写

this.bannerList = JSON.parse(bufferToString(value.buffer)) as BannerClass[]

})

}

aboutToAppear(): void {

this.getBannerDataFromJSON()

}

build() {

Swiper() {

ForEach(this.bannerList, (item: BannerClass, index: number) => {

Image($r(item.imageSrc))

.objectFit(ImageFit.Contain)

.width('100%')

.padding({ top: 11, left: 16, right: 16 })

.borderRadius(16)

.onClick(() => {

this.articlePathStack.pushPathByName('bannerDetailPage', item)

})

}, (item: BannerClass, index: number) => item.id)

}

.autoPlay(true)

.loop(true)

.indicator(

new DotIndicator()

.color('#1a000000')

.selectedColor('#0A59F7')

)

}

view/EnablementView.ets

import { ArticleClass } from '../model/ArticleClass'
import { bufferToString } from '../util/BufferUtil'

@Component
struct EnablementItem {
  @Prop enablementItem: ArticleClass

  build() {
    Column() {
      Image($r(this.enablementItem.imageSrc))
        .width('100%')
        .objectFit(ImageFit.Cover)
        .height(96)
        .borderRadius({
          topLeft: 16,
          topRight: 16
        })

      Text(this.enablementItem.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.enablementItem.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)
  }
}


@Preview
@Component
export struct EnablementView {
  @State enablementList: Array<ArticleClass> = []
  @Consume('articlePathStack') articlePathStack: NavPathStack

  aboutToAppear(): void {
    this.getEnablementDataFromJSON()
  }

  getEnablementDataFromJSON() {
    getContext(this).resourceManager.getRawFileContent('EnablementData.json').then(value => {
      this.enablementList = JSON.parse(bufferToString(value.buffer)) as ArticleClass[]
    })
  }

  build() {
    Column() {

      Text('赋能套件')
        .width('100%')
        .fontColor('#182431')
        .fontSize(16)
        .fontWeight(500)
        .fontFamily('HarmonyHeiTi-medium')
        .textAlign(TextAlign.Start)
        .padding({ left: 16 })
        .margin({ bottom: 8.5 })

      Grid() {
        ForEach(this.enablementList, (item: ArticleClass) => {
          GridItem() {
            EnablementItem({ enablementItem: item })
              .onClick(() => {
                this.articlePathStack.pushPathByName('articleDetail', item)
              })
          }
        }, (item: ArticleClass) => item.id)
      }
      .rowsTemplate('1fr')
      .columnsGap(8)
      .scrollBar(BarState.Off)
      .height(169)
      .padding({ top: 2, left: 16, right: 16 })
    }
    .width('100%')
    .margin({ top: 18 })
  }
}

import { ArticleClass } from '../model/ArticleClass'

import { bufferToString } from '../util/BufferUtil'

@Component

struct EnablementItem {

@Prop enablementItem: ArticleClass

build() {

Column() {

Image($r(this.enablementItem.imageSrc))

.width('100%')

.objectFit(ImageFit.Cover)

.height(96)

.borderRadius({

topLeft: 16,

topRight: 16

})

Text(this.enablementItem.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.enablementItem.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)

}

@Preview

@Component

export struct EnablementView {

@State enablementList: Array<ArticleClass> = []

@Consume('articlePathStack') articlePathStack: NavPathStack

aboutToAppear(): void {

this.getEnablementDataFromJSON()

}

getEnablementDataFromJSON() {

getContext(this).resourceManager.getRawFileContent('EnablementData.json').then(value => {

this.enablementList = JSON.parse(bufferToString(value.buffer)) as ArticleClass[]

})

}

build() {

Column() {

Text('赋能套件')

.width('100%')

.fontColor('#182431')

.fontSize(16)

.fontWeight(500)

.fontFamily('HarmonyHeiTi-medium')

.textAlign(TextAlign.Start)

.padding({ left: 16 })

.margin({ bottom: 8.5 })

Grid() {

ForEach(this.enablementList, (item: ArticleClass) => {

GridItem() {

EnablementItem({ enablementItem: item })

.onClick(() => {

this.articlePathStack.pushPathByName('articleDetail', item)

})

}

}, (item: ArticleClass) => item.id)

}

.rowsTemplate('1fr')

.columnsGap(8)

.scrollBar(BarState.Off)

.height(169)

.padding({ top: 2, left: 16, right: 16 })

}

.width('100%')

.margin({ top: 18 })

}

view/TutorialView.ets

import { ArticleClass } from '../model/ArticleClass'
import { bufferToString } from '../util/BufferUtil'


@Component
struct TutorialItem {
  @Prop tutorialItem: ArticleClass

  build() {
    Row() {
      Column() {
        Text(this.tutorialItem.title)
          .height(19)
          .width('100%')
          .fontSize(14)
          .textAlign(TextAlign.Start)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(1)
          .fontWeight(400)
          .margin({ top: 4 })
        Text(this.tutorialItem.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)')
          .margin({ top: 5 })
      }
      .height('100%')
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .margin({ right: 12 })

      Image($r(this.tutorialItem.imageSrc))
        .height(64)
        .width(108)
        .objectFit(ImageFit.Cover)
        .borderRadius(16)

    }
    .width('100%')
    .height(88)
    .borderRadius(16)
    .backgroundColor(Color.White)
    .padding(12)
    .alignItems(VerticalAlign.Top)
  }
}

@Preview
@Component
export struct TutorialView {
  @State tutorialList: Array<ArticleClass> = []
  @Consume('articlePathStack') articlePathStack: NavPathStack

  aboutToAppear(): void {
    this.getTutorialDataFromJSON()
  }

  getTutorialDataFromJSON() {
    getContext(this).resourceManager.getRawFileContent('TutorialData.json').then(value => {
      this.tutorialList = JSON.parse(bufferToString(value.buffer)) as ArticleClass[]
    })
  }

  build() {

    Column() {
      Text('入门教程')
        .fontColor('#182431')
        .fontSize(16)
        .fontWeight(500)
        .fontFamily('HarmonyHeiTi-medium')
        .textAlign(TextAlign.Start)
        .padding({ left: 16 })
        .margin({ bottom: 8.5 })

      List({ space: 12 }) {
        ForEach(this.tutorialList, (item: ArticleClass) => {
          ListItem() {
            TutorialItem({ tutorialItem: item })
              .onClick(() => {
                this.articlePathStack.pushPathByName('articleDetail', item)
              })
          }
        }, (item: ArticleClass) => item.id)
      }
      .scrollBar(BarState.Off)
      .padding({ left: 16, right: 16 })

    }
    .width('100%')
    .margin({ top: 18 })
    .alignItems(HorizontalAlign.Start)

  }
}

100

import { ArticleClass } from '../model/ArticleClass'

import { bufferToString } from '../util/BufferUtil'

@Component

struct TutorialItem {

@Prop tutorialItem: ArticleClass

build() {

Row() {

Column() {

Text(this.tutorialItem.title)

.height(19)

.width('100%')

.fontSize(14)

.textAlign(TextAlign.Start)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.maxLines(1)

.fontWeight(400)

.margin({ top: 4 })

Text(this.tutorialItem.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)')

.margin({ top: 5 })

}

.height('100%')

.layoutWeight(1)

.alignItems(HorizontalAlign.Start)

.margin({ right: 12 })

Image($r(this.tutorialItem.imageSrc))

.height(64)

.width(108)

.objectFit(ImageFit.Cover)

.borderRadius(16)

}

.width('100%')

.height(88)

.borderRadius(16)

.backgroundColor(Color.White)

.padding(12)

.alignItems(VerticalAlign.Top)

}

@Preview

@Component

export struct TutorialView {

@State tutorialList: Array<ArticleClass> = []

@Consume('articlePathStack') articlePathStack: NavPathStack

aboutToAppear(): void {

this.getTutorialDataFromJSON()

}

getTutorialDataFromJSON() {

getContext(this).resourceManager.getRawFileContent('TutorialData.json').then(value => {

this.tutorialList = JSON.parse(bufferToString(value.buffer)) as ArticleClass[]

})

}

build() {

Column() {

Text('入门教程')

.fontColor('#182431')

.fontSize(16)

.fontWeight(500)

.fontFamily('HarmonyHeiTi-medium')

.textAlign(TextAlign.Start)

.padding({ left: 16 })

.margin({ bottom: 8.5 })

List({ space: 12 }) {

ForEach(this.tutorialList, (item: ArticleClass) => {

ListItem() {

TutorialItem({ tutorialItem: item })

.onClick(() => {

this.articlePathStack.pushPathByName('articleDetail', item)

})

}

}, (item: ArticleClass) => item.id)

}

.scrollBar(BarState.Off)

.padding({ left: 16, right: 16 })

}

.width('100%')

.margin({ top: 18 })

.alignItems(HorizontalAlign.Start)

}

下载源码

Arkui01-设置组件导航下载

官网地址

https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717497640610394

Page 1 of 2

1 2