Harmony OS DevEco Studio低代码开发流程 - HarmonyOS开发自学5

一. 为什么要用低代码开发?

HarmonyOS低代码开发方式,具有丰富的UI界面编辑功能,例如基于图形化的自由拖拽、数据的参数化配置等,通过可视化界面开发方式快速构建布局,可有效降低用户的时间成本和提升用户构建UI界面的效率。

二. 低代码开发步骤

1. 创建新的工程

在如下界面中,打开红框中的 “Enable Super Visual”开关,工程中将自动创建可以自由拖拽的界面设计文件

cke_5300.png

2.目录结构

   来个重要的文件,

   1) index.ets, 定义界面需要绑定的数据,包括基础数据类型,组合数据类型,或者类

   2) index.visual, 用于进行界面设计,并在属性窗口设置与index.ets文件中数据的绑定

  

cke_39299.png

3. 什么数据可以绑定到界面?

   可以绑定的变量有以下两种:

   1)在index.ets文件中,用@state 定义的变量,

       @State 表示组件中的状态变量,此状态变化会引起 UI 变更。

   2). 在resource/base/element/string.json中红框的变量

        

cke_92690.png

4. 如何绑定

    比如index.ets中用@State修饰的字符串变量message,可以绑定到界面中的“Hello World” Text组件

    

cke_99518.png

 按下图操作,即可完成绑定

cke_150857.png

5. 当修改message变量的值时,界面上的显示也发生改变

   

cke_183919.png

cke_185304.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/877489.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【JVM】类加载

1. 类加载过程 Java虚拟机(JVM)的 类加载 过程是将字节码文件(.class文件)从存储设备加载到内存,并为其创建相应的类对象的过程。类加载是Java程序运行的基础,保证了程序的动态性和安全性。JVM的类加载过程…

Unity 粒子系统参数说明

一、Particle System 1. Duration(持续时间) 粒子系统运行一次所需的时间。它决定粒子系统持续播放的时间长度。 2. Looping(循环播放) 如果启用,粒子系统将在播放完一次后自动重新开始播放,直到你停止它…

pgrouting实战应用

1)下载地区地区数据(下载数据是XYZM 四位数据) 2)下载裁剪行政区数据 3)使用arcgis pro添加路网数据和行政区数据 4)裁剪数据,仅历下行政区路网 5)arcgis pro要素转线&#xff0…

【数据结构】顺序表和链表经典题目

系列文章目录 单链表 动态顺序表实现通讯录 顺序表 文章目录 系列文章目录前言一、顺序表经典例题1. 移除元素2. 合并两个有序数组 二、链表经典例题1. 移除链表元素2. 反转链表3. 合并两个有序链表4. 链表的中间节点5. 环形链表的约瑟夫问题 总结 前言 我们通过前面对顺序表…

ArrayList 源码解析

ArrayList是Java集合框架中的一个动态数组实现,提供了可变大小的数组功能。它继承自AbstractList并实现了List接口,是顺序容器,即元素存放的数据与放进去的顺序相同,允许放入null元素,底层通过数组实现。除该类未实现同…

HTB-Vaccine(suid提权、sqlmap、john2zip)

前言 各位师傅大家好,我是qmx_07,今天来为大家讲解Vaccine靶机 渗透过程 信息搜集 服务器开放了 21FTP服务、22SSH服务、80HTTP服务 通过匿名登录FTP服务器 通过匿名登录到服务器,发现backup.zip文件,可能存在账号密码 发现b…

2024.9.16 day 1 pytorch安装及环境配置

一、配置pytorch环境,安装pytorch 1.查看python版本 python --version 2.在anaconda命令中创建pytorch环境 conda create -n pytorch python3.12(python版本) 3.pytorch安装 pytorch首页 PyTorchhttps://pytorch.org/ os为windows推荐package选择…

算法练习题27——疫情下的电影院(模拟)

其实思路还好 就是输入有点难搞 Java import java.util.ArrayList; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);String input scanner.nextLine();// 去掉输入字符串的方括号if (input.…

react 安装使用 antd+国际化+定制化主题+样式兼容

安装antd 现在从 yarn 或 npm 或 pnpm 安装并引入 antd。 yarn add antd修改 src/App.js&#xff0c;引入 antd 的按钮组件。 import React from react; import { Button } from antd;const App: React.FC () > (<div className"App"><Button type&q…

USB摄像头视频流转RTSP流

一、VLC查看USB摄像头视频流原理&#xff1a; USB摄像头的工作原理与VLC播放其他视频文件类似&#xff0c;主要区别在于视频流的来源是实时捕获的&#xff0c;而不是预先录制的文件。如果使用VLC将USB摄像头的视频流作为RTSP服务器广播&#xff0c;需要进一步配置 二、VLC查看…

[机器学习]决策树

1 决策树简介 2 信息熵 3 ID3决策树 3.1 决策树构建流程 3.2 决策树案例 4 C4.5决策树 5 CART决策树&#xff08;分类&回归&#xff09; 6 泰坦尼克号生存预测案例 import pandas as pd from sklearn.model_selection import train_test_split from sklearn.tree import …

扣子智能体实战-汽车客服对话机器人(核心知识:知识库和卡片)

这一节的主要内容是通过创建一个汽车客户对话机器人学习扣子平台知识库和卡片的使用。 机器人参考&#xff1a; 企业汽车客服 资深汽车销售 一&#xff0c;汽车销售机器人需求简介 汽车销售是一个需要 7*24h在线的客服咨询岗位&#xff0c;专业性强&#xff0c;但流动性非…

【数据结构】排序算法---直接插入排序

文章目录 1. 定义2. 算法步骤3. 动图演示4. 性质5. 算法分析6. 代码实现C语言PythonJavaCGo 7. 折半插入排序代码实现——C 结语 1. 定义 直接插入排序是一种简单直观的排序算法。它的工作原理为将待排列元素划分为「已排序」和「未排序」两部分&#xff0c;每次从「未排序的」…

自定义EPICS在LabVIEW中的测试

继续上一篇&#xff1a;LabVIEW中EPICS客户端/服务端的测试 变量定义 You can use CaLabSoftIOC.vi to create new EPICS variables and start them. CA Lab - LabVIEW (Realtime) EPICS INPUT: PV set Cluster-array of names, data types and field definitions to crea…

【Go】Go语言介绍与开发环境搭建

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

【Elasticsearch系列六】系统命令API

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

二叉树OJ题——二叉树的前序遍历

文章目录 一、题目链接二、解题思路三、解题代码 一、题目链接 二叉树的前序遍历 二叉树前序遍历后需要返回一个 list 。 二、解题思路 三、解题代码

Pytorch详解-Pytorch核心模块

Pytorch核心模块 一、Pytorch模块结构_pycache__Cincludelibautogradnnoptimutils 二、Lib\site-packages\torchvisiondatasetsmodelsopstransforms 三、核心数据结构——Tensor&#xff08;张量&#xff09;在深度学习中&#xff0c;时间序列数据为什么是三维张量&#xff1f;…

Node.js运行环境搭建

【图书介绍】《Node.jsMongoDBVue.js全栈开发实战》-CSDN博客 《Node.jsMongoDBVue.js全栈开发实战&#xff08;Web前端技术丛书&#xff09;》(邹琼俊)【摘要 书评 试读】- 京东图书 (jd.com) 本节介绍如何搭建Node.js运行环境。 1.2.1 Node.js运行环境安装 进入Node.js官…

苍穹外卖Day01

文章目录 目录 文章目录 前端环境搭建 后端环境搭建 后端-数据库环境搭建 前后端联调 前端环境搭建 打开文件夹&#xff08;确保nginx在英文目录下&#xff09;双击ngnix.exe启动nginx服务&#xff0c;访问端口号80在地址栏输入localhost打开界面 后端环境搭建 熟悉项目…