forHarmonyOS官方模板学习开发，Phone设备的FeatureAbility模板，使用XML布局，显示内容为两部分的网格表，每行网格显示4项，其中的元素可以拖动和排序网格。搭建环境，安装DevEcoStudio。详见DevEcoStudio下载。搭建DevEcoStudio开发环境。DevEcoStudio开发环境依赖于网络环境。需要联网才能保证工具的正常使用。开发环境可根据以下两种情况进行配置：如果可以直接上网，只需要下载HarmonyOSSDK即可运行。如果网络不能直接访问Internet，则需要通过代理服务器访问。请参考配置开发环境。代码结构解读注：'#'代表注释后台函数gridabilityjava│MainAbility.java│MyApplication.java│├─component│DragLayout.java#自定义拖拽功能组件│GridView.java#自定义Grid视图组件，extendsTableLayout。..能力页负责实例化自定义DragLayout拖拽组件│└─utilsAppUtils.java#tool类，提供从元素资源获取值的方法；获取屏幕坐标。这是几个java类之间的关系页面Resources├─base│├─element│color.json││float.json││integer.json││string.json│││├─graphic│background_bottom_button.xml#页面底部按钮形状││background_bottom_layout.xml#页面底部布局形状││background_item_active_button.xml#griditem激活形状││background_item_button.xml#griditem默认形状││background_table_layout_down.xml#下方网格形状││background_table_layout_up.xml#顶部网格形状││├─layout││ability_main.xml#主展示页面││app_bar_layout.xml#app工具栏布局页面││grid_item.xml#单个griditem布局页面│││├─media││5G.png││back.png││back_white.png页面布局ability_main.xml#主要显示页面本页面由DirectionalLayout、StackLayout、DependentLayout布局组成，整体布局是app工具栏的上下布局，使用StackLayout布局，通过includ标签引入到主页面。下面是一个支持拖拽的GridView，由DependentLayout和DirectionalLayout组成。使用的组件是ScrollView、GridView、Text、Button和Image。app_bar_layout.xml#apptoolbarlayoutpagegrid_item.xml#Singlegriditemlayoutpage后台逻辑1.初始化上面的GridView先构建item模拟数据列表，将构建好的数据通过GridView传递给GridAdapter来初始化item组件列表。setAdapter方法为每个item组件绑定长按事件，并设置GridView的TAG属性（TAG指的是上面的GridView或者下面的GridView）。/***初始化上面的Griditem*/privatevoidinitUpListItem(){//构建item模拟数据列表ListupperItemList=newArrayList<>();for(inti=0;i();for(inti=0;islice.terminateAbility());ComponentrightButton=slice.findComponentById(ResourceTable.Id_bottom_right_button);rightButton.setWidth(buttonWidth);//CloseAbilityrightButton.setClickedListener(component->slice.terminateAbility());}4.初始化应用程序工具栏这看起来什么也没做是我想根据本地化信息设置返回箭头的方向，因为有些语言是从右到左阅读的。/***检查指定Locale的文本布局是否为从右到左。*设置返回箭头的方向*/privatevoidinitAppBar(){if(TextTool.isLayoutRightToLeft(Locale.getDefault())){ImageappBackImg=(Image)slice.findComponentById(ResourceTable.Id_left_arrow);appBackImg.setRotation(180);}}5.初始化的监听事件包括返回按钮的返回事件和ScrollView的触摸事件。触摸事件包含大量的细节操作，比如拖动时的阴影效果、滚动条处理、拖动和交换结束的处理、过渡效果、上下格有效区域的计算,拖拽完成后将被拖拽的组件添加到对应的组件中。网格的操作等等，都可以作为参考。/***初始化监听事件，包括返回键返回事件，ScrollView触摸事件*/privatevoidinitEventListener(){//'返回键'监听事件if(slice.findComponentById(ResourceTable.Id_left_arrow)instanceofImage){ImagebackIcon=(Image)slice.findComponentById(ResourceTable.Id_left_arrow);//backIcon.setClickedListener(component->slice.terminateAbility());}//ScrollView的Touch事件监听，直接用scrollView.setTouchEventListener((component,touchEvent)->{//Press屏幕的位置MmiPointdownScreenPoint=touchEvent.getPointerScreenPosition(touchEvent.getIndex());switch(touchEvent.getAction()){//表示第一根手指触摸屏幕。这表示开始交互caseTouchEvent.PRIMARY_POINT_DOWN:currentDragX=(int)downScreenPoint.getX();currentDragY=(int)downScreenPoint.getY();//获取指针索引相对偏移位置的x和y坐标.MmiPointdownPoint=touchEvent.getPointerPosition(touchEvent.getIndex());scrollViewTop=(int)downScreenPoint.getY()-(int)downPoint.getY();scrollViewLeft=(int)downScreenPoint.getX()-(int)downPoint.getX();returntrue;//表示最后一个手指离开了屏幕。这个表示交互结束caseTouchEvent.PRIMARY_POINT_UP://恢复下面grid的描述changeTableLayoutDownDesc(ResourceTable.String_down_grid_layout_desc_text);caseTouchEvent.CANCEL:if(isViewOnDrag){selectedView.setScale(1.0f,1.0f);selectedView.setAlpha(1.0f);selectedView.setVisibility(Component.VISIBLE);isViewOnDrag=false;isScroll=false;returntrue;}break;//表示手指在屏幕上移动caseTouchEvent.POINT_MOVE:if(!isViewOnDrag){break;}intpointX=(int)向下屏幕点。getX();intpointY=(int)downScreenPoint.getY();this.exchangeItem(pointX,pointY);if(UP_GRID_TAG.equals(selectedView.getTag())){this.swapItems(pointX,pointY);}这。handleScroll(pointY);returntrue;}returnfalse;});}复制总结1、自定义组件在构造函数中传递slice，方便访问页面其他组件。ComponentitemLayout=LayoutScatter.getInstance(slice.getContext()).parse(ResourceTable.Layout_grid_item,null,false);需要注意的是，slice是指页面，但是自定义组件往往有自己的布局文件，一般不在slice中，所以不要通过slice获取自定义组件的子组件，获取不到,但是可以通过LayoutScatter获取//错误的方式ComponentgridItem=slice.findComponentById(ResourceTable.Layout_grid_item);//正确的方式ComponentgridItem=LayoutScatter.getInstance(context).parse(ResourceTable.Layout_grid_item,null,false);2.单位转换vp2pxjava组件对象宽高margin默认为px，从element获取的值需要转换为单位，可以使用AttrHelper.vp2px将vp转换为px。如果（gridItem.findComponentById（ResourceTable.Id_grid_item_text）instanceofText）{TexttextItem=（文本）gridItem.findComponentById（ResourceTable.Id_grid_item_text）；textItem.setText（item.getItemText（））；textItem.setTextSize（AttrHelper.fp2px（10，上下文）);}3.子组件的获取获取到一个组件对象后，可以使用该组件对象的findComponentById方法继续获取内部子组件ImageimageItem=(Image)gridItem.findComponentById(ResourceTable.Id_grid_item_image);4.TableLayout的使用TableLayout继承自ComponentContainer，提供了一种在组件中用表格来排列组件的布局。TableLayout提供了一个用于对齐和排列组件以在表格中显示组件的界面。布局、行数和列数以及组件的位置都可以配置。例如，removeAllComponents();可用于清除ComponentContainer管理的所有组件，addComponent用于向ComponentContainer容器添加组件。在示例中，GridView继承自TableLayout。/***ThesetAdapter**@paramadapteradapter*@paramlongClickedListenerlongClickedListener*/voidsetAdapter(GridAdapteradapter,LongClickedListenerlongClickedListener){//清空ComponentContainer管理的所有组件removeAllComponents();//遍历item组件列表for(inti=0;i
