华为鸿蒙北向应用开发DAY11——来自软通教育项目实训

华为鸿蒙北向应用开发课程详情与播放实训

原创

已于 2022-11-09 10:47:19 修改 · 904 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为

于 2022-06-16 14:11:37 首次发布

本文记录了在华为鸿蒙系统上进行北向应用开发的过程，主要任务包括实现课程详情的展开功能和课程视频播放。在课程详情展示中，通过点击图标触发showPanel方法，弹出面板显示完整简介。在处理课程目录时，遇到子目录无法正常展开的问题，通过调整div高度解决。视频播放功能相对简单，但在模拟器上可能出现因内存不足导致的黑屏问题。

今日任务是完成课程详情和课程视频播放

其中，简介一栏在未点击时只能显示一部分内容，当点击图标后会调用showPanel方法，之后会弹出一个panel显示完整的简介

课程目录的设置中还应该判断该目录是否有子目录，如果有也要逐一显示

此处出现问题，如果先打开第二章的子目录，则第一章的子目录无法打开，先打开第一章再打开第二章则可以，关闭同样需要先关闭第一章再关闭第二章，询问老师后知道是高度不足导致的，在目录部分的div中加上 height=100%，就可以解决了。

<div class="container">
    <div style="width: 100%; height: 40px; align-items: center; margin:10px 0 5px 0;">
        <div style="width: 10%; height:100%;align-items: center; justify-content: center;" onclick="goBack" >
            <image style="width: 14px; object-fit: contain;" src="common/icon/ge.png"></image>
        </div>
        <div style="width: 80%; height: 100%; align-items: center; justify-content: center;">
            <text style="font-size: 16px;">课程详情</text>
        </div>
        <div style="width: 10%; height: 100%; align-items: center; justify-content: center;">
        </div>
    </div>
    <div style="width: 100%; height: 110px; align-items: center; justify-content: center; margin-top: 10px;">
        <div style="width: 38%; height: 100%;">
            <image src="{
  
  {course.cover}}" style="width: 95%; object-fit: contain; border-radius: 5px;"></image>
        </div>
        <div style="width: 60%; height: 100%;flex-direction: column; margin: 0 5px 0 5px;">
            <div style="width: 100%;height: 25%;">
                <text style="font-size: 14px; height: 100%;color: black; ">{
  
  {course.name}}</text>
            </div>
            <div style="width: 100%;height: 25%; justify-content: space-between; font-size: 12px;">
                <text style="height: 100%; color: #949494;">{
  
  {course.teacher}} | {
  
  {course.classHour}}课时</text>
                <text style="height: 100%; color: #949494;">{
  
  {course.studyNum}}人在学</text>
            </div>
            <div style="width: 100%;height: 35%; align-items: center;justify-content: space-between;">
                <rating style="width: 80px; height: 14px;" numstars="5" rating="{
  
  {course.score}}"></rating>
                <div style="width: 60%; justify-content: flex-end;">
                    <div class="title-spring">
                        <text>Spring</text>
                    </div>
                    <div class="title-spring">
                        <text>Spring</text>
                    </div>
                    <div class="title-spring">
                        <text>Spring</text>
                    </div>
                </div>
            </div>
            <div style="width: 100%;height: 15%; color: #949494; align-items: center; justify-content: space-between;">
                <

最低0.47元/天解锁文章