HarmonyOS 鸿蒙Next ArkTS ArkUI 声明式 请问课程表用什么组件实现？

HarmonyOS 鸿蒙Next ArkTS ArkUI 声明式 请问课程表用什么组件实现？

请教，ArkUI 声明式 课程表用什么组件实现？课程节数不是固定的，需要合并单元格。

课程表示例

做一个课程表功能


更多关于HarmonyOS 鸿蒙Next ArkTS ArkUI 声明式 请问课程表用什么组件实现？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

可以使用栅格组件，栅格布局 (GridRow/GridCol)。通过span控制子组件占栅格布局的列数，决定了子组件的宽度，默认为1。

样例代码效果图参考文档底部。

@Entry
@Component
struct GridRowExample {
  build() {
    GridRow() {
      GridCol({ span: { sm: 12 } }) {
        GridRow() {
          GridCol({ span: { sm: 2 } }) {
            Row() {
              Text('left').fontSize(24)
            }
            .justifyContent(FlexAlign.Center)
            .height('90%')
          }.backgroundColor('#ff41dbaa')

          GridCol({ span: { sm: 10 } }) {
            Row() {
              Text('right').fontSize(24)
            }
            .justifyContent(FlexAlign.Center)
            .height('90%')
          }.backgroundColor('#ff4168db')
        }
        .backgroundColor('#19000000')
      }

      GridCol({ span: { sm: 12 } }) {
        Row() {
          Text('footer').width('100%').textAlign(TextAlign.Center)
        }.width('100%').height('10%').backgroundColor(Color.Pink)
      }
    }.width('100%').height(300)
  }
}

以上是初步分析结论，如有疑问可以展开回复，看到后会继续协助定位阻碍点。

开源网站上收录了UI、系统接口、Web、创新特性等场景化鸿蒙示例DEMO，开发中可以参考：https://gitee.com/scenario-samples/demo-index

更多关于HarmonyOS 鸿蒙Next ArkTS ArkUI 声明式 请问课程表用什么组件实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统的ArkTS和ArkUI声明式开发环境中，实现课程表功能通常会用到一些布局组件和容器组件来组织和管理界面元素。具体来说，可以使用以下组件来实现课程表：

  1. List 或 Grid 组件：用于展示课程列表或课程网格，根据课程表的布局需求选择合适的组件。List组件适合线性排列的课程，而Grid组件则适合以网格形式展示课程。

  2. Card 组件：用于表示单个课程的卡片，可以包含课程名称、时间、地点等信息。Card组件提供了良好的视觉效果和用户体验。

  3. Stack 组件：如果需要在一个位置重叠显示多个课程信息（如课程冲突时的提示），可以使用Stack组件来堆叠不同的UI元素。

  4. Text 和 Image 组件：用于显示课程名称、时间等文本信息和课程相关的图标。

  5. Navigator 或 Link 组件（如果适用）：如果课程表需要导航到其他页面或详细信息，可以使用这些组件来实现页面跳转。

在开发过程中，你可以根据具体需求组合这些组件来构建课程表界面。如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html 。

回到顶部