上一节已经完成了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
