HarmonyOS 鸿蒙Next 自定义TabLayout代码示例，通过 Scroll 锚点 Tab 布局，滚动条会自动滚动使选中的标签居中显示。

class MyTabItem {
label: string = “”;
positionX: number = -1; // 当前位置
width: number = -1; // 当前宽度

constructor(label: string) {
this.label = label;
}
}
@Component
struct MyTabLayout {
onSelected?: (selectedIndex: number) => void;
scroller: Scroller = new Scroller();
@Prop tabItems: MyTabItem[];
@State @Watch(‘selectIndexChanged’) selectedIndex: number = 0;
@State tabBarWidth: number = 0; // Tab 栏宽度
selectIndexChanged() {
if (this.onSelected) {
this.onSelected(this.selectedIndex);
}
}
build() {
Column() {
Scroll(this.scroller) {
Row() {
ForEach(this.tabItems, (item: MyTabItem, index: number) => {
Row() {
Image($r(‘app.media.app_icon’)).width(‘44lpx’).height(‘44lpx’);
Text(item.label)
.margin({ left: ‘16lpx’ })
.fontColor(index === this.selectedIndex ? “#FF1919” : “#2E2E2E”)
.fontSize(‘30lpx’);
}.padding({ right: ‘16lpx’ })
.onAreaChange((previousArea: Area, currentArea: Area) => {
if (item.positionX === -1) {
item.positionX = currentArea.position.x as number;
}
if (item.width === -1) {
item.width = currentArea.width as number;
}
})
.onClick(() => {
this.selectedIndex = index;
          <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.scroller.scrollTo({
            xOffset: (item.positionX - <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tabBarWidth / <span class="hljs-number"><span class="hljs-number">2</span></span> + item.width / <span class="hljs-number"><span class="hljs-number">2</span></span>),
            yOffset: <span class="hljs-number"><span class="hljs-number">0</span></span>,
            animation: <span class="hljs-literal"><span class="hljs-literal">true</span></span>
          });
        });
      });
    }.height(<span class="hljs-string"><span class="hljs-string">'95lpx'</span></span>);
  }
  .scrollable(ScrollDirection.Horizontal)
  .scrollBar(BarState.Off)
  .borderWidth({ bottom: <span class="hljs-number"><span class="hljs-number">1</span></span> })
  .borderColor(<span class="hljs-string"><span class="hljs-string">"#e3e3e3"</span></span>)
  .align(Alignment.Start)
  .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
  .onAreaChange((previousArea: Area, currentArea: Area) =&gt; {
    <span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.tabBarWidth = currentArea.width as number;
  });
}
}
}
@Entry
@Component
struct Page11 {
scroller: Scroller = new Scroller();
@State tabItems: MyTabItem[] = [];
@State selectedIndex: number = 0
getRandomInt(min: number, max: number): number {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
aboutToAppear(): void {
for (let i = 0; i < 20; i++) {
this.tabItems.push(new MyTabItem(项目:${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.getRandomInt(<span class="hljs-number"><span class="hljs-number">1</span></span>, <span class="hljs-number"><span class="hljs-number">10000</span></span>)}));
}
}
build() {
Column() {
MyTabLayout({
tabItems: this.tabItems,
onSelected: (selectedIndex: number) => {
console.info(当前选择的位置: ${selectedIndex});
this.selectedIndex = selectedIndex
}
});
Stack() {
Text(当前选择的位置:${<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.selectedIndex})
}.width(‘100%’)
.layoutWeight(1)
.backgroundColor(Color.Orange)
}
.height(‘100%’)
.width(‘100%’);
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>