HarmonyOS鸿蒙Next中怎么写出表格样式

HarmonyOS鸿蒙Next中怎么写出表格样式 才接触next开发，对很多东西在摸索中，对于HarmonyOS鸿蒙Next中怎么写出表格样式的资料找了很久没找到。有无大神能给点指点

图片


更多关于HarmonyOS鸿蒙Next中怎么写出表格样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

目前没有表格组件，可以使用web组件引入一个本地的html，在html中绘制一个表格。

参考

import web_webview from '@ohos.web.webview'
@Entry
@Component
struct TableHtml{
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build(){
    Column(){
      Button("点击此处，加载HTML富文本").onClick(()=>{
        this.controller.loadData(
          `<html>
<head>
<style>
.table-font-size{
font-size:20px;
}
</style>
</head>
<body bgcolor="white">
<table width="1000" border="5" height="1000">
<tr class="table-font-size">
<th>Month</th>
<th>Month</th>
</tr>
<tr class="table-font-size">
<th>Month</th>
<th>Month</th>
</tr>
<tr class="table-font-size">
<th>Month</th>
<th>Month</th>
</tr>
<tr class="table-font-size">
<th>Month</th>
<th>Month</th>
</tr>
</table>
</body></html>`,
          "text/html",
          "UTF-8"
        );
      })
      // 通过$rawfile加载本地资源文件。
      Web({ src: 'www', controller: this.controller })
        .javaScriptAccess(true).domStorageAccess(true).fileAccess(true)
      //.defaultFontSize(this.fontSize)
    }
  }
}

更多关于HarmonyOS鸿蒙Next中怎么写出表格样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过TableLayout组件实现表格样式。TableLayout允许你定义行和列，并通过TableRow添加子组件。以下是一个简单示例：

列1 列2
数据1 数据2

通过layout_weight属性可以控制列的宽度比例。

回到顶部