上一節(jié)已經(jīng)完成了list列表的展示及點(diǎn)擊button向列表中添加數(shù)據(jù)确垫，這一節(jié)我們完善list列表的數(shù)據(jù)
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 頁(yè)面
第一步，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(`更新時(shí)間：${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
新增數(shù)據(jù)目前用的是string碉纺，我們CV官網(wǎng)女器，改成和官網(wǎng)一致诀蓉。DataModel.ets等從官網(wǎng)代碼找。癣漆。维咸。這里不CV，對(duì)應(yīng)的TargetList惠爽、TargetListItem數(shù)據(jù)類型需由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()
}
...
}
第二步按鈕點(diǎn)擊出現(xiàn)隱藏的進(jìn)度條等
先點(diǎn)擊出現(xiàn)文字，然后想都不用想婚肆，再創(chuàng)建子組件租副，出現(xiàn)進(jìn)度條等具體的界面
哎，好煩较性，耐心被磨平了用僧，組件一層套一層
思路：先創(chuàng)建一個(gè)isExpanded變量，點(diǎn)擊item時(shí)赞咙，通過(guò)isExpanded值的改變判斷是否顯示TargetItem下面的視圖责循，并設(shè)置一動(dòng)畫(huà)進(jìn)行過(guò)渡。
@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
=> 接著創(chuàng)建子組件攀操，替換圖中111的問(wèn)題
@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';
}
})
}
}
補(bǔ)充一個(gè)細(xì)節(jié)問(wèn)題院仿，進(jìn)度條上面的更新時(shí)間一直沒(méi)有做。
TargetListItem中已經(jīng)有l(wèi)atestProgress、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
我們發(fā)現(xiàn)進(jìn)度條可以動(dòng)起來(lái)了，而且進(jìn)度條右邊的數(shù)字跟著進(jìn)度條進(jìn)行聯(lián)動(dòng)了排惨。
那么怎么將點(diǎn)擊確定怎么將數(shù)據(jù)傳遞給上面的進(jìn)度呢秀姐？同時(shí)，添加數(shù)據(jù)的時(shí)候同步內(nèi)部的進(jìn)度條數(shù)據(jù)若贮。
=>先定義兩個(gè)按鈕的回調(diào)事件（注意，slidingProgress之前是寫(xiě)死的數(shù)值痒留，現(xiàn)在改成了@Prop===>如果改成@Link會(huì)有驚喜哦谴麦，可以自己嘗試，這就是@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)
}
})
}
...
}
...
}
...
}
我們?cè)赥argetListItem 使用調(diào)用剛剛定義的回調(diào)伸头，并進(jìn)行賦值
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
}
})
}
}
...
}
}
...
你會(huì)發(fā)現(xiàn)index:number = 0這個(gè)值有問(wèn)題匾效，他是屬于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的功能已經(jīng)基本實(shí)現(xiàn)
33.gif
