OmniUI

Appearance

导航栏NavigationBar ​

一、效果总览 ​

二、描述 ​

页面顶部的导航栏。

三、构造函数及参数说明 ​

OmniNavigationBar ​

参数名参数类型描述是否必填默认值
isShowStatusBarboolean是否显示状态栏否false
navHeightnumber导航栏高度否50
bgColorstring背景色否#FFFFFF
titleResourceStr标题否无
titleFontSizenumber | string | Resource标题字体大小否主题fontSizeLg，16
titleFontWeightnumber | FontWeight | string标题粗细体否FontWeight.Medium
titleFontColorResourceColor标题字体颜色否#000000
titleIsCenterboolean标题是否居中否true
hideBackButtonboolean是否隐藏返回按钮否false
backButtonIconResourceStr返回按钮图标否back
backButtonIconResourceStr返回按钮图标否back
searchPlaceholderResourceStr搜索框文本占位符否搜索
searchInputTypeInputType搜索输入框类型否InputType.Normal
searchImageResourceStr搜索图标否search
backClick(event?: ClickEvent) => void返回点击否无
searchClick(event?: ClickEvent) => void搜索框点击否无
searchClick(event?: ClickEvent) => void搜索框点击否无
onSubmit(enterKey?: EnterKeyType, event?: SubmitEvent) => void输入提交回调否无
onTextChange(value: string) => void输入内容变化回调否无
onEditChange(isEditing: boolean) => void输入状态变化回调否无
rightMenusOmniMenuItem[]右侧功能按钮否无

OmniMenuItem ​

参数名参数类型描述是否必填默认值
imagestring | ResourceStr按钮图标是无
action() => void按钮点击否无

四、代码演示 ​

typescript
Text('样式一：仅标题').fontColor(Color.Gray).fontSize(16)
  .alignSelf(ItemAlign.Start)
  .padding({
    left: 15,
    right: 15,
    top: 10,
    bottom: 10
  })
OmniNavigationBar({
  bgColor: Color.White,
  hideBackButton: true,
  title: '标题居中',
  titleFontSize: '18vp'
})

Text('样式二：标题 + 返回 + 右侧按钮')
  .fontColor(Color.Gray)
  .fontSize(16)
  .alignSelf(ItemAlign.Start)
  .margin({ top: 25 })
  .padding({
    left: 15,
    right: 15,
    top: 10,
    bottom: 10
  })
OmniNavigationBar({
  title: '标题居中',
  titleFontSize: '18vp',
  rightMenus: [
    {
      image: 'https://pic6.58cdn.com.cn/nowater/frs/n_v3b4f2c5f26ceb4c01998907afeaedb34d.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮1' })
      }
    }
  ]
})

Blank().height(10)
OmniNavigationBar({
  title: '标题居中',
  titleFontSize: '18vp',
  backClick: () => {
  },
  rightMenus: [
    {
      image: 'https://pic4.58cdn.com.cn/nowater/frs/n_v3ba2b2c34ade04bfcba4ae805e1769cbb.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮1' })
      }
    },
    {
      image: 'https://pic6.58cdn.com.cn/nowater/frs/n_v3b4f2c5f26ceb4c01998907afeaedb34d.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮2' })
      }
    }
  ]
})

Blank().height(10)
OmniNavigationBar({
  title: '标题居左',
  titleIsCenter: false,
  titleFontSize: '18vp',
  backClick: () => {
  },
  rightMenus: [
    {
      image: 'https://pic6.58cdn.com.cn/nowater/frs/n_v35691dfb4777f4fed9455fdc35f301210.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮1' })
      }
    },
    {
      image: 'https://pic4.58cdn.com.cn/nowater/frs/n_v3ba2b2c34ade04bfcba4ae805e1769cbb.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮2' })
      }
    },
    {
      image: 'https://pic6.58cdn.com.cn/nowater/frs/n_v3b4f2c5f26ceb4c01998907afeaedb34d.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮3' })
      }
    }
  ]
})

Text('样式三：搜索框')
  .fontColor(Color.Gray)
  .fontSize(16)
  .alignSelf(ItemAlign.Start)
  .margin({ top: 25 })
  .padding({
    left: 15,
    right: 15,
    top: 10,
    bottom: 10
  })
OmniNavigationBar({
  hideBackButton: true,
  searchPlaceholder: '搜索',
  searchClick: () => {
    console.log('点击搜索框')
  },
})

Text('样式四：搜索框 + 返回 + 右侧按钮')
  .fontColor(Color.Gray)
  .fontSize(16)
  .alignSelf(ItemAlign.Start)
  .margin({ top: 25 })
  .padding({
    left: 15,
    right: 15,
    top: 10,
    bottom: 10
  })
OmniNavigationBar({
  searchPlaceholder: '搜索',
  searchClick: () => {
    console.log('搜索框')
  },
  backClick: () => {
  },
  rightMenus: [
    {
      image: 'https://pic6.58cdn.com.cn/nowater/frs/n_v3b4f2c5f26ceb4c01998907afeaedb34d.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮1' })
      }
    }
  ]
})

Blank().height(10)
OmniNavigationBar({
  searchPlaceholder: '搜索',
  searchClick: () => {
    console.log('搜索框')
  },
  backClick: () => {
  },
  rightMenus: [
    {
      image: 'https://pic4.58cdn.com.cn/nowater/frs/n_v3ba2b2c34ade04bfcba4ae805e1769cbb.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮1' })
      }
    },
    {
      image: 'https://pic6.58cdn.com.cn/nowater/frs/n_v3b4f2c5f26ceb4c01998907afeaedb34d.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮2' })
      }
    }
  ]
})

Blank().height(10)
OmniNavigationBar({
  searchPlaceholder: '搜索',
  searchClick: () => {
    console.log('搜索框')
  },
  backClick: () => {
  },
  rightMenus: [
    {
      image: 'https://pic6.58cdn.com.cn/nowater/frs/n_v35691dfb4777f4fed9455fdc35f301210.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮1' })
      }
    },
    {
      image: 'https://pic4.58cdn.com.cn/nowater/frs/n_v3ba2b2c34ade04bfcba4ae805e1769cbb.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮2' })
      }
    },
    {
      image: 'https://pic6.58cdn.com.cn/nowater/frs/n_v3b4f2c5f26ceb4c01998907afeaedb34d.webp',
      action: () => {
        Toast.showText({ msg: '点击按钮3' })
      }
    }
  ]
})

Text('样式五：标题 + 返回，有状态栏')
  .fontColor(Color.Gray)
  .fontSize(16)
  .alignSelf(ItemAlign.Start)
  .margin({ top: 25 })
  .padding({
    left: 15,
    right: 15,
    top: 10,
    bottom: 10
  })
OmniNavigationBar({
  isShowStatusBar: true,
  bgColor: '#00BFFF',
  title: '标题居中',
  titleFontColor: '#FFFFFF',
  backButtonIconLeftMargin: 16,
  backButtonIcon: $r('app.media.ic_back_white'),
  backButtonIconSize: 18,
  titleFontSize: 18,
})

Copyright © 2025 WuBa All Rights Reserved