网站推广链接怎么做,手机端网站开发语言,北京市注册公司流程最新,门户网站建设方案费用目录
一、概述
声明式UI
应用模型
二、常用组件
1、Image#xff1a;图片展示组件
示例
配置控制授权申请
2、Text#xff1a;文本显示组件
示例
3、TextInput#xff1a;文本输入组件
示例
4、Button#xff1a;按钮组件
5、Slider#xff1a;滑动条组件
…目录
一、概述
声明式UI
应用模型
二、常用组件
1、Image图片展示组件
示例
配置控制授权申请
2、Text文本显示组件
示例
3、TextInput文本输入组件
示例
4、Button按钮组件
5、Slider滑动条组件
三、页面布局
1、线性布局组件
主轴对齐
交叉轴对齐
示例
四、循环控制与List
1、forEach
2、List
五、自定义组件
组件构建函数
通用样式封装 一、概述 方舟开发框架简称ArkUI为HarmonyOS应用的UI开发提供了完整的基础设施包括简洁的UI语法、丰富的UI功能组件、布局、动画以及交互事件以及实时界面预览工具等可以支持开发者进行可视化界面开发。 ArkUI提供了非常多的组件供开发者使用我们在使用时直接去查看官方文档即可。按钮Button-添加常用组件-添加组件-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发
或者我们使用DevEco Studio的时候将鼠标在一个API上悬停一段时间就会出现show in Api Reference选项此时点击就可以查看IDE自带的官方API文档这个文档与官方文档是一摸一样的非常好用。 声明式UI 我们接下来使用的是声明式开发范式当然官方也推荐这种开发方式
那什么是声明式开发
与声明式开发相对的就是命令式开发我们先来看一段代码 ListInteger numbers Arrays.asList(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);// 命令式编程方式计算所有偶数的平方和int evenSquaredSumImperative 0;for (int num : numbers) {if (num % 2 0) {evenSquaredSumImperative num * num;}}System.out.println(Imperative: evenSquaredSumImperative);
在这段Python代码中它的目的是计算所有偶数的平方和最终打印输出。我们要实现这个功能就要思考怎么去实现并最终使用代码逻辑去完成这个功能。
但是我们现在使用声明式开发
int evenSquaredSumDeclarative numbers.stream().filter(num - num % 2 0).mapToInt(num - num * num).sum();System.out.println(Declarative: evenSquaredSumDeclarative); 我们直接调用了Java的流式API来进行实现不用你去实现这个功能的底层逻辑你只需要思考怎么去使用这些API来完成你需要的功能即可。
我们再来看我们以后使用的ArkUI开发代码
Text(hello).fontSize(this.size)
Image(test.jpg).width(this.count % 2 0 ? 100 : 200) .height(this.offset 100)
在这样的代码中我们几乎看不到任何操作UI更新的代码而这正是声明式UI的特点它侧重于描述做什么而不是怎么做开发者只需要关注UI应该如何呈现而不需要关心UI的具体实现过程。
开发者要做的就只是提供不同UI与不同状态之间的映射关系而无需编写如何在不同UI之间进行切换的代码。 应用模型
随着系统的演进发展HarmonyOS先后提供了两种应用模型 FAFeature Ability模型HarmonyOS早期版本开始支持的模型已经不再主推。 Stage模型HarmonyOS 3.1 Developer Preview版本开始新增的模型是目前主推且会长期演进的模型。在该模型中由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”因此称这种应用模型为Stage模型。 Stage模型与FA模型最大的区别在于Stage模型中多个应用组件共享同一个ArkTS引擎实例而FA模型中每个应用组件独享一个ArkTS引擎实例。因此在Stage模型中应用组件之间可以方便的共享对象和状态同时减少复杂应用运行对内存的占用。Stage模型作为主推的应用模型开发者通过它能够更加便利地开发出分布式场景下的复杂应用。
总之我们以后的开发发使用也会基于Stage模型进行开发 二、常用组件
1、Image图片展示组件
1、声明Image组件并设置图片源 Image(src: string | PixelMap | Resource) string格式通常用来加载网络图片因此需要申请网络访问权限ohos.permission.INTERNET
Image(https://xxx.png)PiexlMap格式可以加载像素图常用在图片编辑中
Image(pixelMapObject)
Resource格式用来加载本地图片用的最多
有两个目录可以用来存放本地图片media文件夹和rawfile文件夹
//读取media文件夹下的图片图片后缀可省略
Image($r{app.media.mate60})//读取rawfile文件夹下的图片图片后缀不可省略
Image($rawfile(mate60.png)) 2、添加图片属性
属性说明width100宽度height120高度borderRadius10边框圆角interpolationImageInterpolation.High图片插值
图片插值使用用来消除图片锯齿的就是能让一个模糊的图片变得平滑清晰
注意如width赋值可以是整型100也可以是字符串100%
如果是数字整型100的话就是100vx虚拟像素如果是字符串100%就是按照图片本身占设备屏幕的比例 示例 你可能会疑问不是说网络图片需要申请网络访问权限吗为什么直接就出来了 这是因为这个是预览图并不算是真正运行的程序我们需要启动虚拟机才算是启动程序这时我们就需要配置授权了 配置控制授权申请 应用的APLAbility Privilege Level等级分为normal、system_basic和system_core三个等级默认情况下应用的APL等级都为normal等级。权限类型分为system_grant和user_grant两种类型。应用可申请的权限项参见应用权限列表。 需要在module.json5配置文件中声明一下权限即可 其中name是必须要填的我们这里只使用name查看一下效果 此时启动了虚拟机网络图片也成功加载出来了。 注意忘记了组件的使用方法和API记得直接查看IDE自带的官方文档 2、Text文本显示组件
1、声明Text组件并设置文本内容 Textcontent?: string | Resource string格式直接填写文本内容
Text(图片宽度)
Resource格式读取本地资源文件
Text($r(app.string.width_label))
解释一下这个是什么意思
同样的$r 符号读取本地文件app是默认前缀。
我们的resources目录下存放着我们的本地资源在element目录下有一个叫string的json格式文件里面存放着一些字符常量。
因此这行代码的意思就是寻找本地资源目录下string.json文件中的名为width_label的json对象 这里有一个点需要注意的是我们在base外面能看到两个目录en_US和zh_CN里面也有element文件夹 这是为了国际化系统会检测你的使用语言版本来使用不同限定词目录下的elementen_US就是英文系统zh_CH就是中文系统
但是需要注意的一点是它们里面存在的属性在base目录下也要存在才能使用否则会报错。因为程序会先去base里面找然后再去限定词目录里面更换值如果没有该限定词目录才会使用base里面的默认值。 2、添加文本属性
属性说明lineHeight32行高fontSize20字体大小fontColor#36D字体颜色fontWeightFontWeight.Medium字体粗细 示例
做一个国际化双语言的文本展示
base {name: wal,value: An1ong} zh_CN {name: wal,value: 优米}
en_US {name: wal,value: yummy}
代码
Entry
Component
struct Index {build() {Row() {Column() {Text($r(app.string.wal)).fontColor(#36D).fontSize(38)}}}
}
效果 3、TextInput文本输入组件
1、声明TextInput组件 TextInput{ placeholder ResourceStrtextResourceStr} placeholder输入文本
TextInput({placeholder: 请输入无输入时的提示文本})
text输入框当前的默认文本内容
TextInput({text: 默认文本}) 2、添加属性和事件
属性作用width150宽height30高backgroundColor#FFF背景色typeInputType.Password输入框类型 onChange value { //value是文本框的内容 } 当输入框中的内容发生改变时执行事件
这里type输入框类型有好多有现成的Email格式、Phone格式、Password格式等会对输入的内容进行约束这样就不用自己写正则表达式来检验了。 示例
Entry
Component
struct Index {State imgSize: number 100build() {Row() {Column() {Image($r(app.media.icon)).width(this.imgSize).interpolation(ImageInterpolation.High)Text(此时图标的大小为: this.imgSize).fontSize(30)TextInput({placeholder: 请输入图片的大小}).type(InputType.Number).width(250).height(50).onChange(value {this.imgSize parseInt(value)})}}}
} 4、Button按钮组件
1、声明Button组件label是按钮文字 ButtonlableResourceStr 文字型按钮
Button(点我)
自定义按钮在Button中嵌套其他组件
Button(){Image($r(app.media.search)).width(20).margin(10)
} (2)、添加属性和响应
属性说明width100宽height30高typeButtonType.Normal按钮类型 onClick { //处理点击事件 } 点击事件
type属性有三种类型
Capsule胶囊型按钮圆角默认为高度的一半Circle圆形按钮Normal普通按钮默认不带圆角 5、Slider滑动条组件
1、声明一个滑动条组件 SlideroptionsSliderOptions 参数作用min0最小值max100最大值value30当前值step10滑动步长默认是1styleSliderStyle.OutSet InSet就是滑块在滑动条里 directionAxis.Horizontal水平滑动Vertical是垂直滑动reversefalse是否反向滑动就是大小互换一下 (2)、添加属性和响应
属性作用width90%大小trackThickness7滑动条粗细blockColor滑块的颜色trackColor滑轨的颜色showTipstrue是否展示value百分比提示 onChangevalue { //value就是当前值 } 滑动触发事件 三、页面布局
1、线性布局组件
我们之前的例子中用了很多次Row与Column它们就是线性布局组件
Column是列容器Row是行容器 仅仅这样使用是不够的我们在组装一个页面的时候为了美观都会让各个组件对齐或是居中等等 属性作用参数justifyContent设置子元素在主轴方向的对齐格式FlexAlign枚举alignItems设置子元素在交叉轴方向的对齐格式 Row容器使用VerrticalAlign枚举 Column容器使用HorizontalAlign枚举 FlexAlign的对齐方式也有很多
主轴对齐
Column容器 Row容器 交叉轴对齐
Column容器 Row容器 这里有一个点需要注意因为布局容器的大小是默认自适应组件的大小的所以如果你不修改width和height属性就直接使用布局对齐的话是没有效果的比如这里我这里明明使用了布局对齐但是按钮的格式并没有改变 我们添加一个背景色看看是咋回事 可以看到Row的大小默认就是这两个按钮所占的大小所以首先要调整一下Row容器的大小 示例
现在我们来综合以上学过的组件和布局来写一个案例
Entry
Component
struct Index {State imgSize: number 100build() {Column() {Row(){Image($r(app.media.app_icon)).width(this.imgSize)}.height(350)Row(){Text($r(app.string.image_width)).fontSize(25).fontWeight(FontWeight.Bold)TextInput({text: this.imgSize.toFixed(0)}).width(200).type(InputType.Number).onChange(value {this.imgSize parseInt(value)})}.width(100%).padding({left: 20,right: 20})Divider().width(91%)Row(){Button(缩小).type(ButtonType.Capsule).onClick(() {if (this.imgSize 0) {this.imgSize - 10}})Button(扩大).type(ButtonType.Normal).onClick(() {if(this.imgSize 300){this.imgSize 10}})}.width(100%).justifyContent(FlexAlign.SpaceEvenly).margin({top: 35,bottom:35})Row(){Slider({min: 0,max: 300, style: SliderStyle.InSet,step: 10,value: this.imgSize}).width(90%).showTips(true).trackThickness(20).onChange(value {this.imgSize value})}}.width(100%).height(100%)}
} 四、循环控制与List
1、forEach
比如我们要写一个商品列表但是有100条商品要展示每一个里面都要写布局和重复的组件。一个一个手动写的话未免也太麻烦了于是我们可以直接使用forEach函数来循环生成 一般键生成函数不需要我们重写都用默认的就行 2、List
刚才使用forEach的时候循环打印了所有的数据你会一个Column容器根本装不下所有的数据。因此为了实现滚动查看多条信息的功能我们使用List容器
ListItem列表项数量过多超出屏幕后会自动提供滚动功能它既可纵向排列也可横向排列 没错他就是来替代Column容器的。
不过要注意Listitem不是容器List才是所以ListItem中只能写一个根组件如果要使用多个组件的话要用别的容器将它们包裹起来 五、自定义组件
就像函数一样我们将组件封装起来这样就可以复用了
我们的index.ets组件上有一个Entry注解这代表它是一个入口组件一开始就会展示这个组件。
其实将它去掉就是一个自定义组件了 当然我们不会像这样一样将所有的Component写在一个文件里我们会分开为个个文件来使用
记得export导出 引入 组件构建函数
当然也可以直接将这些组件封装成一个函数来使用 通用样式封装 这两个都是写在Component外面的如果要写在里面就把function关键字去掉就行了 如果是只是Text或是别的组件生效的话就这样写不过这样的就不能写在Component里面了只能写在外面
