更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com/#zzTab标签是应用中最受欢迎的使用和最常见的布局形式，无论是在PC端还是在移动端，都清晰明了，层次关系简单，可以让用户知道他们在哪里。Tab标签可以放在页面底部，比如微信的底部标签；也可以放在顶部，比如新闻APP顶部的分类选项；也可以放在左侧或右侧，一般常见于后台应用树状导航栏的左侧。它们有一个共同的特点，就是无论我点击哪个tab，都不会跳转到二级页面，而是在同级页面tab下的内容区渲染当前选中tab的内容。例如下面的示例图片，我们有三个标签，图片，视频和音频。我们在第一次加载的时候，选择图片（Image）标签，最下面的内容区域是一些排列好的图片。如果我们选择视频（Video），那么底部的图片会被移除，视频列表页面会被加载。1.首先修改ability_main.xml代码，在布局中添加一个toptab列表。2、在MainAbilitySlice中为TabList控件添加Tab选项卡。//列表项TabListtabList=(TabList)findComponentById(ResourceTable.Id_tab_list);TabList.TabimageTab=tabList.newTab(getContext());imageTab.setText("Image");tabList.addTab(imageTab,true);scrollView.addComponent(imageGrid);TabList.TabvideoTab=tabList.newTab(getContext());videoTab.setText("Video");tabList.addTab(videoTab);TabList.TabaudioTab=tabList.newTab(getContext());audioTab.setText("音频");tabList.addTab(audioTab);3.tab切换状态需要监听tab的选中状态。我们可以在监听事件中处理Tab的业务逻辑，它为我们提供了三种方法，一是当前选中的Tab，二是未选中的Tab，三是当前的Tab再次被选中。在这三个方法中，我们可以具体实现业务逻辑，比如当当前选中的Tab被连续点击时，我们可以刷新我们展示的内容。tabList.addTabSelectedListener(newTabList.TabSelectedListener(){@OverridepublicvoidonSelected(TabList.Tabtab){//TODO具体业务逻辑代码}@OverridepublicvoidonUnselected(TabList.Tabtab){//TODO具体业务逻辑代码}@OverridepublicvoidonReselected(TabList.Tabtab){//TODO具体业务逻辑代码}});4、我们已经实现了toptab，那么点击后如何改变内容呢？这里我们需要用到一个新的组件ScrollView，ScrollView是一个滚动功能组件。如果我们使用常规的布局组件，我们需要重写内容超出范围后的上下左右滚动，而ScrollView组件只需要设置其子组件的方向即可。修改ability_main.xml代码，添加ScrollView组件。xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:background_element="#444444"ohos:orientation="vertical">。../>ohos:id="$+id:tab_content"ohos:height="match_parent"ohos:width="match_parent"ohos:padding="10vp"ohos:weight="9">5.初始化两个TableLayout组件，其中添加多个子组件显示图片列表和视频列表（仅供参考学习，真实图片和视频未实现）。privatevoidinitVideoGrid(){videoGrid=newTableLayout(this);videoGrid.setWidth(MATCH_PARENT);videoGrid.setHeight(MATCH_CONTENT);videoGrid.setColumnCount(1);videoGrid.setRowCount(2);for(inti=1;i<4;i++){Texttext=newText(this);text.setWidth(MATCH_PARENT);text.setHeight(800);text.setTextAlignment(TextAlignment.CENTER);text.setText("第"+i+"块视频");ShapeElementshapeElement=newShapeElement();shapeElement.setCornerRadius(20);shapeElement.setRgbColor(newRgbColor(192,0,255));text.setBackground(shapeElement);text.setPadding(10,10,10,10);text.setMarginsTopAndBottom(10,10);text.setMarginsLeftAndRight(20,20);text.setTextSize(50);videoGrid.addComponent(text);}}privatevoidinitImageGrid(){imageGrid=newTableLayout(this);imageGrid.setWidth(MATCH_PARENT);imageGrid.setHeight(MATCH_CONTENT);imageGrid.setColumnCount(4);imageGrid.setRowCount(2);for(inti=1;i<=10;i++){Texttext=newText(this);text.setWidth(400);text.setHeight(400);文本.setTextAlignment(TextAlignment.CENTER);text.setText("th"+i+"blockimage");ShapeElementshapeElement=newShapeElement();shapeElement.setCornerRadius(20);shapeElement.setRgbColor(newRgbColor(0,192,255));text.setBackground(shapeElement);text.setPadding(10,10,10,10);text.setMarginsTopAndBottom(10,10);text.setMarginsLeftAndRight(20,20);text.setTextSize(50);imageGrid.addComponent(text);}}6.构造完成每个选项卡的内容后，我们需要在选择监视器中进行显示处理。选择图片后，需要加载图片列表。选择视频后，需要同时加载视频列表和移除图片列表，否则会出现小问题，你也可以试试。看看有什么问题。tabList.addTabSelectedListener(newTabList.TabSelectedListener(){@OverridepublicvoidonSelected(TabList.Tabtab){if(tab.getPosition()==0){scrollView.addComponent(imageGrid);}elseif(tab.getPosition()==1){scrollView.addComponent(videoGrid);}else{scrollView.addComponent(newDirectionalLayout(getContext()));}HiLog.info(label,"onSelected:"+tab.getPosition());}@OverridepublicvoidonUnselected(TabList.Tabtab){if(tab.getPosition()==0){scrollView.removeComponent(imageGrid);}elseif(tab.getPosition()==1){scrollView.removeComponent(videoGrid);}else{scrollView.removeComponent(newDirectionalLayout(getContext)()));}HiLog.info(label,"onUnselected:"+tab.getText());}@OverridepublicvoidonReselected(TabList.Tabtab){HiLog.info(label,"onReselected:"+tab.getText());}});}这里我用Tab的序号来判断选择的操作，你也可以用它的text属性来判断。到这里基本的功能已经实现了，我们运行一下看看效果。图中有个小bug，你发现了吗？如何解决这个问题呢？?版权归作者及HarmonyOS技术社区所有。如需转载请注明出处，否则将追究法律责任。了解更多请访问：与华为官方共建鸿蒙科技社区https://harmonyos.51cto.com/#zz
