HarmonyOS 如何自定义tab

tab有突出的按钮。

HarmonyOS
2024-09-24 12:29:49
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
鱼弦CTO
1

在 HarmonyOS 中自定义 Tab 组件,并且实现一个带有突出按钮的效果,可以通过结合 ​​TabComponent​​​ 和 ​​Button​​ 等 UI 组件来实现。下面是一个示例,展示如何创建自定义的 Tab 组件并在其中加入一个突出的按钮。

### 实现步骤

  1. 创建基本的 Tab 布局
  2. 添加一个突出的按钮
  3. 为 Tab 和按钮设置样式

### 示例代码

以下是一个完整的示例代码,展示如何在 HarmonyOS 的 ArkTS 中实现自定义 Tab 组件:

// CustomTabs.ets
import { Entry, Component } from '@ohos/ets-lib'

@Entry
@Component
struct CustomTabs {
  @State selectedIndex: number = 0;

  build() {
    Column() {
      // Tab Bar
      Row({
        alignItems: 'center',
        justification: 'spaceBetween'
      }) {
        this.buildTabItem('Tab 1', 0);
        this.buildTabItem('Tab 2', 1);
        this.buildTabItem('Tab 3', 2);
      }
      .width('100%')
      .height(50)
      .backgroundColor('#f5f5f5')

      // Highlighted Button
      AbsoluteLayout() {
        Button("Center")
          .onClick(() => this.onCenterButtonClick())
          .width(60)
          .height(60)
          .backgroundColor('#ff4081')
          .borderRadius(30) // Make it rounded
          .position({ top: -30, left: 'calc(50% - 30px)' }) // Center the button and make it protrude
      }
      .width('100%')
      .height(60)

      // Content
      Text(`Selected Tab: ${this.selectedIndex + 1}`)
        .fontSize(24)
        .margin({ top: 20 })
    }
  }

  buildTabItem(title: string, index: number) {
    Text(title)
      .fontSize(this.selectedIndex === index ? 18 : 16) // Highlight selected tab
      .padding(10)
      .onClick(() => this.onTabSelected(index))
      .backgroundColor(this.selectedIndex === index ? '#e0e0e0' : '#f5f5f5')
  }

  onTabSelected(index: number) {
    this.selectedIndex = index;
  }

  onCenterButtonClick() {
    // Add your custom action for the center button here
    console.log("Center button clicked");
  }
}

### 说明

  1. CustomTabs​ 组件:
  • 使用​​@State​​ 装饰器声明​​selectedIndex​​ 状态变量,用于跟踪当前选中的 Tab。
  • 在​​build()​​ 方法中构建了主要布局,包括 Tab Bar、突出按钮和内容区域。
  1. buildTabItem​ 方法:
  • 构建每个 Tab 项,通过点击事件更新​​selectedIndex​​。
  • 根据是否选中状态应用不同的样式(如字体大小和背景色)。
  1. 突出按钮:
  • 使用​​AbsoluteLayout​​ 来定位按钮,使其显著突出在 Tab Bar 上方。
  • 设置按钮的样式,使其成为圆形,并通过​​position​​ 属性使其居中。
  1. 事件处理:
  • 在​​onCenterButtonClick​​ 方法中添加自定义逻辑,比如导航到特定页面或者触发某个功能。

### 样式和布局调整

  • 根据实际需求,可以调整按钮和 Tab 项的样式,如颜色、尺寸、边距等。
  • 如果需要更复杂的动画效果,可以使用 HarmonyOS 提供的动画 API。

### 扩展功能

  • 可以进一步扩展此示例,添加更多 Tabs 或者对中心按钮进行更多自定义操作。
  • 更加复杂的交互和动画也可以通过进一步的开发实现。

通过以上步骤,你可以在 HarmonyOS 中实现一个自定义的 Tab 组件,并将其中的按钮设计成突出的效果。希望这个示例能帮助你理解如何进行自定义UI组件的开发。

分享
微博
QQ
微信
回复
2024-09-24 17:30:55
put_get

可以自定义一个Tab叠加在页面中,设置其相应的TabBar,距离其底部的距离,使其突出显示。

可以参考以下代码:

@Entry  
@Component  
struct Drag2 {  
  @State tabArray: Array<number> = [0, 1, 2]  
  @State focusIndex: number = 0  
  @State pre: number = 0  
  @State index: number = 0  
  private controller: TabsController = new TabsController()  
  @State test: boolean = false  
  @State icon:string ='app.media.icon'  
  
  @Builder  
  Tab(tabName: string, tabItem: number, tabIndex: number) {  
    Column({ space: 10 }) {  
      Stack(){  
        Row(){  
          Image($r('app.media.startIcon'))  
            .width(40).height(40)  
          Text(tabName).fontSize(14)  
            .margin({top:60,left: -40})  
        }.width(80).height(80).backgroundColor("#ffffff").justifyContent(FlexAlign.Center)  
        .border({  
          radius: { topLeft: 130, topRight: 130, bottomLeft: 40, bottomRight: 80 },  
        })  
      }  
      .margin({bottom:tabIndex ===1 ? 80 : 0})  
    }  
    .justifyContent(FlexAlign.Center)  
    .onClick(() => {  
      this.controller.changeIndex(tabIndex)  
      this.focusIndex = tabIndex  
    })  
    .backgroundColor(Color.White)  
    .width("33.34%")  
    .height(100)  
  }  
  build() {  
    Column() {  
      Stack({alignContent:Alignment.BottomStart}) {  
        //tabs  
        Tabs({ barPosition: BarPosition.End, controller: this.controller }) {  
          ForEach(this.tabArray, (item: number, index: number) => {  
            TabContent() {  
              Text('我是页面 ' + item + " 的内容")  
                .height(300)  
                .width('100%')  
                .fontSize(30)  
            }  
            .backgroundColor(Color.Blue)  
          })  
        }  
        .barHeight(0)  
        .animationDuration(100)  
        .onChange((index: number) => {  
          console.log('foo change')  
          this.focusIndex = index  
        })  
        // 页签  
        Row() {  
          Scroll() {  
            Row() {  
              ForEach(this.tabArray, (item: number, index: number) => {  
                this.Tab("页签 " + item, item, index)  
              })  
            }  
            .margin({ top:20 })  
            .justifyContent(FlexAlign.SpaceBetween)  
            .alignItems(VerticalAlign.Bottom)  
          }  
          .scrollable(ScrollDirection.Horizontal)  
          .scrollBar(BarState.Off)  
          .width('100%')  
        }  
        .justifyContent(FlexAlign.SpaceBetween)  
        .alignItems(VerticalAlign.Bottom)  
        .width('100%')  
      }  
      .width('100%')  
    }  
    .height('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-09-24 16:13:01
相关问题
HarmonyOS 如何自定义BuildMode?
482浏览 • 1回复 待解决
HarmonyOS 如何自定义注解?
213浏览 • 1回复 待解决
自定义弹窗自定义转场动画
1098浏览 • 1回复 待解决
HarmonyOS 如何设置自定义字体
813浏览 • 1回复 待解决
HarmonyOS Checkbox如何自定义图标
309浏览 • 0回复 待解决
HarmonyOS 自定义键盘
213浏览 • 1回复 待解决
HarmonyOS 自定义接口如何使用?
128浏览 • 1回复 待解决
HarmonyOS如何自定义组件的Controller?
294浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
397浏览 • 1回复 待解决
HarmonyOS 使用自定义字体
218浏览 • 1回复 待解决
HarmonyOS 自定义弹窗选择
340浏览 • 1回复 待解决