使用说明
代码
class Task{
static id:number = 1
//任务名称
name:string = `任务${Task.id++}`
//任务状态
finished:boolean = false
}
//样式卡片
@Styles function card(){
.width('95%')
.padding(20)
.backgroundColor(Color.White)
.borderRadius(15)
.shadow({radius:6,color:'#1f000000',offsetX:2,offsetY:4})
}
//任务完成样式
@Extend(Text) function finishedTask(){
.decoration({type:TextDecorationType.LineThrough})
.fontColor('#B1B2B1')
}
@Entry
@Component
struct ProPage {
//总任务数量
@State totalTask:number = 0
//已完成任务数量
@State finishTask:number = 0
build() {
Column({space:10}){
//任务进度
TaskStatistics({finishTask:this.finishTask,totalTask:this.totalTask})
//新增任务
TaskList({finishTask:$finishTask,totalTask:$totalTask})
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct TaskStatistics{
//总任务数量
@Prop totalTask:number
//已完成任务数量
@Prop finishTask:number
build(){
//任务进度
Row(){
Text('任务进度:').fontSize(30).fontWeight(FontWeight.Bold)
Stack(){//堆叠容器
Progress({//进度样式
value:this.finishTask,
total:this.totalTask,
type:ProgressType.Ring
})
Row(){
Text(this.finishTask.toString()).fontSize(24).fontColor('#36D')
Text(' / '+this.totalTask.toString()).fontSize(24)
}
}
}
.card()
.margin({top:20,bottom:10})
.justifyContent(FlexAlign.SpaceEvenly)
}
}
@Component
struct TaskList {
//总任务数量
@Link totalTask:number
//已完成任务数量
@Link finishTask:number
//任务数组
@State tasks: Task[] = []
handleTaskChange(){
//更新任务数量
this.totalTask = this.tasks.length
//更新已完成任务数量
this.finishTask = this.tasks.filter(item => item.finished).length
//完成的任务变灰色
}
build() {
Column(){
//任务按钮
Button('新增任务')
.width(200)
.onClick(()=>{
//新增任务数据
this.tasks.push(new Task())
this.handleTaskChange()
})
//任务列表
List({space:10}){
ForEach(
this.tasks,
(item:Task,index)=>{
ListItem(){
Row(){
Text(item.name).fontSize(20)
Checkbox()
.select(item.finished)
.onChange( val =>{
//更新当前任务状态
item.finished = val
this.handleTaskChange()
})
}
.card()
.justifyContent(FlexAlign.SpaceBetween)
}
.swipeAction({end:this.DeleteButton(index)})
}
)
}
.width('100%')
.alignListItem(ListItemAlign.Center)
.layoutWeight(1)
}
}
@Builder DeleteButton(index:number){
Button(){
Image($r('app.media.delete'))
.fillColor(Color.White)
.width(20)
}
.width(40)
.height(40)
.type(ButtonType.Circle)
.backgroundColor(Color.Red)
.margin({left:5})
.onClick(()=>{
this.tasks.splice(index,1)
this.handleTaskChange()
})
}
}
代码框架1
@Entry
@Component
struct ProPage {
//总任务数量
@State totalTask:number = 0
//已完成任务数量
@State finishTask:number = 0
build() {
Column({space:10}){
//任务进度
TaskStatistics({finishTask:this.finishTask,totalTask:this.totalTask})
//新增任务
TaskList({finishTask:$finishTask,totalTask:$totalTask})
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct TaskStatistics{
//总任务数量
@Prop totalTask:number
//已完成任务数量
@Prop finishTask:number
build(){
//任务进度
Row(){.......}
.card()
.margin({top:20,bottom:10})
.justifyContent(FlexAlign.SpaceEvenly)
}
}
@Component
struct TaskList {
//总任务数量
@Link totalTask:number
//已完成任务数量
@Link finishTask:number
//任务数组
@State tasks: Task[] = []
build() {
Column(){......}
}
代码框架2-@State@Link@Prop
class模式
class StatInfo{
totalTask:number = 0
//已完成任务数量
finishTask:number = 0
}
@Entry
@Component
struct ProPage {
//总任务数量
@State stat: StatInfo = new StatInfo()
build() {
Column({space:10}){
//任务进度
TaskStatistics({finishTask:this.stat.finishTask,totalTask:this.stat.totalTask})
//新增任务
TaskList({stat: $stat})
}
.width('100%')
.height('100%')
.backgroundColor('#F1F2F3')
}
}
@Component
struct TaskStatistics{
//总任务数量
@Prop totalTask:number
//已完成任务数量
@Prop finishTask:number
build(){
//任务进度
Row(){.....}
}
.card()
.margin({top:20,bottom:10})
.justifyContent(FlexAlign.SpaceEvenly)
}
}
@Component
struct TaskList {
//总任务数量
@Link stat: StatInfo
//任务数组
@State tasks: Task[] = []
build() {
Column(){......}
}
}
代码框架3-@Provide@Consume
适合跨组件时使用
浪费cpu算力,能用@State@Link就尽量不用@Provide@Consume
//任务统计信息
class StatInfo{
totalTask:number = 0
//已完成任务数量
finishTask:number = 0
}
@Entry
@Component
struct ProPage {
//总任务数量
@Provide stat: StatInfo = new StatInfo()
build() {
}
}
@Component
struct TaskStatistics{
//总任务数量
@Consume stat: StatInfo
build(){
}
}
@Component
struct TaskList {
//总任务数量
@Consume stat: StatInfo
//任务数组
@State tasks: Task[] = []
build() {
}
}