构建更加丰富的页面=>案例解析3

作者: it奔跑在路上 | 来源:发表于2023-12-14 18:06 被阅读0次

90-10 好图～一图胜千言
使用Java开发HarmonyOS
页面构建
页面渲染及性能优化
简述浏览器渲染机制
页面渲染过程与回流重绘
【教育增长圈】3组-石城-D2作业
浏览器渲染页面过程
浏览器渲染流程及其性能优化分析
浏览器的渲染过程

上一节已经完成了list列表的展示及点击button向列表中添加数据，这一节我们完善list列表的数据

let's go!!!

import prompt from '@ohos.prompt'
import TargetListItem from './TargetListItem'

@Component
export default struct TargetList {
  @Link targetData: string[]
  onAddClick?: () => void

  build() {
    Column() {
     ...
      List({ space: 5 }) {
        ForEach(this.targetData, (item: string, index: number) => {
          ListItem() {
            TargetListItem({
              taskItem:item
            })
          }
        }, (item: string) => JSON.stringify(item))
      }
    ...
    }
   ...
  }
}
...

@Component
export default struct TargetListItem {
  taskItem:string
  build() {
    Column() {
      Text(this.taskItem)
    }
  }
}

image.png

效果不变（去掉了背景等属性）

=> 完善TargetListItem 页面

第一步，item界面

@Component
export default struct TargetListItem {
  taskItem?: string
  @State latestProgress?: number = 0;
  @State updateDate?: string = '';

  build() {
    Column() {
      this.TargetItem()
    }
    .padding({
      left:16,
      top:14,
      bottom:12,
      right:16
    })
    .height(64)
    .width('100%')
    .borderRadius(24)
    .backgroundColor(Color.White)
  }

  @Builder TargetItem() {
    Row() {
      Text(this.taskItem)
        .fontSize(16)
        .fontColor('#182431')
        .fontWeight(FontWeight.Bold)
        .width('30%')
        .textAlign(TextAlign.Start)
        .maxLines(2)

      Blank()
      Column() {
        Text(`${this.latestProgress}%`)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .fontColor('#182431')

        Text(`更新时间：${this.updateDate}`)
          .opacityTextStyle()
          .margin({ top: "2" })
          .margin({ top: "2" })
      }
      .alignItems(HorizontalAlign.End)
    }
    .width('100%')
  }
}

@Extend(Text) function opacityTextStyle() {
  .fontSize(12)
  .fontColor('#182431')
  .opacity(0.4)
  .fontWeight(FontWeight.Bold)
}

image.png

新增数据目前用的是string，我们CV官网，改成和官网一致。DataModel.ets等从官网代码找。。。这里不CV，对应的TargetList、TargetListItem数据类型需由string改成TaskItemBean。

import AddTargetDialog from '../view/AddTargetDialog'
import TargetInformation from '../view/TargetInformation'
import TargetList from '../view/TargetList'
import DataModel, { TaskItemBean } from '../viewModel/DataModel'
import getCurrentTime from '../common/utils/DateUtil'

@Entry
@Component
struct Index {
  @State targetData: TaskItemBean[] = DataModel.getData()
       ...

  saveTask(taskName: string) {
    DataModel.addData(new TaskItemBean(taskName, getCurrentTime(), 0))
    this.targetData = DataModel.getData()
    this.dialogController.close()
  }
      ...
}

第二步按钮点击出现隐藏的进度条等

先点击出现文字，然后想都不用想，再创建子组件，出现进度条等具体的界面

哎，好烦，耐心被磨平了，组件一层套一层

思路：先创建一个isExpanded变量，点击item时，通过isExpanded值的改变判断是否显示TargetItem下面的视图，并设置一动画进行过渡。

@Component
export default struct TargetListItem {
  taskItem?: string
  @State latestProgress?: number = 0;
  @State updateDate?: string = '';
  @State isExpanded: boolean = false;

  build() {
    Column() {
      this.TargetItem()
      if (this.isExpanded){
        Text('111')
          .height(30)
      }
    }
    ...
    .height(this.isExpanded ? 148 :64)
    .onClick(() => {
      animateTo({ duration:300},()=>{
        this.isExpanded = !this.isExpanded
      })
    })
  }
...
}
...

33.gif

=> 接着创建子组件，替换图中111的问题

@Component
export default struct ProgressEditPanel {
  @State slidingProgress: number = 30

  build() {
    Column() {

      Row() {
        Slider({
          value: 30,
          step: 1,
          max: 100,
          min: 0,
          style: SliderStyle.InSet
        })
          .width('90%')
          .onChange((value:number)=>{
            this.slidingProgress = Math.floor(value)
          })

        Text(`${this.slidingProgress}%`)
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .fontColor('#4d4d4d')
          .margin({ left: 8 })
      }
      .width('90%')
      .height('20%')

      Row() {
        CustomerButton({ buttonText: '取消' })
        CustomerButton({ buttonText: '确定' })
      }
      .margin({ top: '4%' })
      .width('70%')
      .justifyContent(FlexAlign.SpaceBetween)

    }
    .height(84)
    .width('100%')
    .justifyContent(FlexAlign.End)
  }
}

@Component
struct CustomerButton {
  @State buttonColor: string = '#FFFFFF'
  buttonText: string

  build() {
    Text(this.buttonText)
      .fontSize(16)
      .height(32)
      .width(96)
      .fontColor('#007dff')
      .backgroundColor(this.buttonColor)
      .borderRadius(24)
      .textAlign(TextAlign.Center)
      .onTouch((event?: TouchEvent) => {
        if (event !== undefined && event.type === TouchType.Down) {
          this.buttonColor = '#E8E7EB';
        }
        if (event !== undefined && event.type === TouchType.Up) {
          this.buttonColor = '#FFFFFF';
        }
      })
  }
}

补充一个细节问题，进度条上面的更新时间一直没有做。
TargetListItem中已经有latestProgress、updateDate属性，因此，可以直接使用

export default struct TargetListItem {
  taskItem?: TaskItemBean
  @State latestProgress?: number = 0;
  @State updateDate?: string = '';
  @State isExpanded: boolean = false;

  aboutToAppear() {
    this.latestProgress = this.taskItem?.progressValue;
    this.updateDate = this.taskItem?.updateDate;
  }
....
}

33.gif

我们发现进度条可以动起来了，而且进度条右边的数字跟着进度条进行联动了。
那么怎么将点击确定怎么将数据传递给上面的进度呢？同时，添加数据的时候同步内部的进度条数据。
=>先定义两个按钮的回调事件（注意，slidingProgress之前是写死的数值，现在改成了@Prop===>如果改成@Link会有惊喜哦，可以自己尝试，这就是@prop和@Link的差别）

@Component
export default struct ProgressEditPanel {
  @Prop slidingProgress: number
  onCancel?: () => void
  onClickOk?: (progress: number) => void

  build() {
    Column() {
      Row() {
        Slider({
          value: this.slidingProgress,
         ...
        })
         ...
        Text(`${this.slidingProgress}%`)
         ...
      }
     ...
      Row() {
        CustomerButton({ buttonText: '取消' })
          .onClick(() => {
            if (this.onCancel !== undefined) {
              this.onCancel()
            }
          })
        CustomerButton({ buttonText: '确定' })
          .onClick(() => {
            if (this.onClickOk !== undefined) {
              this.onClickOk(this.slidingProgress)
            }
          })
      }
    ...
    }
    ...
  }
 ...
}

我们在TargetListItem 使用调用刚刚定义的回调，并进行赋值

import getCurrentTime from '../common/utils/DateUtil';
import DataModel,{ TaskItemBean } from '../viewModel/DataModel';
import ProgressEditPanel from './ProgressEditPanel';
@Component
export default struct TargetListItem {
  taskItem?: TaskItemBean
  @State latestProgress?: number = 0;
  @State updateDate?: string = '';
  @State isExpanded: boolean = false;
  index:number = 0

  aboutToAppear() {
    this.latestProgress = this.taskItem?.progressValue;
    this.updateDate = this.taskItem?.updateDate;
  }

  build() {
    Column() {
      ...
      if (this.isExpanded){
        ProgressEditPanel({
          slidingProgress:this.latestProgress,
          onCancel:()=>this.isExpanded = false,
          onClickOk:(progress:number)=>{
            this.latestProgress = progress
            this.updateDate = getCurrentTime()
            this.isExpanded = false
          }
        })
      }
    }
  ...
  }
}
...

你会发现index:number = 0这个值有问题，他是属于listItem，我们可以从外层的list传递

import prompt from '@ohos.prompt'
import { TaskItemBean } from '../viewModel/DataModel'
import TargetListItem from './TargetListItem'

@Component
export default struct TargetList {
  @Link targetData: TaskItemBean[]
  onAddClick?: () => void

  build() {
    Column() {
    ...
      List({ space: 5 }) {
        ForEach(this.targetData, (item: TaskItemBean, index: number) => {
          ListItem() {
            TargetListItem({
              taskItem:item,
              index:index      //这里这里传值给listItem
            })
          }
        }, (item: string) => JSON.stringify(item))
      }
     ...
}

上效果图，list的功能已经基本实现

33.gif