更多内容请访问：Harmonyos技术社区https://harmonyos.51cto.com本文介绍于2021-07-2113:21:30本文精彩内容：综合分析Component实例（开源代码），GIF动图展示，补充学习开发文档中的文档和示例代码，ACEJavaUI组件中的部分组件（50%）。学习过程中老师《鸿蒙操作系统开发入门经典》的笔记总结、延伸思考、案例反馈、阅读心得。为了尊重老师的知识产权和简化本文，本文不会贴代码、反例、机械打字。第三章鸿蒙ACEJava应用架构（二）3.6ACEJavaUI基础组件3.6.1组件和组件容器时间：2021-07-2113:25:12用户界面元素统称为组件，组件基于一定的层次结构structure组合起来形成布局。除非将组件添加到布局中，否则它们既不能显示也不能与之交互，因此用户界面至少由一个布局组成。在UI框架中，具体的布局类通常以XXLayout命名，完整的用户界面是一个布局，用户界面的一部分也可以是一个布局。布局包含Component和ComponentContainer对象。应用程序的Ability会在屏幕上显示一个用户界面，用于显示用户可以查看和交互的所有内容。应用程序中的所有用户界面元素均由Component和ComponentContainer对象组成。组件是绘制在屏幕上的用户可以与之交互的对象。ComponentContainer是一个容器，用于容纳其他Component和ComponentContainer对象。组件：提供内容展示，是界面中所有组件的基类。开发者可以为Component设置事件处理回调来创建一个交互组件。JavaUI框架提供了一些常用的界面元素，也可以称为组件。组件一般直接继承自Component或其子类，如Text、Image。ComponentContainer：将Component或ComponentContainer对象作为容器保存并对其进行布局。JavaUI框架为容器提供了一些标准的布局功能，这些功能继承自ComponentContainer。学习补充：开发文档中给出的两个例子。CommonLayout,Components下面是我在本机上跑的演示：例3-18（给组件添加相应的布局属性）很简单，没有敲过。3.6.2Text组件Text时间：2021-07-2114:41:37Text是用来显示字符串的组件，在界面上显示为文本区域（有很多扩展名）。Text组件继承自Component类Text组件背景可以通过background_element设置（背景放在图形下面）3-19（文字背景xml）、3-20（文字对齐xml）、3-21（换行符）及最大显示行xml),3-22(设置自动换行,最大行数,自动调整字号xml),3-23(自动调整规则java),3-24(跑马灯效果xml),3-25(marqueejava)示例从文件类型上分为两类：xml和java示例从功能和效果上分为三类：basic、automatic、marquee3.6.3Button组件Button按钮是一个通用的组件，可以点击时触发相应的操作，通常由文字或图标组成，也可以由图标和文字共同组成。它是一种特殊的文本组件。按钮扣形状可分为：普通型、椭圆型、胶囊型、圆形。学习补充：Button没有自己的XML属性，常用的XML属性继承自Text3-26（创建按钮的xml）-创建一个xml很简单3-27（自定义按钮的形状）这里是一个很重要的知识点==使用图片作为按钮==SVG转XML选择要导入的svg文件，DevEco会自动将SVG文件转换为xml导出通过element_XXX调整图片相对于文本的位置学习拓展：因为包含了3.62和3.63要讲解的**Component示例（开源代码）（代码来自开发文档developmentdocument）**，所以现在对Component.entry做一个全方位的分析：效果如下如下：项目文件目录的介绍和介绍：以mainability为例分析代码与几个的关系：Textslice分析。16:34:14TextField文本输入框组件用于接收用户输入。继承自Text组件。学习补充：例3-28（TextField的基本用法）设置光标自定义气泡Bubble矩形自定义气泡（shape="rectangle"）填充，输入类型，多行显示（multiple_lines）控制文本框是否可用（enable-为false时不能在文本框中输入）例3-29、3-30、3-31、3-32四个例子做了一个web登录页面（原创好评）3个文本框第一个是填写在手机号或邮箱信息中二是填写密码三是填写短信验证码时间：2021-07-2209:35:15找不到源码，只能手敲！3.6.5图片组件Image本地图片一般放在资源目录下的media文件下alpha透明（HCIA模拟试题有）图片缩放类型书案演练加要点：在config.json中添加网络权限配置网络文明访问白名单在XML布局文件中添加Image组件，然后通过ID设置网络图片需要定义加载图片的方法（loadNetImageURL-try-catch）需要在onStart方法中开启新线程3.6.6TabList和Tab组件时间：2021-07-2209:57:39学习补充：Tablist私有属性关注：tab_indicator_typeorientation默认设置fixedMode为false，该模式下TabList的总宽度为各个宽度之和Tab，如果固定TabList的宽度已设置。当超出可见区域时，可以滑动显示TabList。如果设置为true，TabList的总宽度将与可见区域相同，每个Tab的宽度将根据TabList的宽度平均分配。此模式适用于标签较少的情况。TabList可以实现多个标签栏的切换，Tab是某个标签。子标签通常放置在内容区域上方，以显示不同的类别。TabList常用接口：例3-33（创建TabList组件）、例3-34（设置默认状态和颜色）、例3-35（页面效果）、例3-36（TabList代码实现）通过循环Tab定义Tab数组component数组在TabList中添加一个Tab组件，用于监听TabList的selected事件，当一个Tab组件被选中时触发onSelected事件。学习与思考：API的理解：tabList.selectTabAt()tabList.getSelectedTab()2021-07-2210:47:11学习补充：重要Picker私有属性：value(当前值)max_value(最大值)min_value(最小值)value)selected_normal_text_margin_ratio(ratio)wheel_mode_enabled(是否循环数据)Picker组件提供滑动选择取值范围响应选择器的变化，设置字符串与数字一一对应DataPicker主要提供用户选择日期TimePicker主要选择用户选择时间选择器的简单应用（开发文档）picker.setFormatter(Formatterformatter)方法，修改字符串数组以特定格式设置显示。对于不直接显示数字的组件，该方法可以设置字符串和数字一一对应。字符串数组的长度必须等于范围内值的总数。用户在使用时需要注意，该方法会重写picker.setFormatter(Formatterformatter)方法。在Java代码中picker.setDisplayedData(newString[]{"Mon","Tue","Wed","Thu","Fri","Sat","Sun"});DatePickerDataPicker继承自StackLayout使用DataPicker时，需要声明importohos.agp.components.DatePicker；响应日期变化XML中添加Text显示选中日期Java代码中响应日期变化事件TimePicker获取时间并响应事件3.6.8CheckBox组件CheckBox时间：2021年7月22日11:57:55，CheckBox可以实现选择和取消选择函数示例3-37（选择和取消选择）、3-38（页面效果）、3-39（事件监听）需要使用**privateSetselectedSet=newHashSet<>();**保存选择resultComponentState.COMPONENT_STATE_CHECKED,ComponentState.COMPONENT_STATE_EMPTY,选中和取消设置设置选中状态checkbox.setCheck(true)初始化CheckBox的范式需要记住（范式代码来自开发文档开发文档）Checkboxcheckbox3=(Checkbox)findComponentById(ResourceTable.Id_check_box_3);checkbox3.setButtonElement(elementButtonInit());checkbox3.setCheckedStateChangedListener((component,state)->{if(state){selectedSet.add("C");}else{selectedSet.remove(“C”）;}showAnswer();});3.6.9单选按钮组件RadioButton时间：2021-07-2213:11:38RadioButton组件用于多选一个操作，需要配合RadioContainer使用。例3-40（xml实现单选）、3-41（Java响应事件）RadioContainer需要用到RadioButton组件组件封装可以通过orientation设置水平和垂直布局。总结作者将ACEJavaUI框架组件的学习分为两篇，每篇学习50%，本文为前50%的学习，每个组件在DevEco上钻研分析，总结。《鸿蒙操作系统开发入门经典》书中对组件的解释与开发文档类似，但不影响学习。而创新的部分让人有学习的动力。经过这段时间的学习，对Ability-Page-XML的关系、设置默认路由、页面生命周期、一些API、组件的一些属性、组件对应的响应事件等方面的掌握有了系统的提高。需要反复练习的各个组件TextFieldTabListandTabCheckBoxandRadioButton-RadioContainer更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com
