HarmonyOS 鸿蒙Next中日期安排的表格如何实现？

HarmonyOS 鸿蒙Next中日期安排的表格如何实现？

像下面的布局，该用什么组件实现呢。用Grid好像不能很好的画出线条。

图像描述


更多关于HarmonyOS 鸿蒙Next中日期安排的表格如何实现？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

四楼写的非常好。建议采薇最佳答案！

再想GridRow + GridCol 栅格组件是不是也可以？用 GridRow 定义表格容器，通过 columns 参数设置栅格总列数：

GridRow({ columns: { sm: 7 } }) { // 周视图（7列）

  ForEach(this.dates, (dateItem: DateType) => {

    GridCol({ span: { sm: 1 } }) { // 每个单元格占1列

      DateCell(dateItem) // 自定义单元格组件

    }
  })
}

通过 Decorator 装饰器或容器组件的边框属性实现线条：

@Component

struct DateCell {

  build() {

    Column() {

      Text(this.dateItem.date)

        .fontSize(16)

    }
    .border({ width: 1, color: Color.Gray })
    .padding(5)
  }
}

更多关于HarmonyOS 鸿蒙Next中日期安排的表格如何实现？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你好，这个功能可以通过Grid轻松实现，以下是效果图：

cke_994.png

代码如下：

@Entry
@Component
struct Index {
  @State timeDat: string[] = ["星期/时间", "上午", "下午", "晚上"]
  @State weeks: string[] =
    ["周一", "每周出诊\n25人", "", "",
     "周二", "", "", "",
     "周三", "", "", "",
     "周四", "", "", "",
     "周五", "", "", "",
     "周六", "", "", "",
     "周日", "", "", "",
    ]

  build() {
    Column() {
      Grid() {
        ForEach(this.timeDat, (item: number) => {
          GridItem() {
            Text(item.toString())
          }.border({ width: 1, color: Color.Gray }).width("100%").height("100%") // 重点在这里，加边框
        })
      }
      .columnsTemplate("1fr 1fr 1fr 1fr")
      .width("100%")
      .columnsGap(0)
      .rowsGap(0)
      .maxCount(1)
      .height(50)

      Grid() {
        ForEach(this.weeks, (item: string) => {
          GridItem() {
            Text(item.toString())
              .textAlign(TextAlign.Center)
              .backgroundColor(item.length == 0 || item.indexOf("周") == 0 ? Color.White : Color.Orange)
              .width("100%")
              .height("100%")
          }.border({ width: 1, color: Color.Gray }).width("100%").height(53) // 重点在这里，加边框
        })
      }.rowsTemplate("1fr 1fr 1fr 1fr 1fr 1fr 1fr").columnsTemplate("1fr 1fr 1fr 1fr")
    }
    .padding(10)
    .alignItems(HorizontalAlign.Start)
    .justifyContent(FlexAlign.Start)
    .width('100%')
    .height("50%")
  }
}

边框代码加在 GridItem() 上，效果还可以，可以自己在调调。

Grid 即可实现,虽然设置border 无法实现

可以换种思路反着来，将Grid 的背景颜色设置为边框的颜色，设置Grid Item 之间的间距为边框的宽度就可以实现了

Grid() {
    ForEach(this.listArr, (item: string) => {
        GridItem() {
            Text(item)
                .width('100%')
                .height('100%')
                .fontSize(20)
                .fontColor(Color.Black)
                .textAlign(TextAlign.Center)
                .backgroundColor(Color.White)
        }
    })
}.backgroundColor(Color.Black)
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap(1)
.rowsGap(1)
.height(300)

这样就可以轻松实现你需要的这种效果了

可以使用Grid，划线很容易，你把这个表格分开看，其实相当于在一个长方形的方框里面做一个Grid。

所以长方形的最外边的背景设置透明，可以设置

.borderWidth(1)
.borderColor("#333333")

这样外面的边框就有了，接下来只需要设置里面的边框了，里面的可以在 GridItem 里面设置 Divider() 这个组件，就可以实现你要的效果。

Grid 也是可以做的，设置Grid的背景色为分割线的颜色，设置好item之间的间距，以及背景色，白或橙色。

.columnsGap(1)
.rowsGap(1)
.backgroundColor('#999')

在HarmonyOS Next中使用ArkUI的Grid组件实现日期表格布局。通过Grid的rowsTemplate和columnsTemplate属性定义行列结构，结合ForEach循环渲染日期单元格。数据部分使用Date类处理日期计算，用@State装饰器管理选中状态。示例代码结构：

@Entry
@Component
struct CalendarPage {
  [@State](/user/State) selectedDate: Date = new Date()
  // 日期数据准备逻辑...

  build() {
    Grid() {
      ForEach(this.dates, (date) => {
        GridItem() {
          Text(date.getDate().toString())
          // 单元格样式和交互处理
        }
      })
    }
    .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
    .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
  }
}

在HarmonyOS Next中实现日期安排的表格布局，推荐使用TableContainer+TableRow+TableCell组件组合。这种方案比Grid更适合表格类布局，能自动处理边框和单元格对齐。

关键实现步骤：

  1. 使用TableContainer作为表格容器
  2. 每行用TableRow实现
  3. 每个单元格用TableCell包裹内容
  4. 通过border属性设置边框样式

示例代码片段：

TableContainer({ border: { width: 1, color: Color.Black } }) {
  TableRow() {
    ForEach(this.dayHeaders, (day) => {
      TableCell() {
        Text(day)
      }
    })
  }
  ForEach(this.scheduleData, (item) => {
    TableRow() {
      TableCell() {
        Text(item.time)
      }
      TableCell() {
        Text(item.event)
      }
    }
  })
}

如果需要合并单元格，可以通过rowSpan和colSpan属性实现。表格样式可以通过修改border、width等属性自定义。

回到顶部