了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com前言小伙伴们大家好，我又来更新了！！大家应该都注意到了，社区最近都在致力于推广OpenHarmony生态，很多关于OpenHarmony的文章和线上活动开始显得人满为患。当然，这要归功于OpenHarmony3.1的诞生，这是一个好的开始，OpenHarmony的未来无疑是有迹可循的。作为一个北向开发者，很遗憾不能分享OpenHarmony相关的干货，因为我没有南向的硬件开发基础。关于OpenHarmony的内容，读者可以参考社区老师们的精彩内容，笔者也会继续分享HarmonyOS相关的北向知识，希望能帮助到有需要的读者，为社区的生态繁荣做出贡献..组件焦点首先，什么是组件焦点？组件焦点是指组件在当前用户界面中被用户关注的位置，也可以理解为组件的一种状态。当一个组件获得焦点时，它就成为用户需要与之交互的对象。在单个UI界面中，最多只有一个组件处于焦点状态，换句话说，不可能有两个兄弟组件同时处于焦点状态。组件焦点的概念不是很复杂，但是用文字来说可能比较抽象。读者可以结合上面的gif动画来理解，这个动画中的内容也是本期分享要实现的功能。Componentfocus在UI设置中有着重要的地位和非常广泛的应用，这在现实生活中是显而易见的。比如我们要在文本框中输入文字，当我们点击文本框时，它就会处于焦点状态；当手机应用程序弹出弹窗时，我们需要选择弹窗中提供的选项，弹窗在这个过程状态下会处于焦点状态。以上就是组件焦点的概念。下面给出与上述动画相同风格的demo的编写过程，这个demo也是组件焦点应用的一个典型例子。相信在制作完这个demo之后，你会对componentfocus有更深的理解。directory(1)创建一个新项目。(2)进行XML布局。使用Graphic为组件设置背景元素。在XML文件中定义Button组件。(3)设置Button组件的交互逻辑。原则。组件在获得焦点时会改变颜色。组件在获得焦点时会变大。组件获得焦点后弹出一个窗口。正文1.创建工程打开HarmonyOS的IDE，新建一个Java空白工程，勾选相关项如下：2.进行XML布局，使用Graphic为组件设置背景元素。我们首先需要创建两个新的ghaphic文件来定义不同的Button组件的背景元素。打开entry>src>main>resources>base>graphic。接下来，单击background_ability_main并通过Ctrl+C复制它。复制完成后，再次点击ability_main_xml，同时按下键盘上的Ctrl和V，即可完成文件的粘贴。粘贴过程中，顺便将background_ability_main.xml重命名为black.xml。这样，我们就得到了一个新的图形文件。然后，我们打开这个新的图形文件，修改代码如下：//设置圆角//设置颜色之后,设计了第一个Button组件的圆角和颜色，适当的圆角可以让Button组件变成大家喜欢的形状。接下来，我们需要设计Button组件的第二个背景元素。按照之前的操作，再次复制粘贴一个图形文件，这次重命名为exit.xml。然后，我们打开这个新的图形文件，修改代码如下：//设置圆角//设置边框颜色和边框粗细复制这个之后，设计第二个Button组件的圆角和颜色。当然，使用ghaphic文件来设计Button组件的样式元素是为了方便识别和好看。如果你有更好的想法，你也可以自己设计Button组件的样式。在XML文件中定义Button组件打开entry>src>main>resources>base>layout>ability_main_xml。将原来的DirectionLayout（方向布局）改为DependentLayout（依赖布局），并设置DependentLayout的背景色。...删除系统自带的内容为“HelloWorld”的Text组件，并添加四个AButton组件。<按钮ohos:below="$id:bigger"ohos:height="match_content"ohos:width="match_content"ohos:id="$+id:dialog"ohos:background_element="$graphic:black"ohos:text="焦点后放大"ohos:text_color="white"ohos:text_size="31vp"ohos:horizo??ntal_center="true"ohos:top_margin="20vp"ohos:bottom_margin="20vp"/>因为这里的XML布局是DependentLayout，所以我们需要为每个Button设置自己的Id，并为它们设置below，让每个Button组件有序的排列在它下面的对象下面。第二个到第四个Button组件的背景元素由之前创建的图形文件定义，后面会通过代码布局创建第一个Button组件的背景元素。另外，这四个Button组件的大小是作者通过XML文件临时定义的，所以它们目前的大小不是很合适，但最终显示的大小会通过MainAbilitySlice中的代码定义。3、设置Button组件的交互逻辑原理Buttonbutton=newButton(this);button.setTouchFocusable(true);button.setComponentStateChangedListener(newComponent.ComponentStateChangedListener(){@OverridepublicvoidonComponentStateChanged(Componentcomponent,inti){if(ComponentState.isStateMatched(ComponentState.COMPONENT_STATE_FOCUSED,i)){...}else{...}}});以上就是应用组件焦点的核心代码：第一部分，我们新建了一个Button对象，并将其TouchFocusable（即组件是否可以通过触摸获得焦点）设置为true，这样组件就可以通过触摸集中注意力。在第二部分，我们为这个Button组件设置了一个组件状态变化监听器（即ComponentStateChangedListener），并使用一个匿名内部类来实现监听器接口。最后，在onComponentStateChanged中，我们还需要设置一个if判断。()内的代码表示组件是否处于焦点中。{}after()需要写在组件获得焦点后执行的代码中，{afterelse}需要写在组件失去焦点后执行的代码中。知道这个原理后，我们开始写下面的代码。设置一个按钮打开MainAbilitySlice用于失焦。首先，设置一个Button组件，用于使其他组件失去焦点。除了可以占据焦点外，没有什么特别的作用。按钮button_exit=(Button)findComponentById(ResourceTable.Id_exit);button_exit.setTouchFocusable(true);button_exit.setComponentSize(720,170);组件获得焦点后，改变颜色首先设置两个ShapeElements，分别命名为element1和element2，用于定义Button组件的背景色和圆角。然后，将核心代码写入Button对象（顺便定义Button对象的大小），当if中的条件判断成功（即组件成功获取焦点）时，改变背景元素Button对象从蓝色变为橙色；当组件失去焦点时，将Button对象的背景元素恢复为其初始值。ShapeElementelement1=newShapeElement();element1.setRgbColor(newRgbColor(255,125,0));element1.setCornerRadius(80);ShapeElementelement2=newShapeElement();element2.setRgbColor(新的RgbColor(0,125,225));element2.setCornerRadius(80);按钮button_changecolor=(Button)findComponentById(ResourceTable.Id_Changecolor);button_changecolor.setComponentSize(700,150);button_changecolor.setBackground(element2);button_changecolor.setTouchFocusable(true);button_changecolor.setComponentStateChangedListener(newComponent.ComponentStateChangedListener(){@OverridepublicvoidonComponentStateChanged(Componentcomponent,inti){if(ComponentState.isStateMatched(ComponentState.COMPONENT_STATE_FOCUSED,i)){button_changecolor.setBackground(element1);button_changecolor.setText("颜色已经改变");}else{button_changecolor.setBackground(element2);button_changecolor.setText("聚焦后改变颜色");}}});获得焦点后组件变大同上，这次我们让Button组件获得焦点后变大，失去焦点时Revert回来按钮button_bigger=(Button)findComponentById(ResourceTable.Id_bigger);button_bigger.setComponentSize(700,150);button_bigger.setTouchFocusable(true);button_bigger.setComponentStateChangedListener(newComponent.ComponentStateChangedListener(){@OverridepublicvoidonComponentStateChanged(Componentcomponent,inti){if(ComponentState.isStateMatched(ComponentState.COMPONENT_STATE_FOCUSED,i)){button_bigger.setComponentSize(800,200);button_bigger.setText("放大");}else{button_bigger.setComponentSize(700,150);button_bigger.setText("聚焦后放大");}}});组件获得焦点后的弹窗与之前的代码不同。本次设计的Button组件不需要上面提到的核心代码，只需要设置一个点击监听器即可。这次我们需要用到PopupDialog组件，它是一个气泡对话框。在HarmonyOS中，对话框有一个机制，就是在弹出对话框的时候，对话框会一直处于焦点状态，防止其他组件重新获得焦点，也就是我们不能和对话框以外的组件进行交互此时的盒子。所以，在设计这个Button组件的时候，我们不需要设置状态变化的监听器。首先，我们通过ID获取一个Button对象，并设置相关参数。接下来，创建一个PupopDialog对象和一个Text对象（它们的context填充为MainAbilitySlice.this），设置Text对象的参数，并设置点击监听器，使PopupDialog在点击后隐藏；设置PopupDialog的相关参数，并将之前创建的Text对象作为自定义组件添加到PopupDialog中。最后，设置Button对象的监听器，使其被点击后，在页面上弹出PopupDialog。按钮button_dialog=(Button)findComponentById(ResourceTable.Id_dialog);button_dialog.setComponentSize(700,150);button_dialog.setTouchFocusable(true);button_dialog.setText("获得焦后弹窗");PopupDialogpopupDialog=newPopupDialog(MainAbilitySlice.this,button_dialog);Texttip=newText(MainAbilitySlice.this);tip.setText("这是一个弹窗（点击即可关闭）");tip.setTextSize(83);tip.setTextColor(Color.WHITE);tip.setLayoutConfig(newComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT,ComponentContainer.LayoutConfig.MATCH_CONTENT));tip.setClickedListener(newComponent.ClickedListener(){@OverridepublicvoidonClick(Componentcomponent){popupDialog.hide();}});popupDialog.setCustomComponent(提示);popupDialog.setHasArrow(true);popupDialog.setBackColor(Color.BLUE);popupDialog.setMode(LayoutAlignment.CENTER|LayoutAlignment.BOTTOM);button_dialog.setClickedListener(newComponent.ClickedListener(){@OverridepublicvoidonClick(Componentcomponent){popupDialog.show();}});这之后，第三个Button组件就可以了，点击Button组件后弹出PopupDialog，再次点击PopupDialog后PopupDialog隐藏。打开模拟器，我们可以看看效果：到此本期的分享就结束了，我们下期再见！了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com。
