HarmonyOS 鸿蒙Next toolBar数组设置4个为什么只显示三个呢

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

HarmonyOS 鸿蒙Next toolBar数组设置4个为什么只显示三个呢

实现代码：

```typescript
[@Entry](/user/Entry)
[@Component](/user/Component)
struct MainPage {
[@State](/user/State) currentIndex: number = 0
[@State](/user/State) Build: Array<Object> = [
{
text: '首页',
num: 0,
imageYes:$r('app.media.home_yes'),
imageNo:$r('app.media.home_no')
},
{
text: '视频',
num: 1,
imageYes:$r('app.media.home_yes'),
imageNo:$r('app.media.video_home_icn')
},
{
text: '商城',
num: 2,
imageYes:$r('app.media.shop_yes'),
imageNo:$r('app.media.shop_no')
},
{
text: '我的',
num: 3,
imageYes:$r('app.media.user_yes'),
imageNo:$r('app.media.user_no')
},

]

[@Builder](/user/Builder) NavigationTitle() {
Column() {
Text('Title')
.fontColor('#182431')
.fontSize(30)
.lineHeight(41)
.fontWeight(700)
Text('subtitle')
.fontColor('#182431')
.fontSize(14)
.lineHeight(19)
.opacity(0.4)
.margin({ top: 2, bottom: 20 })
}.alignItems(HorizontalAlign.Start)
}

[@Builder](/user/Builder) NavigationMenus() {
Row() {
Image($r('app.media.home_no'))
.width(24)
.height(24)
Image($r('app.media.video_home_icn'))
.width(24)
.height(24)
.margin({ left: 24 })
Image($r('app.media.shop_no'))
.width(24)
.height(24)
.margin({ left: 24 })
Image($r('app.media.user_no'))
.width(24)
.height(24)
.margin({ left: 24 })
}
}

[@Builder](/user/Builder) NavigationToolbar() {

Row() {
ForEach(this.Build, item => {

Column() {
Image(this.currentIndex == item.num ? item.imageYes : item.imageNo)
.width(24)
.height(24)
Text(item.text)
.fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431')
.fontSize(10)
.lineHeight(14)
.fontWeight(500)
.margin({ top: 3 })
}.width(104).height(56)
.onClick(() => {
this.currentIndex = item.num
})
})
}.margin({ left: 24 })
}

build() {
Column() {
Navigation() {

}
.titleMode(NavigationTitleMode.Full)
.toolBar(this.NavigationToolbar)
.hideToolBar(false)
.onTitleModeChange((titleModel: NavigationTitleMode) => {
console.info('titleMode' + titleModel)
})
}.width('100%').height('100%').backgroundColor('#F1F3F5')
}
}

更多关于HarmonyOS 鸿蒙Next toolBar数组设置4个为什么只显示三个呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

因为您设置了固定宽度导致最后一个item被挤出屏幕外，可参考以下代码：

@Builder NavigationToolbar() {

    Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceAround}) {
      ForEach(this.Build, (item: TabItem) => {
          Row(){
            Image(this.currentIndex == item.num ? item.imageYes : item.imageNo)
              .width(24)
              .height(24)
            Text(item.text)
              .fontColor(Color.Red)
              .fontSize(10)
              .lineHeight(14)
              .fontWeight(500)
              .margin({ top: 3 })
          }.height(56)
          .onClick(() => {
            this.currentIndex = item.num
          })
      })
     
    }
}

更多关于HarmonyOS 鸿蒙Next toolBar数组设置4个为什么只显示三个呢的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


width\(104\) 太宽了，加上间隔，把第四个挤出去了

针对HarmonyOS（鸿蒙）系统中Next toolBar数组设置4个元素但只显示3个的问题，可能的原因及解决方案如下：

  1. 布局空间限制：首先检查toolBar的布局设置，确认是否有足够的空间显示所有4个元素。如果布局宽度或高度不足，可能导致部分元素被隐藏。

  2. 元素宽度或间距设置：检查toolBar中每个元素的宽度以及它们之间的间距设置。如果元素宽度过大或间距设置不合理，也可能导致部分元素无法完全显示。

  3. 滚动或分页设置：如果toolBar支持滚动或分页显示，检查相关设置是否启用，以及是否由于滚动位置或分页逻辑导致部分元素未显示。

  4. 样式或主题影响：某些样式或主题设置可能影响toolBar的显示方式，检查是否有相关样式或主题导致元素显示异常。

  5. 版本兼容性问题：确认当前使用的鸿蒙系统版本是否支持你正在使用的toolBar特性，以及是否存在已知的显示问题。

如果以上检查均未能解决问题，可能是系统内部的bug或特定环境下的兼容性问题。此时，建议直接联系鸿蒙系统的官方客服以获取进一步帮助。如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html 。

回到顶部