OpenHarmony DevEco Studio使用指南-低代码开发

低代码多语言支持及屏幕适配

多语言支持

低代码页面支持多语言能力，让应用开发者无需开发多个不同语言的版本。开发者可以通过定义资源文件和引用资源两个步骤以使用多语言能力。低代码多语言能力当前仅支持JS语言的FA或卡片。

1. 在指定的i18n文件夹内创建多语言资源文件及对应字符串信息。

2. 在低代码页面的属性样式栏中使用$t方法引用资源，系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。$t相关说明请参考​​多语言支持​​。

如下图所示，在属性栏中引用了字符串资源后，打开预览器即可预览展示效果。

说明

引用资源后，暂不支持在低代码页面内显示多语言的内容，开发者可通过previewer、模拟器及真机查看引用资源后的具体效果。

屏幕适配

对于屏幕适配问题，低代码页面支持两种配置方法。

• designWidth为屏幕逻辑宽度，所有与大小相关的样式（例如Width、FontSize）均以designWidth和实际屏幕宽度的比例进行缩放。例如设置designWidth为720px，Width为100px时，在实际宽度为1440物理像素的屏幕上，Width实际渲染像素为200物理像素。
• 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。如低代码页面默认的分辨率为1080*2340，屏幕密度为3的场景，此场景下1px等于渲染出3个物理像素。例如设置Width为100px时，Width实际渲染像素为300物理像素。

说明

以上屏幕适配两种配置方法仅适用于JS语言的FA或卡片。

designWidth和autoDesignWidth相关具体概念请参考​​js标签配置​​。

对于ArkTS语言，修改designWidth不会对画布尺寸产生影响，只会影响到lpx转px的比率，lpx和px的转化关系是 1 lpx = （画布宽度 / designWidth）px；修改autoDesignWidth不会对页面产生影响。

低代码开发Demo示例

接下来为大家展示一个ArkTS低代码开发的Demo示例，使用低代码开发如下运动健康页面。

1. 删除模板页面中的控件后，选中组件栏中的Column组件，将其拖至中央画布区域，松开鼠标，实现一个Column组件的添加，并按住控件的resize按钮，将Column拉大。在Column组件添加完成后，用同样的方法依次拖拽Text、Image、Text组件至Column组件内。

2. 在关联ets文件中定义@State变量title为"Activity Plan"，并定义changeMessage()方法。选中画布最上方的Text组件，单击右侧属性栏中的属性图标

(Feature)，在展开的Feature栏中为Content属性绑定message变量。修改字体大小FontSize、字体颜色FontColor，水平对齐方式TextAlign。单击

(Events)图标，为Text组件绑定onClick事件，并关联changeMessage方法。

3. 选中画布下方Text组件，调整组件大小，单击

(Feature)图标，依次修改Content、FontSize、FontColor、TextAlign属性。单击

(General)图标，单击BackgroundImageSrc属性中的图片选择器按钮，选择背景图片，选择完毕后设置BackgroundImageSize属性。

4. 选中画布中Image组件，单击

(Feature)图标，单击BackgroundImageSrc属性中的图片选择器按钮，选择图片。

5. 从组件栏中选中一个Column组件拖至画布中Column组件下方，单击属性图标

(General)，在展开的General栏中修改Column组件的宽高。单击

(Feature)，修改AlignItems属性为start，使Column的子组件靠左对齐。向Column组件内拖入一个Text组件，填充文本内容Content，并修改字体大小FontSize和颜色FontColor

6. 在内容为Plan的Text组件下方拖入一个Row组件，依次修改背景色及透明度BcakgroundColor、边框圆角BorderRadius、外边距MarginTop。

7. 在Row组件内部依次拖入Image组件和Column组件，调整组件大小，继续向Column组件内部拖入Text组件并调整大小，复制粘贴该Text组件，并在被粘贴出来的Text组件下方拖入Progress组件并调整大小。

8. 调整Row组件大小，给Text组件填充文本内容Content并修改字体大小FontSize和颜色FontColor，修改Progress组件的Value和Color属性，给Image组件填充图片。

9. 分别选中Column组件和Image组件右上角的自由拖拽按钮，拖拽组件调整位置。

10. 复制并粘贴Row组件，修改被粘贴出来的Row组件内子组件Text、Progress、Image的属性。

11. 单击右侧Previewer按钮，可实时预览低代码页面。单击画布上方Text组件，会将文本内容从"Activity"切换成" Let's exercise"。

文章转载自：​​https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ohos-ide-low-code-demo-0000001445445960-V3​​