鸿蒙OS开发初览

最新推荐文章于 2024-08-05 17:58:14 发布

原来你是小幸运

最新推荐文章于 2024-08-05 17:58:14 发布

阅读量295

点赞数 1

文章标签：编程语言

本文链接：https://blog.csdn.net/qq_44741568/article/details/116518581

版权

两种UI框架

一、Hml式即JS UI

JS UI提供了相对高层的UI描述，使应用开发更加简单。

1. 目录结构前端和后端是一体的

在这里插入图片描述

JS UI的组件可以对比传统Html标签

组件类型	主要组件
基础组件	text、image、progress、rating、span、marquee、image-animator、divider、search、menu、chart
容器组件	div、list、list-item、stack、swiper、tabs、tab-bar、tab-content、list-item-group、refresh、dialog
媒体组件	video
画布组件	canvas

3. 在JS UI中引用i18n

方式一：在JS文件中引用

this.$t('strings.progress-20'),

在这里插入图片描述

方式二：在hml文件中引用

<button class="button" value="{{ $t('strings.cancel') }}" onclick="cancel"/>

在这里插入图片描述

4.在hml中引用js文件的data值，和vue以及微信小程序一样，采用 {{ 属性key }}

export default {
    data: {
        progress: '',
        desc: '我是desc的Value',
        progressStatus: [],
        descStatus: [],
        failDescStatus: [],
        deviceImg: ''
    },

如： <text class="desc">{{ desc }}</text>

二、Xml式即Java UI

Java UI提供了细粒度的UI编程接口，使应用开发更加灵活；Java UI文档链接
在这里插入图片描述

2. 具备的组件

 1.Text          2.Button  3.TextField   4.Image         5.TabList和Tab 6.Picker（滑动选择器）  
 7.DatePicker    8.TimePicker            9.Switch        10.RadioButton 11.RadioContainer  12.Checkbox  
 13.ProgressBar  14.RoundProgressBar     15.ToastDialog  16.ScrollView  17.ListContainer  
 18.PageSlider   19.PageSliderIndicator  20.WebView

XML有着自己的通用属性

在Java UI中引用i18n

方式一：在XML文件中使用： “$以类型命名的上级标签:在zh_CN.element / en_US.element 定义的name” 格式

在这里插入图片描述

方式二：在Java文件中使用

import com.example.myapplication2.ResourceTable;
 /**
     *ResourceTable.String_double_line_0
      ResourceTable：导入的类
      String：以类型命名的上级标签
      double_line_0定义的name
     */
private List<Item> initListViewData() {
        final List<Item> dataList = new ArrayList<>();
        int[] resourceIdList = {ResourceTable.String_double_line_0, ResourceTable.String_item_description_0,
                ResourceTable.String_double_line_1, ResourceTable.String_item_description_1,
                ResourceTable.String_double_line_2, ResourceTable.String_item_description_2,
                ResourceTable.String_double_line_3, ResourceTable.String_item_description_3};
}