美文网首页
构建更加丰富的页面=>案例解析2

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

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

上一节已完成内容区域界面，通过页面状态管理@state @prop实现了组件间页面数据的传输，这一节，我们完善列表功能。

=> 实现一个简单的列表功能

@Component
export default struct TargetList {
  targetData: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']

  build() {
    Column() {
      Row() {
        Text('子目标')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor('#182431')
      }
      .width('100%')
      .height(30)
      .padding({ left: 16, right: 11 })

      List({ space: 5 }) {
        ForEach(this.targetData, (item: string, index: number) => {
          ListItem() {
            Text(item)
              .height(30)
              .width('100%')
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Pink)
          }
        }, (item: string) => JSON.stringify(item))
      }
      .edgeEffect(EdgeEffect.None)
      .margin({ top: 12 })
      .width('100%')
      .height('80%')

      Blank()
      Button('添加子目标')
        .operateButtonStyle('#007dff')
        .onClick(() => {
          prompt.showToast({
            message:'按钮被点击了',
            duration:1000
          })
        })
    }
    .width('93.3%')
    .height('100%')
    .padding({ top: 16 })
  }
}

@Extend(Button) function operateButtonStyle(color: string) {
  .width(156)
  .height(40)
  .fontSize(16)
  .fontWeight(FontWeight.Bold)
  .fontColor(color)
  .backgroundColor('#0d182431')
}

效果图如下：


image.png

那么问题来了，这里有一个button按钮，子组件的按钮点击事件怎么可以让父组件调用呢？
事件回调

import prompt from '@ohos.prompt'

@Component
export default struct TargetList {
  targetData: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
  onAddClick?: () => void

  build() {
    Column() {
      ...
      Button('添加子目标')
        .operateButtonStyle('#007dff')
        .onClick(() => {
          this.onAddClick()
        })
    }
  ...
  }
}
...
}

在index父组件中调用子组件

import prompt from '@ohos.prompt'
import TargetInformation from '../view/TargetInformation'
import TargetList from '../view/TargetList'

@Entry
@Component
struct Index {
  @State latestUpdateDate: string = '2023-12-13 23:00'
  @State totalTasksNumber: number = 3
  @State completedTasksNumber: number = 1

  build() {
    Column() {
      ...
      //List列表
      TargetList({
        onAddClick:()=>prompt.showToast({
          message:'现在是父组件调用button',
          duration:1000
        })
      })
        .height('67%')
    }
    ...
  }
  ...
}

现在点击按钮，你会发现，父组件响应了该事件弹出提示框。


image.png

=> 实现弹窗，先搭架子

import prompt from '@ohos.prompt'
import TargetInformation from '../view/TargetInformation'
import TargetList from '../view/TargetList'

@Entry
@Component
struct Index {
  @State latestUpdateDate: string = '2023-12-13 23:00'
  @State totalTasksNumber: number = 3
  @State completedTasksNumber: number = 1
  dialogController: CustomDialogController = new CustomDialogController({
    builder: () => prompt.showToast({
      message: '现在是在弹窗调用button',
      duration: 1000
    }),
    alignment: DialogAlignment.Bottom,
    offset: {
      dx: 0,
      dy: -16
    },
    customStyle: true,
    autoCancel: false
  })

  build() {
    Column() {
     ...
      //List列表
      TargetList({
        onAddClick: () => this.dialogController.open()
      })
        .height('67%')
    }
   ...
  }
...
}
image.png

=> 实现弹窗，画弹窗界面
新建AddTargetDialog类，需要添加@CustomDialog注解，注意此处不是添加组件，因此不是添加@Component！！！

import prompt from '@ohos.prompt'
import AddTargetDialog from '../view/AddTargetDialog'
import TargetInformation from '../view/TargetInformation'
import TargetList from '../view/TargetList'

@Entry
@Component
struct Index {
  @State latestUpdateDate: string = '2023-12-13 23:00'
  @State totalTasksNumber: number = 3
  @State completedTasksNumber: number = 1
  dialogController: CustomDialogController = new CustomDialogController({
    builder: AddTargetDialog(),
    alignment: DialogAlignment.Bottom,
    offset: {
      dx: 0,
      dy: -16
    },
    customStyle: true,
    autoCancel: false
  });

 ...
...
}

@CustomDialog
export default struct AddTargetDialog {
  /**
   * @CustomDialog component should have a property of the CustomDialogController type.
   * @CustomDialog组件应具有CustomDialogController类型的属性。
   */
  private controller?: CustomDialogController;
  build() {
    Column() {
      Text('添加子目标')
    }
    .height(168)
    .width('90.3%')
    .padding(24)
    .borderRadius(32)
    .backgroundColor(Color.White)
  }
}
image.png

此时，弹窗出现了，继续优化弹窗界面

import prompt from '@ohos.prompt';
@CustomDialog
export default struct AddTargetDialog {
  /**
   * @CustomDialog component should have a property of the CustomDialogController type.
   * @CustomDialog组件应具有CustomDialogController类型的属性。
   */
  private controller?: CustomDialogController;
  onClickOk?: (value: string) => void

  build() {
    Column() {
      Text('添加子目标')
        .width('100%')
        .fontSize(20)
        .fontColor('#182431')
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Start)

      TextInput({ placeholder: '请输入子目标名称' })
        .placeholderColor(Color.Gray)
        .placeholderFont({ size: 16 })
        .caretColor(Color.Blue) //光标的颜色
        .backgroundColor('$0d182431')
        .width('100%')
        .height('40%')
        .margin({ top: '6%' })
        .fontSize(16)
        .fontColor('#182431')

      Blank()
      Row() {
        Button('取消')
          .dialogButtonStyle()
          .width('50%')
          .onClick(() => {
            this.controller.close()
          })

        Divider().vertical(true)

        Button('确定')
          .dialogButtonStyle()
          .width('50%')
          .onClick(() => {
            prompt.showToast({
              message:'点击了确定'
            })
          })
      }
      .width('100%')
      .height('10%')
      .justifyContent(FlexAlign.Center)
    }
    .height(168)
    .width('90.3%')
    .padding(24)
    .borderRadius(32)
    .backgroundColor(Color.White)
  }
}

@Extend(Button) function dialogButtonStyle() {
  .fontSize(16)
  .height(32)
  .width(96)
  .backgroundColor(Color.White)
  .fontColor("#007dff")
}
image.png

此时，点击取消，弹窗消息，点击确定，出现提示框。
那么问题来了，我们现在需要点击确定，获取输入框的文字，点击确定后，传递给父组件
=> 继续完善代码

@CustomDialog
export default struct AddTargetDialog {
      ...
  @State subTaskName:string = ''
  build() {
    Column() {
        ...
      TextInput({ placeholder: '请输入子目标名称' })
        ...
          //添加输入框文本监听事件
        .onChange((value:string)=>{
          this.subTaskName = value
        })
      Blank()
      Row() {
       ...
        Button('确定')
          .dialogButtonStyle()
          .width('50%')
          .onClick(() => {
              //获取输入框文本
            prompt.showToast({
              message:this.subTaskName
            })
          })
      }
     ...
    }
...
  }
}
...
image.png

现在点击确定，toast提示框则提示输入框中的文字。

思考：list数组在TargetList组件，添加数组在AddTargetDialog弹窗界面，他们数据怎么做到互通呢？

回答：通过父组件容器！！！

import prompt from '@ohos.prompt'

@Component
export default struct TargetList {
  @Link targetData: string[] //添加@link与父组件进行绑定
  onAddClick?: () => void
  ...
}
...

import prompt from '@ohos.prompt'
import AddTargetDialog from '../view/AddTargetDialog'
import TargetInformation from '../view/TargetInformation'
import TargetList from '../view/TargetList'

@Entry
@Component
struct Index {
  @State latestUpdateDate: string = '2023-12-13 23:00'
  @State totalTasksNumber: number = 3
  @State completedTasksNumber: number = 1
  @State targetData: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']

  build() {
    Column() {
     ...
      //List列表
      TargetList({
        targetData: $targetData,  //这里需要使用$符号，被@link装饰的不能用this
        onAddClick: () => this.dialogController.open()
      })
        .height('67%')
    }
   ...
  }
  ...
  }
}

点击添加子目标按钮，将数据传递到list中

import prompt from '@ohos.prompt'
import AddTargetDialog from '../view/AddTargetDialog'
import TargetInformation from '../view/TargetInformation'
import TargetList from '../view/TargetList'

@Entry
@Component
struct Index {
  @State latestUpdateDate: string = '2023-12-13 23:00'
  @State totalTasksNumber: number = 3
  @State completedTasksNumber: number = 1
  @State targetData: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']

  dialogController: CustomDialogController = new CustomDialogController({
    builder: AddTargetDialog({
      onClickOk:(value:string):void => this.saveTask(value)
    }),
    alignment: DialogAlignment.Bottom,
    offset: {
      dx: 0,
      dy: -16
    },
    customStyle: true,
    autoCancel: false
  });

  saveTask(taskName:string){
    this.targetData.push(taskName)
    this.dialogController.close()
  }

  build() {
    Column() {
      ...
      //List列表
      TargetList({
        targetData: $targetData,
        onAddClick: () => this.dialogController.open()
      })
        .height('67%')
    }
    ...
  }
  ...
}
33.gif

效果图如下，我们已经将数据添加到list数组中。

下一步，我们将对list的item进行完善。

相关文章

  • 90-10 好图～一图胜千言

    今天来个嘎嘣脆，直接上案例哦。 案例一： 案例解析： 1、信息才是页面最重要的因素 ...

  • 使用Java开发HarmonyOS

    开发准备 本文适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转功能的应用（如下图预览器运行...

  • 页面构建

    页面构建阶段从浏览器接收页面代码开始。其执行分为两个阶段： html解析和dom构建 javascript等脚本代...

  • 教育增长圈，7期8组，小核桃，第2次作业

    《第一课 作业主题》 D2教育模型解析：行业积累 作业模板——教育行业摸底 ---- 8组-小核桃 拆解案例：煤老...

  • 页面渲染及性能优化

    页面渲染的过程 构建DOM树解析HTML，创建DOM树，解析过程:如果遇到link & style，就会去下载这些...

  • 6组-刘宇昕-第二次作业

    Day2 作业主题 《第一课|教育模型解析：行业积累》 作业模板——教育行业摸底 例：1组-小嘉 拆解案例：白熊课...

  • 页面渲染过程与回流重绘

    页面渲染过程 解析HTML，生成DOM树，解析CSS，生成CSSOM树 结合（DOM）和（CSSOM）构建一个渲染...

  • 浏览器渲染页面过程

    浏览器渲染页面过程 1. 构建DOM和CSSOM树 浏览器渲染页面前需要构建DOM和CSSOM树 浏览器解析过程大...

  • 浏览器渲染流程及其性能优化分析

    渲染流程 一个页面呈现通过浏览器呈现到出来，会经过以下步骤 解析页面内容 构建DOM树 构建CSSOM树 合并DO...

  • 【教育增长圈7期】-6组-阿飞-第2次作业

    《第一课 作业主题》 D2教育模型解析：行业积累 作业模板——教育行业摸底 拆解案例：轻课名师大班课 一、营销模型...

网友评论

      本文标题：构建更加丰富的页面=>案例解析2

      本文链接：https://www.haomeiwen.com/subject/hekbgdtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|构建更加丰富的页面=>案例解析2|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！