鸿蒙os开发之图片和文字控件

学习过ts之后，就可以上手开发相关项目了，分析了下相关文件目录

ability    src        main            ets                pages 页面            resources 资源

    一层层点下来，文件目录包含了页面和资源，相对android来说，简洁了一些文件夹，旁边有一个预览界面

    不光能展示界面，甚至能响应能点击事件，本质相当于一个模拟器，可以实时更新

    每一个组件可以称为Struct组件，也即这些结构组件通常是用来构建UI的可重用单元，它们包含了特定的UI元素或者逻辑，可以被其他部分引用和复用。

装饰器是用来对代码进行标记或者注释的工具，在Python等语言中有类似的概念。下面是你提到的装饰器：

• @Component：用于标记自定义组件，这样的组件可能具有特定的功能或样式。

• @Entry：标记为入口组件，通常是应用程序的起始点，负责渲染整个应用的基本结构。

• @State：用来标记状态变量，一旦这些变量的值发生变化，会触发UI的刷新操作。

  是一种通过声明的方式来描述UI结构和布局，而不是直接操作UI元素的方式。比如，React和Vue等框架就采用了声明式UI的方法。

    组件主要是两种类型：

• 容器类组件：通常用来包含和布局其他组件或元素，比如布局容器、页面容器等。

• 基础组件：构成UI基础的组件，比如按钮、文本框、图像等，它们是构建更复杂组件或页面的基本构建块。

  组件可以定义属性和事件方法

    Image图片，可以传入一个图片源，网络地址（需要申请网络权限）

   

参考官网的例子，权限还比较多

    有一个宽度属性，传入数字单位，默认vp 虚拟像素，根据像素密度换算，类似dp

    编辑器里弹出的代码提示，可以点击跳转到相关的api提示，还比较方便，不需要额外创建手册了，对开发者比较友好    

可以根据参数，选择图片的清晰度质量

    关于多语言：

限定词目录如上图，内部配置文件是一个json:

默认目录也要配置

之后可以在预览界面查看

接下来讲讲文字控件Text()

    看着比较简单，同样的官方还支持输入控件

    可以看到样式变化根据type的变化而改变，比较像html的语法

    监听输入改变

同样的还有Button

    样式也被定义了

    还有一种控件是滑动条

    接下来是容器控件，主要分为行排列，纵排列

Row 容器，行排列

Colum 纵排列

当渲染多个组件的时候，可以使用ForEach进行循环输出控件

ForEach(this.items, item => {  Row({space:10}) {   Text(item)  }.height('100%')})

    同样还有列表组件：

    当通用组件不满足需求的时候，就可以考虑自定义控件了：

只带@component

没有@Entry的组件

@Componentexport struct Header {  private title: ResourceStr  build() {    Row() {      Text(this.title)    }  }}​

使用方式：

import {Header} from './Header'

Header({title:"标题"})

自定义构建函数

构造逻辑封装成函数

@Builder function createList(item: Array<string>) {  List({ space: 10 }) {    ForEach(this.items, item => {      ListItem() {        Text(item)      }.height(800)    })  }.listDirection(Axis.Vertical)}

@builder开头即可

如果有重复的样式，可以封装公共样式

@Styles function width500(){  .width(500)}

​

以上就是本次分享的内容，感谢大家支持。您的关注\点赞、收藏是我创作的动力。

万水千山总是情，点个 👍 行不行。