HarmonyOS鸿蒙Next中Tabs导航栏如何实现自定义宽度并右侧留出位置放置图标按钮等组件

HarmonyOS鸿蒙Next中Tabs导航栏如何实现自定义宽度并右侧留出位置放置图标按钮等组件 Tabs导航栏需要实现自定义宽度，右侧留出位置放置图标按钮等组件，有办法实现吗？

6 回复

没有api设置，可以使用自定义tabbar实现，demo如下

@Entry
@Component
struct TabsExample {
  @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

  // 单独的页签
  @Builder Tab(tabName: string, tabItem: number, tabIndex: number) {
    Row({ space: 20 }) {
      Text(tabName).fontSize(18)
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .width(100)
    .height(60)
    .borderRadius({ topLeft: 10, topRight: 10 })
    .onClick(() => {
      this.controller.changeIndex(tabIndex)
      this.focusIndex = tabIndex
    })
  }

  build() {
    Column() {
      Column() {
        // 页签
        Row({ space: 7 }) {
          Scroll() {
            Row() {
              ForEach(this.tabArray, (item: number, index: number) => {
                this.Tab("页签 " + item, item, index)
              })
            }.justifyContent(FlexAlign.Start)
          }.align(Alignment.Start).scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('90%')
        }
        .alignItems(VerticalAlign.Bottom)
        .width('100%')
        .backgroundImage($r('app.media.bg'))
        .backgroundImageSize({ width: '100%', height: '100%' })
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')

      // tabs
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.tabArray, (item: number, index: number) => {
          TabContent() {
            Text('我是页面 ' + item + " 的内容").height(300).width('100%').fontSize(30)
          }.backgroundColor(Color.Pink)
        })
      }.width('100%').barHeight(0).animationDuration(100).onChange((index: number) => {
        console.log('foo change')
        this.focusIndex = index
      })
    }.height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中Tabs导航栏如何实现自定义宽度并右侧留出位置放置图标按钮等组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


能不能提供示意图，方便帮您解答。

希望HarmonyOS能继续加强在安全性方面的研发，保护用户的隐私和数据安全。

横向List + swiper

在HarmonyOS鸿蒙Next中，Tabs导航栏的自定义宽度并通过右侧留出位置放置图标按钮等组件，可以通过以下步骤实现：

  1. 布局设计：使用DirectionalLayout或TableLayout等布局组件来构建Tabs导航栏的整体结构。将Tabs组件放置在布局的一侧，留出另一侧的空间用于放置图标按钮等组件。

  2. 自定义宽度：通过设置Tabs组件的宽度属性来实现自定义宽度。可以使用layout_width属性来指定具体的宽度值，或者使用weight属性来动态分配空间。

  3. 右侧组件放置：在布局的另一侧放置ImageButton、Button等组件，通过设置它们的layout_width和layout_height属性来控制它们的大小和位置。

  4. 样式调整：通过style属性或XML样式文件来调整Tabs和右侧组件的样式，确保它们在视觉上协调一致。

以下是一个简单的XML布局示例：

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="horizontal">

    <Tabs
        ohos:id="$+id:tabs"
        ohos:width="0vp"
        ohos:height="match_parent"
        ohos:layout_weight="1"
        ohos:orientation="horizontal">
        <!-- Tab items here -->
    </Tabs>

    <ImageButton
        ohos:id="$+id:iconButton"
        ohos:width="48vp"
        ohos:height="48vp"
        ohos:right_margin="16vp"
        ohos:image_src="$media:icon"
        ohos:clickable="true"/>
</DirectionalLayout>

在这个示例中，Tabs组件通过layout_weight属性占据了大部分宽度，而ImageButton组件则放置在右侧，并设置了固定的宽度和高度。

通过这种方式，可以在HarmonyOS鸿蒙Next中实现Tabs导航栏的自定义宽度，并在右侧留出位置放置图标按钮等组件。

在HarmonyOS鸿蒙Next中，可以通过自定义Tabs组件的布局来实现宽度调整，并在右侧留出位置放置图标按钮等组件。以下是实现步骤：

  1. 使用Row布局：将Tabs与右侧图标按钮包裹在Row组件中。
  2. 设置Tabs的layoutWeight：为Tabs设置layoutWeight属性以占据剩余空间。
  3. 添加右侧组件：在Row中添加图标按钮等组件，并设置其宽度或固定尺寸。

示例代码：

Row() {
  Tabs({ barPosition: BarPosition.Start }) {
    // Tabs内容
  }.layoutWeight(1) // Tabs占据剩余空间

  Button() {
    Image($r('app.media.icon'))
  }.width(50) // 右侧按钮宽度
}

通过这种方式，Tabs会自动调整宽度，右侧可以放置其他组件。

回到顶部