HarmonyOS 鸿蒙Next中SideBarContainer控制按钮右上角如何显示小红点

HarmonyOS 鸿蒙Next中SideBarContainer控制按钮右上角如何显示小红点 SideBarContainer控制按钮右上角如何显示小红点

3 回复

角标可以通过 Badge 容器实现：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-badge-V5

如：

@Entry
@Component
struct SideBarContainerDemo {
  normalIcon: Resource = $r("app.media.startIcon")
  selectedIcon: Resource = $r("app.media.startIcon")
  @State arr: number[] = [1, 2, 3]
  @State current: number = 1

  build() {
    Badge({
      value: '',
      position: {
        x: 40, y: 50
      },
      style: { badgeSize: 6, badgeColor: '#FA2A2D' }
    }) {
      SideBarContainer(SideBarContainerType.Embed) {
        Column() {
          ForEach(this.arr, (item: number) => {
            Column({ space: 5 }) {
              Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
              Text("Index0" + item)
                .fontSize(25)
                .fontColor(this.current === item ? '#0A59F7' : '#999')
                .fontFamily('source-sans-pro,cursive,sans-serif')
            }
            .onClick(() => {
              this.current = item
            })
          }, (item: string) => item)
        }.width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)
        .backgroundColor('#19000000')

        Column() {
          Text('SideBarContainer content text1').fontSize(25)
          Text('SideBarContainer content text2').fontSize(25)
        }
        .margin({ top: 50, left: 20, right: 30 })
      }
      .controlButton({
        icons: {
          hidden: $r('app.media.startIcon'),
          shown: $r('app.media.startIcon'),
          switching: $r('app.media.startIcon')
        }
      })
      .sideBarWidth(150)
      .minSideBarWidth(50)
      .maxSideBarWidth(300)
      .minContentWidth(0)
      .onChange((value: boolean) => {
        console.info('status:' + value)
      })
      .divider({
        strokeWidth: '1vp',
        color: Color.Gray,
        startMargin: '4vp',
        endMargin: '4vp'
      })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next中SideBarContainer控制按钮右上角如何显示小红点的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙Next）中，若要在SideBarContainer控制按钮的右上角显示小红点，可以通过设置SideBarContainer组件的badge属性来实现。badge属性用于在组件右上角显示标记，通常用于提示未读消息或新内容。

具体步骤如下：

  1. 定义SideBarContainer组件：在布局文件中定义SideBarContainer，并为其添加badge属性。

  2. 设置badge属性：通过badge属性控制小红点的显示与隐藏。badge属性可以设置为true或false，表示是否显示小红点。

  3. 动态更新badge：根据业务逻辑，在代码中动态更新badge属性的值，以控制小红点的显示与隐藏。

示例代码如下：

<SideBarContainer
    ohos:id="$+id/sidebar_container"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:badge="true">
    <!-- 其他子组件 -->
</SideBarContainer>

在代码中动态更新badge：

SideBarContainer sidebarContainer = (SideBarContainer) findComponentById(ResourceTable.Id_sidebar_container);
sidebarContainer.setBadge(true); // 显示小红点
sidebarContainer.setBadge(false); // 隐藏小红点

通过上述步骤，即可在SideBarContainer控制按钮的右上角显示小红点。

在HarmonyOS鸿蒙Next中，可以通过Badge组件在SideBarContainer控制按钮右上角显示小红点。首先，在布局文件中为控制按钮添加Badge组件，然后在代码中通过setBadgeCount方法设置红点显示。例如：

<Badge
    ohos:id="$+id:badge"
    ohos:width="20vp"
    ohos:height="20vp"
    ohos:background_element="#FF0000"
    ohos:visibility="visible"/>

在代码中控制显示：

Badge badge = (Badge) findComponentById(ResourceTable.Id_badge);
badge.setBadgeCount(1); // 显示红点

通过这种方式，可以在SideBarContainer的控制按钮右上角显示小红点。

回到顶部