3.6　ACE Java UI基础组件

鸿蒙ACE Java UI框架为开发人员提供了开发中所需要的基础组件，可以通过组装这些基础组件来完成页面开发，本节学习鸿蒙ACE Java UI的基础组件的详细用法。

3.6.1　组件与组件容器

在学习基础组件之前，首先需要了解鸿蒙的组件分类及组件与组件容器的关系。根据组件（Component）的功能，可以将组件分为布局类、显示类、交互类三类，如图3-41所示。

组件的定义：用户界面元素统称为组件，组件根据一定的层级结构进行组合形成布局。组件在未被添加到布局中时，既无法显示也无法交互，因此一个用户界面至少包含一个布局。

布局的定义：在UI框架中，具体的布局类通常以XXLayout命名，完整的用户界面是一个布局，用户界面中的一部分也可以是一个布局。布局中包含多个Component与ComponentContainer对象，如图3-42所示。

Component：提供内容显示，是界面中所有组件的基类，可以给Component设置事件处理回调来创建一个可交互的组件。

Java UI框架提供了一些常用的界面元素，也可称为组件，组件一般直接继承Component或它的子类，如Text、Image等。

ComponentContainer：作为容器容纳Component或ComponentContainer对象，并对它们进行布局。

Java UI框架提供了一些标准布局功能的容器，它们继承自ComponentContainer，一般以Layout结尾，如DirectionalLayout、DependentLayout等。

每种布局都根据自身特点提供LayoutConfig供子Component设定布局属性和参数，通过指定布局属性可以对子Component在布局中的显示效果进行约束。如width、height是最基本的布局属性，它们指定了组件的大小。

LayoutConfig主要分为两种：DirectionalLayout和DependentLayout，如图3-43所示。

代码示例3-18中通过DirectionalLayout.LayoutConfig创建一个布局配置对象，可以把这个创建好的配置对象设置给指定的组件，如代码中的text.setLayoutConfiglayoutConfig）。

代码示例3-18　为组件添加对应布局的布局属性

3.6.2　文本组件Text

Text是用来显示字符串的组件，在界面上显示为一块文本区域。Text作为一个基本组件，有很多扩展，常见的有按钮组件Button和文本编辑组件TextField。

Text组件继承自Component类，如图3-44所示。

Text组件支持根据文本长度自动调整文本的字体大小和换行。Text组件可以通过background_element属性设置背景。常用的背景如文本背景、按钮背景，可以采用XML格式放置在graphic目录下。

在graphic目录下创建background_text.xml文件，如代码示例3-19所示。

在Project窗口，打开entry→src→main→resources→base，右击graphic文件夹，选择New→File，将文件命名为background_text.xml，在background_text.xml文件中定义文本的背景。

代码示例3-19　定义文本的背景

solid标签：设置矩形的填充颜色。

stroke标签：设置矩形边框的宽度、每段虚线的长度和两段虚线之间的颜色，以及矩形的颜色。

corners：设置形状的圆角。

可以通过text_alignment设置文本对齐方式，如设置为horizontal_center|bottom。这里通过“|”设置了两个值，文字底部居中对齐，如图3-45和代码示例3-20所示。

代码示例3-20　text_alignment设置文本对齐方式

如果Text组件的文字太长，则可以通过multiple_lines设置文本换行和最大显示行数，效果如图3-46所示，如代码示例3-21所示。

代码示例3-21　设置文本换行和最大显示行数

Text对象支持根据文本长度自动调整文本的字体大小和换行，如图3-47所示。

设置自动换行、最大显示行数和自动调节字体大小，如代码示例3-22所示。

代码示例3-22　设置自动换行、最大显示行数和自动调节字体大小

通过setAutoFontSizeRule设置自动调整规则，3个入参分别是最小的字体大小、最大的字体大小、每次调整文本字体大小的步长，如代码示例3-23所示。

代码示例3-23　通过setAutoFontSizeRule设置自动调整规则

当文本过长时，可以设置跑马灯效果，如图3-48所示，实现文本滚动显示，其前提是文本换行被关闭且最大显示行数为1，默认情况下即可满足前提要求。

下面通过XML方式实现布局，同时需要通过代码进行跑马灯设置，如代码示例3-24所示。

代码示例3-24　跑马灯文本效果Text

如果需要文字也有走马灯的效果，还需要在代码中将setTruncationMode属性值设置为Text.TruncationMode.AUTO_SCROLLING，同时需要通过startAutoScrolling启动跑马灯效果，如代码示例3-25所示。

代码示例3-25　setTruncationMode设置跑马灯效果

3.6.3　按钮组件Button

Button是一种常见的组件，单击可以触发相应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。

Button组件继承自Text组件，是一种特殊的Text组件，如图3-49所示。

按照按钮的形状，按钮可以分为普通按钮、椭圆按钮、胶囊按钮、圆形按钮等。

按钮的形状可通过Button组件的background_element属性进行设置。background_ element可以直接被设置为颜色值，也可以通过在graphic文件夹中定义一个xml文件，该xml文件用来定义组件的形状，如图3-50所示。

可以在graphic文件夹中创建一个定义组件形状的xml文件，如代码示例3-26所示。

代码示例3-26　创建Button形状的xml文件

上面的xml文件通过shape标签定义了一个矩形，矩形的填充颜色为#007CFD。shape的默认形状是rectangle，此外还有oval（椭圆）、line（线）、ring（圆环）等形状。

普通按钮和其他按钮的区别在于不需要设置任何形状，只需设置文本和背景颜色即可。

background_element属性指定自定义按钮的形状文件名：color_button_element.xml。通过$graphic指定xml文件名称，如代码示例3-27所示。

代码示例3-27　自定义按钮的形状

Button组件可以设置图片，如果需要为Button组件设置图片，则可以通过svg文件转换成xml文件，再通过ohos：element_left、element_right、element_top、element_button分别表示图片的居于文字的左、右、上、下4个位置。

Button组件上的图片，可以通过一些开源的字体图标网站下载svg文件，然后通过DevEcoStudio导出为xml文件，如图3-51所示。

选择需要导入的svg文件，DevEco Studio会自动把svg文件导出为xml文件，并保存到graphic目录下，如图3-52所示。

通过element_right引用导入的svg文件名，如果Button组件不设置text文字，则只显示图片。如果需要文字和图片一起显示，则可以通过element_right|left|top|bottom设置图片相对于文字的位置，如图3-53所示。

3.6.4　文本输入框组件TextField

TextField文本输入框组件用来接收用户的输入，例如在用户的登录或者注册页面都会使用文本输入框组件。TextField文本输入框组件继承自Text组件，如图3-54所示。

文本输入框组件的背景默认为白色，可以通过background_element设置背景，hint属性可以设置输入内容的提示信息，element_cursor_bubble属性可以自定义光标提示气泡，如图3-55所示。

TextField通过text_input_type属性设置不同类型的输入值：

• 　text_input_type="pattern_password"：密码类型；
• 　text_input_type="pattern_text"：文本类型；
• 　text_input_type="pattern_number"：数字类型；
• 　text_input_type="pattern_null"：空类型。

TextField文本输入框组件的基本用法，如代码示例3-28所示。

代码示例3-28　TextField基本用法

设置光标自定义气泡Bubble，代码如下：

ele_cursor_bubble.xml用来自定义光标的气泡效果，代码如下：

设置提示文字，代码如下：

设置TextField的内边距，代码如下：

设置TextField的多行显示，代码如下：

通过TextField的Enable属性控制文本框是否可用，当设置成false时，无法在文本框输入，代码如下：

响应焦点变化，代码如下：

下面是一个登录页面案例，如图3-56所示。本案例有3个文本输入框，第1个文本输入框用来填写用户手机号或者邮箱信息，第2个文本输入框用来填写密码，第3个文本输入框用来填写短信验证码。

单击登录按钮，在第1个文本框上会显示验证错误信息，验证错误信息覆盖在第1个文本框之上。第2个文本输入框需要对密码进行保护，将文本输入框类型修改为密码类型。

第1个文本输入框上面覆盖一个隐藏的文本框，我们需要采用堆叠布局方式，StatckLayout可以实现堆叠显示效果。第3个输入框右边的“获取验证码”的文字效果同样需要使用堆叠布局实现。

第1个文本输入框的堆叠布局效果的实现，如代码示例3-29所示。

代码示例3-29　第1个文本输入框添加叠加验证

第3个“短信验证码”输入框的堆叠布局实现，如代码示例3-30所示，输入内容有可能超出堆叠在上面的“获取验证码”文本，可以通过控制底部输入文本框TextField的ohos：right_padding="100vp"来限制输入内容不会超过“获取验证码”文本框。

代码示例3-30　“短信验证码”输入框实现

当单击“登录”按钮时，在第1个输入框上面会显示错误信息提示，如代码示例3-31所示。

代码示例3-31　单击按钮显示错误信息提示

下面，整体看一下登录布局页XML布局，如代码示例3-32所示。

代码示例3-32　登录布局页XML布局：chapter03/demo6/textfeild_demo.xml

3.6.5　图片组件Image

本地的图片一般存放在resource目录下的media文件夹中，可以使用图片Image组件显示这些本地的图片，可以对图片设置缩放和裁剪，如图3-57所示。

创建Image的方式有两种：可以在XML中创建Image，也可以在代码中创建Image。

在XML中创建Image，image_src属性用于设置图片的位置，这里通过$media：plant指定media目录下的plant.png图片，代码如下：

上面的代码可以通过代码的方式创建Image，代码如下：

当图片尺寸与Image尺寸不同时，可以根据不同的缩放方式对图片进行缩放，如设置Image的宽和高为200vp。ohos：scale_mode="zoom_center"：表示按比例缩小居中显示，其他缩放方式取值如表3-7所示。

加载和显示网络图片步骤如下。

（1）在config.json中添加网络权限，代码如下：

（2）配置网络明文访问白名单，这里将域名blog.51itcto.com设置为白名单，如图3-58所示。cleartextPermitted表示自定义的网域范围内是否允许明文流量传输。

（3）在XML布局文件中添加Image组件，然后通过ID设置网络的图片，代码如下：

（4）定义一个加载图片的方法，代码如下：

（5）在onStart方法中，需要开启新的线程以便处理图片的加载，代码如下：

3.6.6　TabList和Tab组件

TabList可以实现多个页签栏的切换，Tab为某个页签。子页签通常放在内容区上方，用于展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容，如图3-59所示。

首先，在XML中创建TabList组件，如代码示例3-33所示。

代码示例3-33　在XML中创建TabList组件

设置默认状态和选中状态的字体颜色和indicator的颜色，如代码示例3-34所示。

代码示例3-34　设置默认状态和选中状态的字体颜色

通过代码向TabList中添加Tab子组件，代码如下：

在代码中设置Tab的布局，代码如下：

将FixedMode默认值设置为false，在该模式下TabList的总宽度是各Tab宽度的总和，若固定了TabList的宽度，当超出可视区域时，则可以通过滑动TabList来显示。如果设置为true，则TabList的总宽度将与可视区域相同，各个Tab的宽度也会根据TabList的宽度而进行平均分配，该模式适用于Tab较少的情况，代码如下：

TabList常用接口如表3-8所示。

接下来，实现如图3-59所示页面的显示效果，TabList组件在方向布局中排列在最上面，将上边距设置为10vp，TabList中子组件排列方式orientaion为水平方向排列。如代码示例3-35所示。

代码示例3-35　实现如图3-59所示的页面显示效果

有了上面的TabList布局xml文件，首先根据数据创建TabList中的Tab组件，定义一个Tab组件的数组，代码如下：

通过循环Tab组件的数组，为TabList添加Tab组件，代码如下：

监听TabList的选中事件，在某个Tab组件被选中的时候，会触发onSelected事件，并通过事件的参数返回选中的Tab组件信息，代码如下：

完整的TabList实现代码，如代码示例3-36所示。

代码示例3-36　TabList代码实现

3.6.7　Picker组件

Picker组件提供了滑动选择器，允许用户从预定义范围中进行选择，如图3-60所示。

在XML中创建Picker组件，代码如下：

设置Picker组件的取值范围，代码如下：

响应选择器变化，代码如下：

通过Picker组件的setFormatter（Formatter formatter）方法，如图3-61所示，用户可以将Picker选项中显示的字符串修改为特定的格式，代码如下：

对于不直接显示数字的组件，该方法可以设置字符串与数字一一对应。字符串数组长度必须等于取值范围值的总数。用户在使用时需要注意，该方法会覆盖picker.setFormatter （Formatterformatter）方法。

Java代码中，通过setDisplayData方法添加一个字符串数组，代码如下：

下面两个Picker组件属于时间选择器：DatePicker和TimePicker。

1．DatePicker主要供用户选择日期

在XML中创建DatePicker，显示效果如图3-62所示，代码如下：

获取当前日期，年/月/日，DatePicker默认选择当前日期，代码如下：

响应日期改变事件，在XML中添加Text用于显示所选择的日期，代码如下：

在Java代码中响应日期改变事件，代码如下：

2．TimePicker主要供用户选择时间

创建TimePicker，代码如下：

通过下面的代码可以设置TimePicker的时间，效果如图3-63所示。

获取时间，代码如下：

响应时间改变事件，代码如下：

3.6.8　复选框组件CheckBox

CheckBox可以实现选中和取消选中功能，如图3-64所示。

在xml中设置CheckBox的背景，如图3-65所示，代码如下：

graphic目录下xml文件（例：background_checkbox_check.xml）的示例代码如下：

使用Java代码设置CheckBox在选中与取消选中时的背景，如图3-66所示，如代码示例3-37所示。

代码示例3-37　设置CheckBox在选中与取消选中时的背景

设置CheckBox的文字在选中和取消选中时的颜色，如图3-67所示，代码如下：

设置CheckBox的选中状态，代码如下：

设置不同状态之间的切换：如果当前为选中状态，则将变为未选中；如果当前是未选中状态，则将变为选中状态，代码如下：

设置响应CheckBox状态变更的事件，代码如下：

实现如图3-64所示的页面显示效果，如代码示例3-38所示。

代码示例3-38　实现如图3-64所示的页面显示效果

上面，创建好了页面的布局，首先需要定义一个用来保存选中结果的集合，代码如下：

为每个CheckBox绑定setCheckedStateChangedListener事件监听器，当监听选中时，把选择的编号添加到Set集合中，如代码示例3-39所示。

代码示例3-39　setCheckedStateChangedListener事件监听器

3.6.9　单选按钮组件RadioButton

RadioButton用于多选一操作，需要搭配RadioContainer使用，实现单选效果，如图3-68所示。

RadioContainer是RadioButton的容器，在其包裹下的RadioButton保证只有一个被选中，如代码示例3-40所示。

代码示例3-40　RadioContainer包裹RadioButton实现单选

设置响应RadioContainer状态改变的事件，如代码示例3-41所示。

代码示例3-41　设置响应RadioContainer状态改变的事件

根据索引值设置指定RadioButton为选定状态，代码如下：

清除RadioContainer中所有RadioButton的选定状态，代码如下：

设置RadioButton的布局方向：将orientation设置为horizontal，表示横向布局；将orientation设置为vertical，表示纵向布局。默认为纵向布局。

在xml中设置，代码如下：

在Java代码中设置，代码如下：

3.6.10　信息提示框组件ToastDialog

ToastDialog是在窗口上方弹出的对话框，是通知操作的简单反馈。ToastDialog会在一段时间后消失，在此期间，用户还可以操作当前窗口的其他组件。

ToastDialog继承自CommonDialog类，如图3-69所示。

通过setAlignment方法设置提示框显示的位置，代码如下：

自定义ToastDialog的Component，通过setComponent方法设置自定义的布局组件，如代码示例3-42所示。

代码示例3-42　setComponent方法设置自定义的布局组件

创建自定义布局文件：layout_toast.xml，如代码示例3-43所示。

代码示例3-43　创建自定义布局文件

在上面的布局文件中定义背景文件：background_toast_element.xml，如代码示例3-44所示。

代码示例3-44　定义背景文件

3.6.11　弹框组件CommonDialog

在3.6.10节讲解了信息提示框组件，此组件继承自CommonDialog，可以基于CommonDialog封装更多的弹框。下面，通过CommonDialog实现一个确认框，需要用户单击“确定”按钮后将其关闭，如图3-70所示。

CommonDialog实现一个确认框，首先需要定义一个静态方法ShowConfirm，当需要弹框的时候，只需调用该方法，传入需要的数据就可以了，如代码示例3-45所示。

代码示例3-45　定义一个静态方法ShowConfirm

下面是弹框需要装载的布局文件：Toast_layout_confirm.xml，如代码示例3-46所示。

代码示例3-46　定义弹框需要装载的布局文件

3.6.12　进度条组件ProgressBar

ProgressBar用于显示内容或操作的进度。ProgressBar继承自Component，如图3-71所示。

将ProgressBar方向设置为垂直，如图3-72和代码示例3-47所示。

代码示例3-47　将ProgressBar方向设置为垂直

设置当前进度，在xml中进行设置，代码如下：

或者在Java中进行设置，代码如下：

设置最大值和最小值，如图3-73所示。

在xml中进行设置，代码如下：

或者在Java中设置，代码如下：

设置ProgressBar进度颜色，效果如图3-74所示，代码如下：

设置ProgressBar底色颜色，效果如图3-75所示，代码如下：

设置ProgressBar分割线，效果如图3-76所示。

在xml中配置，代码如下：

在Java代码中配置，代码如下：

设置ProgressBar分割线颜色，效果如图3-77所示，代码如下：

设置ProgressBar提示文字，效果如图3-78所示，代码如下：

3.6.13　滑块组件Slider

注意该Slider组件与进度条ProgressBar组件的区别，ProgressBar不能拖动，只有显示功能，而Slider组件继承自AbsSlider，除了具有显示功能外还可以拖动，如图3-79所示。

AbsSlider组件继承自ProgressBar组件，如图3-80所示。

布局中设置的Slider拖动条，效果如图3-81所示。

接下来，实现Slider拖动条功能，如代码示例3-48所示。

代码示例3-48　布局中设置的Slider拖动条

Slider相关标签属性说明如下。

• 　设置拖动条方向：ohos：orientation="horizontal"，水平方向；
• 　设置最小值：ohos：min="0"；
• 　设置最大值：ohos：max="100"；
• 　设置当前值：ohos：progress="66"；
• 　设置背景颜色：ohos：background_element="#000000"，黑色；
• 　设置进度条颜色：ohos：progress_color="#00FF00"，绿色。

代码中控制拖动条Slider组件，向Slider组件添加ValueChangedListener监听器，当Slider值发生变化时，触发onProgressUpdated方法，如代码示例3-49所示。

代码示例3-49　代码中控制拖动条Slider组件

onProgressUpdated：当进度变化时触发，参数说明如下。

• 　slider：组件信息。
• 　i：进度值。
• 　b：是否允许用户改变进度值，默认返回值为true。

onTouchStart：当通过手指触发进度条时触发。

onTouchEnd：当通过手指离开时触发。

3.6.14　ScrollView组件

ScrollView是一种带滚动功能的组件，它采用滑动的方式在有限的区域内显示更多的内容。ScrollView组件继承自StackLayout，如图3-82所示。

可以直接把ScrollView当作顶级的布局组件来使用，如图3-83所示。

可以在ScrollView内放置一个方向布局组件，在方向组件内部放置多个Image组件，当所有Image组件的高度超过屏幕时，使用ScrollView就可以滚动查看了，如代码示例3-50所示。

代码示例3-50　ScrollView布局用法

根据像素数平滑滚动，代码如下：

平滑滚动到指定位置，代码如下：

设置布局方向：ScrollView自身没有设置布局方向的属性，所以需要在其子布局中设置。以横向布局horizontal为例，代码如下：

在xml中设置回弹效果，代码如下：

在Java代码中设置回弹效果，代码如下：

在xml中设置缩放匹配效果，代码如下：

在Java代码中设置缩放匹配效果，代码如下：

3.6.15　ListContainer组件

ListContainer是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。ListContainer组件继承自ComponentContainer组件，是布局组件的一种，如图3-84所示。

下面通过ListContainer实现一个循环列表的页面，如图3-85所示。

在layout目录下，在AbilitySlice对应的布局文件page_listcontainer.xml中创建ListContainer，如代码示例3-51所示。

代码示例3-51　ListContainer布局用法

在layout目录下新建xml文件（例如：item_sample.xml），作为ListContainer的子布局，如代码示例3-52所示。

代码示例3-52　ListContainer的子布局

创建SampleItem.java文件，作为ListContainer的数据包装类，如代码示例3-53所示。

代码示例3-53　创建ListContainer的数据包装类

ListContainer每一行可以存放不同的数据，因此需要适配不同的数据结构，使其都能添加到ListContainer上。

创建SampleItemProvider.java文件，使其继承自BaseItemProvider。必须重写的方法如表3-9所示。

接下来为ListContainer组件提供数据源，如代码示例3-54所示。

代码示例3-54　为ListContainer组件提供数据源

在Java代码中向ListContainer添加数据，并适配其数据结构，如代码示例3-55所示。

代码示例3-55　绑定ListContainer组件数据源

设置响应单击事件，代码如下：

设置响应长按事件，代码如下：

与ListContainer的样式设置相关的接口如表3-10所示。

3.6.16　PageSlider组件

PageSlider组件继承自StackLayout布局组件，该组件提供页面向上下及左右滑动的功能，如图3-86所示。PageSlider组件可以搭配RadioContainer、PageSliderIndicator、TabList等组件一起来使用。

使用PageSlider搭配RadioContainer实现如图3-87所示效果，常用于导航页面，RadioContainer用作PageSlider页码提示符。

使用PageSlider搭配PageSliderIndicator实现如图3-88所示效果，与图3-87所示的效果类似，默认这两个组件是配套使用的。

实现如图3-87所示效果，实现思路如下：

（1）在垂直方向布局组件DirectionalLayout中添加PageSlider组件和RadioContainer组件，将PageSlider组件的高度设为0vp，并将权重weight设为1，PageSlider组件所占空间等于屏幕高度减去RadioContainer高度后所剩余的空间。

（2）如果RadioButton不设置文字，则显示的内容就是一个小点，利用这个小点作为翻页提示符。

实现PageSlider布局如代码示例3-56所示。

代码示例3-56　PageSlider布局实现

有了上面的页面布局，我们看一看如何实现页面的左右滑动，实现思路如下：

（1）首先，需要单独创建3个页面布局文件，这里分别创建了slider_page0.xml、slider_ page1.xml和slider_page2.xml共3个页面文件。

（2）定义一个容器列表，把上面创建好的布局页面添加到列表中。

（3）通过pageSlider.setProvider方法，向PageSlider添加页面数据源，具体的方法是通过重写createPageInContainer方法，通过该方法把页面按索引取出，并添加到pageSlider的组件容器中。

（4）通过监听addPageChangedListener页面变化的事件，重写onPageChosen方法，给RadioButton设置选中状态。

在base/element文件夹中创建一个json文件，用于设置Text组件中的文本信息，代码如下：

创建第1个页面，并将文件命名为slider_page0.xml，如代码示例3-57所示。

代码示例3-57　创建PageSlider第1个页面

创建第2个页面，并将文件命名为slider_page1.xml，如代码示例3-58所示。

代码示例3-58　创建PageSlider第2个页面

创建第3个页面，并将文件命名为slider_page2.xml，如代码示例3-59所示。

代码示例3-59　创建PageSlider第3个页面

实现页面滑动，如代码示例3-60所示。

代码示例3-60　实现PageSlider滑动

3.6.17　系统剪贴板服务

用户通过系统剪贴板服务，可实现应用之间的简单数据传递。例如：在应用A中复制的数据，可以在应用B中粘贴，反之亦可。

（1）HarmonyOS提供了系统剪贴板服务的操作接口，支持用户程序从系统剪贴板中读取、写入和查询剪贴板数据，以及添加、移除系统剪贴板数据变化的回调。

（2）HarmonyOS提供了剪贴板数据的对象定义，包含内容对象和属性对象。

1．场景说明

同一设备的应用程序A、B之间可以借助系统剪贴板服务完成简单数据的传递，即应用程序A向剪贴板服务写入数据后，应用程序B可以从中读取数据，如图3-89所示。

在使用剪贴板服务时，需要注意以下几点：

（1）只有在前台获取焦点的应用才有读取系统剪贴板的权限，但系统默认输入法应用除外。

（2）写入剪贴板服务中的剪贴板数据不会随应用程序结束而被销毁。

（3）对同一用户而言，写入剪贴板服务的数据会被下一次写入的剪贴板数据所覆盖。

（4）在同一设备内，剪贴板单次传递内容不应超过800KB。

2．接口说明

SystemPasteboard提供了系统剪贴板操作的相关接口，例如复制、粘贴、配置回调等。PasteData是剪贴板服务操作的数据对象，一个PasteData由若干个内容节点（PasteData. Record）和一个属性集合对象（PasteData.DataProperty）组成。Record是存放剪贴板数据信息的最小单位，每个Record都有其特定的MIME类型，如纯文本、HTML、URI、Intent等。剪贴板数据的属性信息存放在DataProperty中，包括标签、时间戳等。

3．SystemPasteboard

SystemPasteboard提供了系统剪贴板服务的操作接口，例如复制、粘贴、配置回调等，如表3-11所示。

4．开发步骤

应用A获取系统剪贴板服务，代码如下：

应用A向系统剪贴板中写入一条纯文本数据，代码如下：

应用B从系统剪贴板读取数据，并将数据对象中的首个文本类型（纯文本/HTML）内容信息在控件中显示，但忽略其他类型内容，如代码示例3-61所示。

代码示例3-61　应用B从系统剪贴板读取数据

应用C注册添加系统剪贴板数据变化回调，当系统剪贴板数据发生变化时触发处理逻辑，如代码示例3-62所示。

代码示例3-62　应用C注册添加系统剪贴板数据变化回调

3.6.18　组件总结

本节介绍了15个鸿蒙ACEJava UI框架中的基础组件，通过这些基础组件，可以开发出更高级的业务组件及页面。