【鸿蒙next开发】ArkUI框架：ArkTS组件-GridCol

于 2025-05-19 13:53:27 发布
阅读量776 收藏 12
点赞数 27
分类专栏： ArkUI框架 鸿蒙5.0开发 ArkTS组件 文章标签： harmonyos 华为 ArkTS ArkUI android 鸿蒙系统 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/148061946
版权

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

GridCol

栅格子组件，必须作为栅格容器组件(GridRow)的子组件使用。

说明

该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含单个子组件。

接口

GridCol(option?: GridColOptions)

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionGridColOptions否栅格布局子组件参数。

GridColOptions对象说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
spannumber | GridColColumnOption否

栅格子组件占用栅格容器组件的列数。span为0表示该元素不参与布局计算，即不会被渲染。

默认值：1

offsetnumber | GridColColumnOption否

栅格子组件相对于原本位置偏移的列数。

默认值：0

ordernumber | GridColColumnOption否

元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。

默认值：0

说明：

当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。

当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。

span、offset、order属性按照xs、sm、md、lg、xl、xxl的顺序具有“继承性”，未设置值的断点将会从前一个断点取值。

属性

除支持通用属性外，还支持以下属性：

span

span(value: number | GridColColumnOption)

设置占用列数。span为0，意味着该元素不参与布局计算，即不会被渲染。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | GridColColumnOption是

占用列数。

默认值：1

gridColOffset

gridColOffset(value: number | GridColColumnOption)

设置相对于前一个栅格子组件偏移的列数。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | GridColColumnOption是

相对于前一个栅格子组件偏移的列数。

默认值：0

order

order(value: number | GridColColumnOption)

设置元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber | GridColColumnOption是

元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。

默认值：0

GridColColumnOption

用于自定义指定在不同宽度设备类型上，栅格子组件占据的栅格数量单位。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
xsnumber否在栅格大小为xs的设备上，栅格容器组件的栅格列数。
smnumber否在栅格大小为sm的设备上，栅格容器组件的栅格列数。
mdnumber否在栅格大小为md的设备上，栅格容器组件的栅格列数。
lgnumber否在栅格大小为lg的设备上，栅格容器组件的栅格列数。
xlnumber否在栅格大小为xl的设备上，栅格容器组件的栅格列数。
xxlnumber否在栅格大小为xxl的设备上，栅格容器组件的栅格列数。

鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：GridCol）
m0_64420071的博客
03-14 1063
ArkTS声明式开发（容器组件：GridCol）
HarmonyOS应用开发：GridRow（容器组件）
situnanQAQ的博客
06-14 1217
栅格布局可以为布局提供规律性的结构
鸿蒙5.0开发进阶：JS组件-栅格组件（grid-col）
Androidbye的博客
03-03 852
grid-col是栅格布局容器grid-row的子容器组件。
鸿蒙开发：ArkTS GridCol容器组件
10-28 692
ArkTS支持多范式编程，包括面向对象编程、函数式编程和响应式编程，为开发者提供了更多的编程选择和灵活性。今天给大家分享ArkTS GridCol容器组件技术知识，如果有所帮助，大家点点关注支持一下，也可以联系上我一起学习。
【愚公系列】2023年12月 HarmonyOS教学课程 009-ArkUI组件（GridRow/GridCol）
热门推荐
时光隧道
12-02 6万+
栅格布局是一种通用的辅助定位工具，可以帮助开发人员解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，栅格布局提供了可循的规律性结构，方便开发人员对页面元素进行定位和排版。此外，栅格布局还提供了一种统一的定位标注，帮助保证不同设备上各个模块的布局一致性，减少设计和开发的复杂度，提高工作效率。栅格布局还具有灵活的间距调整方法，可以满足特殊场景布局调整的需求。同时，自动换行和自适应功能使得栅格布局能够完成一对多布局，并自动适应不同设备上的排版。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（自定义绘制设置）
Androidbye的博客
12-27 915
当某些组件本身的绘制内容不满足需求时...........
鸿蒙5.0版开发：ArkTS组件-Grid
m0_69424697的博客
11-05 944
网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
HarmonyOS鸿蒙开发学习：鸿蒙基础-基础环境-ArkTS-组件-样式
专注移动开发
08-05 1839
下载对应的版本API12 的编辑器 API12的模拟器(mac英特尔安装API11)解压编辑器版本 将左侧内容拖入点击打开 新建一个路径 HarmonyOS-SDK 将资源下载包中的sdk的内容进行解压，放入到刚刚新建的目录 将设置中的安装路径改变成新建的目录，最终点击确认，sdk就安装好了打开原有项目发现 一个配置文件的依赖，线上没有提供云下载地址，只能采用离线的版本 。hvigor下载资源包中，还有提供一个dependencies， 这就是我们需要替换的版本 internal-plugin-S
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（Flex布局）
Androidbye的博客
12-19 638
通过配置flexBasis/flexGrow/flexShrink/alignSelf属性设置Flex布局。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（栅格设置）
Androidbye的博客
12-23 1050
栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。
栅格布局（GridRow/GridCol）
01-11 3770
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。
2024年鸿蒙最全鸿蒙HarmonyOS实战-ArkUI组件（GridRow GridCol）_gridview 鸿蒙，体系面试一般问些什么
2401_84853495的博客
05-10 820
)3、公用@Entry@Componentbuild() {Row() {Text(})若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里只设置sm:4, md:8，则较小尺寸的xs:12，较大尺寸的参照md的设置，lg:8, xl:8, xxl:8。
【HarmonyOS4.0】第十一篇-ArkUI布局容器组件(三)
weixin_42533732的博客
01-15 1954
参数type：设置侧边栏的显示类型，Embed：侧边栏嵌入到组件内，侧边栏和内容区并列显示。Overlay：侧边栏浮在内容区上面。@Entry@Componentbuild() {/*** Embed：侧边栏嵌入到组件内，侧边栏和内容区并列显示。* Overlay：侧边栏浮在内容区上面。*/Column(){Text("侧边栏区域").width("100%").height("100%").fontSize(30).textAlign(TextAlign.Center)
鸿蒙HarmonyOS实战-ArkUI组件（GridRow/GridCol）
单口相声Jay
03-28 2573
栅格布局是一种通用的辅助定位工具，可以帮助开发人员解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，栅格布局提供了可循的规律性结构，方便开发人员对页面元素进行定位和排版。此外，栅格布局还提供了一种统一的定位标注，帮助保证不同设备上各个模块的布局一致性，减少设计和开发的复杂度，提高工作效率。栅格布局还具有灵活的间距调整方法，可以满足特殊场景布局调整的需求。同时，自动换行和自适应功能使得栅格布局能够完成一对多布局，并自动适应不同设备上的排版。
第十三讲_ArkUI栅格布局（GridRow/GrowCol）
wenqi1992的博客
01-24 2236
介绍ArkUI栅格布局GridRow和GrowCol
已饱和，未来程序员真没法再干了？_程序员干不了活(1)，HarmonyOS鸿蒙 基础面试
2401_84181501的博客
04-15 592
是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
HarmonyOS应用开发：GridCol（容器组件）
situnanQAQ的博客
06-13 1055
栅格子组件，必须作为栅格容器组件(GridRow)的子组件使用。
2024年HarmonyOS鸿蒙最全鸿蒙HarmonyOS实战-ArkUI组件（GridRow GridCol）_gridview 鸿蒙，怒肝三个月啃完这110道面试题
2401_84862323的博客
05-14 944
)2、设置列数当columns为自定义值，栅格布局在任何尺寸设备下都被分为columns列。@Entry@Componentbuild() {Row() {Row() {Text(})})3、公用@Entry@Componentbuild() {Row() {Text(})
{"widgetList":[{"id":"htmltext41248","key":92692,"icon":"html-text","type":"html-text","options":{"name":"htmltext41248","label":"html-text","hidden":false,"onCreated":"","onMounted":"","columnWidth":"200px","customClass":[],"htmlContent":"<p style=\"font-family:宋体;text-align:left;font-weight:bold;color:black;font-size:20px\">请选定本次申请依托的研究项目</p>"},"formItemFlag":false},{"id":"grid98449","key":53170,"cols":[{"id":"grid-col-111377","icon":"grid-col","type":"grid-col","options":{"md":8,"sm":8,"xs":8,"name":"gridCol111377","pull":0,"push":0,"span":4,"hidden":false,"offset":0,"responsive":false,"customClass":""},"category":"container","internal":true,"widgetList":[]},{"id":"grid-col-61535","icon":"grid-col","type":"grid-col","options":{"md":8,"sm":8,"xs":8,"name":"gridCol61535","pull":0,"push":0,"span":16,"hidden":false,"offset":0,"responsive":false,"customClass":[]},"category":"container","internal":true,"widgetList":[{"id":"select41798","key":46832,"icon":"select-field","type":"select","options":{"name":"project_BSN","size":"","label":"研究项目","dsName":"10已受理的研究项目","hidden":false,"onBlur":"","remote":true,"keyName":"","onFocus":"","disabled":false,"labelKey":"newLabel","multiple":false,"onChange":"","required":true,"valueKey":"project_BSN","clearable":true,"dsEnabled":true,"labelWrap":false,"onCreated":"","onMounted":"","filterable":false,"labelAlign":"","onValidate":"","validation":"","allowCreate":false,"columnWidth":"200px","customClass":[],"dataSetName":"","labelHidden":true,"optionItems":[{"label":"select 1","value":1},{"label":"select 2","value":2},{"label":"select 3","value":3}],"placeholder":"","collapseTags":false,"defaultValue":"","requiredHint":"","multipleLimit":0,"onRemoteQuery":"","keyNameEnabled":false,"validationHint":"","optionValueType":"","automaticDropdown":false,"labelIconPosition":"rear"},"formItemFlag":true}]},{"id":"grid-col-111115","icon":"grid-col","type":"grid-col","options":{"md":8,"sm":8,"xs":8,"name":"gridCol111115","pull":0,"push":0,"span":4
最新发布
04-03
<think>好的，我现在需要帮用户解析一个包含HTML文本和动态数据源选择框的复杂JSON配置文件。首先，我要理解用户的具体需求。用户提到JSON结构中有HTML文本组件和表单选择器，特别是动态数据源的选择框。这意味着选择框的数据可能来自外部API、数据库或其他服务，需要动态加载。 接下来，我应该参考用户提供的引用资料。根据引用[1]，vue-layout-composer可以处理JSON布局配置，这可能涉及到组件创建和配置。引用[3]提到将压缩的JSON节点数据转换为行数据，可能需要解析和转换JSON结构。引用[4]讨论了动态数据源的切换方法，包括API接口和环境变量，这可能与动态数据源选择框的实现相关。 首先，解析JSON结构是关键。用户需要明确JSON的各个部分，比如HTML内容、选择框配置、数据源信息。我需要建议用户先定义JSON的结构，例如使用sections数组包含不同类型的组件，每个组件有类型、属性和数据源等信息。例如，HTML组件可能有content属性，而选择框组件可能有optionsDataSource指定数据源URL。 然后，处理HTML内容。根据引用[2]，使用安全高效的HTML展示组件，比如超文本浏览框，可以渲染HTML内容。但需要注意XSS安全问题，避免直接插入未处理的HTML，应使用安全的库或框架来处理。 接下来是动态数据源的选择框。这里需要从JSON配置中获取数据源信息，比如API端点。根据引用[4]，动态数据源可能通过API接口获取，因此需要发送HTTP请求获取数据，然后解析并填充到选择框中。例如，使用JavaScript的fetch方法获取数据，再更新选择框的选项。 同时，数据绑定和动态更新也很重要。引用[2]提到动态内容更新需要处理DOM操作和事件绑定，现代前端框架如Vue.js可以简化这一过程。比如，使用vue-layout-composer（引用[1]）可以根据JSON配置动态生成组件，并处理数据绑定。当数据源变化时，通过响应式机制自动更新选择框选项。 在代码实现方面，可能需要使用到JSON解析库，如JavaScript的JSON.parse，以及HTTP客户端来获取数据。同时，前端框架的组件系统可以帮助管理HTML和动态表单元素。例如，在Vue中，可以定义组件，根据JSON配置渲染对应的HTML或表单元素，并通过methods和生命周期钩子处理数据获取和更新。 还需要考虑错误处理和加载状态。当动态获取数据源时，网络请求可能会失败，或者数据格式不符合预期，因此需要添加错误处理机制，比如try-catch块或.catch()方法，以及加载中的提示信息。 安全性方面，特别是处理用户提供的HTML内容，必须防止XSS攻击。可以使用DOMPurify等库对HTML进行清理，确保没有恶意脚本被执行。引用[2]提到的超文本浏览框3.2静态修复版可能已经考虑了安全性，但如果是自定义实现，需要特别注意这一点。 最后，整合所有部分，确保JSON配置正确解析，HTML渲染安全，动态数据源选择框能够正确加载并更新数据。可能需要分步骤实现，先解析JSON结构，再处理静态HTML部分，最后实现动态数据源的获取和绑定。同时，参考引用中的方法，如环境变量配置数据源（引用[4]），可以增加灵活性，允许通过配置更改数据源而不修改代码。 总结来说，步骤大致如下： 1. 定义清晰的JSON结构，区分不同类型组件及其数据源。 2. 使用安全的方法渲染HTML内容。 3. 动态获取选择框数据并填充，处理数据绑定和更新。 4. 利用前端框架简化DOM操作和事件处理。 5. 添加错误处理和安全性措施。 6. 测试整个流程，确保各组件协同工作。</think>### 解析含有HTML文本和动态数据源选择框的JSON配置文件 #### 一、JSON结构分析 需要明确JSON配置的层级结构，通常包含以下部分： 1. **HTML文本组件**：存储HTML片段或模板，可能包含动态变量（如`{{title}}`）[^2]。 2. **表单选择器**：定义选择框的标签、选项数据源（如API接口、数据库查询）、默认值等[^4]。 3. **数据绑定规则**：描述如何将动态数据源与表单组件关联（例如通过`dataSource: "api/getOptions"`指定数据源）。 示例JSON结构： ```json { "components": [ { "type": "html", "content": "<div class='header'>{{title}}</div>" }, { "type": "select", "id": "dynamic_select", "label": "选择城市", "dataSource": "api/cities", "default": "beijing" } ] } ``` #### 二、关键解析步骤 1. **解析HTML文本组件** - **动态变量替换**：使用模板引擎（如Handlebars）替换`{{title}}`为实际值[^3]。 - **安全渲染**：通过类似`DOMPurify.sanitize(content)`的方法防止XSS攻击[^2]。 2. **处理动态数据源选择框** - **数据获取**：根据`dataSource`字段调用API接口（如`fetch('api/cities')`）获取选项数据。 - **数据绑定**：将返回的JSON数据转换为`<option>`标签，例如： ```javascript options.forEach(item => { selectElement.innerHTML += `<option value="${item.id}">${item.name}</option>`; }); ``` 3. **组件动态生成** - **框架集成**：使用类似`vue-layout-composer`的库，根据JSON配置自动生成组件并绑定事件[^1]。 - **响应式更新**：通过前端框架（如Vue）监听数据源变化，实现选择框选项的实时更新。 #### 三、代码实现示例（JavaScript） ```javascript // 1. 解析JSON配置 const config = JSON.parse(jsonString); // 2. 遍历组件列表 config.components.forEach(component => { if (component.type === 'html') { // 渲染HTML并插入DOM const sanitizedHTML = DOMPurify.sanitize(component.content); document.getElementById('container').innerHTML += sanitizedHTML; } else if (component.type === 'select') { // 创建选择框并绑定数据源 const select = document.createElement('select'); select.id = component.id; // 动态获取选项数据 fetch(component.dataSource) .then(response => response.json()) .then(options => { options.forEach(opt => { const option = document.createElement('option'); option.value = opt.value; option.textContent = opt.label; select.appendChild(option); }); }); document.body.appendChild(select); } }); ``` #### 四、优化与安全建议 1. **数据缓存**：对频繁调用的数据源（如城市列表）添加本地缓存，减少API请求次数[^4]。 2. **错误处理**：在数据获取失败时显示友好提示： ```javascript fetch(dataSource).catch(err => { console.error(`数据源加载失败: ${component.id}`, err); select.innerHTML = `<option>数据加载失败</option>`; }); ``` 3. **动态数据源扩展**：支持环境变量注入数据源URL（如`process.env.API_URL`），提升灵活性[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值