HarmonyOS 鸿蒙Next中实现菜单凹陷效果

HarmonyOS 鸿蒙Next中实现菜单凹陷效果 一、需求：

一级分类模块，菜单tab点击效果要求UI实现如下效果：

选中的模块左边两个圆角，右边相邻两个模块分别上一个模块右下角圆角、下一个右上角圆角，做成一个凹陷的效果，想必这样描述很多同学就已经有思路了，可是一开始需求是说做一个凹槽，这样的描述，容易引起开发进入误区，我就是这样，进了死胡同，后来是借鉴了ios的实现方案，才明白描述的重要性，网上的方案是要使用canvas进行路径绘制，太过于麻烦，而且效果不佳，在此我就直接说鸿蒙的实现了，so easy：

二、实现

1.一个列表肯定少不了

build() {

  Row() {

    List({ scroller: this.scroller }) {

      LazyForEach(this.topCategories, (item: HomeCategoryModel, index: number) => {

        ListItem() {

          this.tabBuilder(index, item)

        }
        .backgroundColor(this.currentSelectedClassify !== index ? '#FFFFFF' :
          '#F6F6F6')

      }, (item: HomeCategoryModel, index: number) => JSON.stringify(item) + index)

    }
    .height('100%')
    .width('27.8%')
    .scrollBar(BarState.Off)
    .margin({ top: 10, bottom: this.bottomSafeHeight})

1. 重点来了

/**
 * 左边侧边栏分类菜单
 * @param index
 * @param name
 */
@Builder
tabBuilder(index: number, item: HomeCategoryModel) {
  RelativeContainer() {
    Text(item.seoTitle)
      .borderRadius({
        topLeft: this.currentSelectedClassify == index && index != 0 ? 8 : 0,
        bottomLeft: this.currentSelectedClassify == index ? 8 : 0,
        topRight: this.currentSelectedClassify + 1 == index ? 8 : 0,
        bottomRight: this.currentSelectedClassify - 1 == index ? 8 : 0
      })
      .width('100%')
      .height(56)
      .fontSize(this.currentSelectedClassify == index ? 16 : 14)
      .fontWeight(this.currentSelectedClassify == index ? FontWeight.Bold : FontWeight.Regular)
      .fontColor('#232323')
      .textAlign(TextAlign.Center)
      .backgroundColor(this.currentSelectedClassify === index ? '#FFFFFF' :
        '#F6F6F6')
      .onClick(() => {
        // TODO:知识点: 3.点击一级列表后，通过一级列表索引获取二级列表索引，分别操作不同的Scroller对象使列表滚动到指定位置
        this.currentSelectedClassify = index;
        this.selectedCategoryId = item.id + ''
        // 请求二级分类接口数据
        this.getSubCategories()

        // 左侧滑动到最后一组时，不需要显示加载更多
        if (this.topCategories.totalCount() - 1 == index) {
          this.isLoadingMore = false
        } else {
          this.isLoadingMore = true
        }

      })
      .id('text')
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })

    Text()
      .width(5)
      .height(16)
      .backgroundColor('#FE2332')
      .borderRadius({ topRight: 5, bottomRight: 5 })
      .id('red')
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        left: { anchor: '__container__', align: HorizontalAlign.Start }
      })
      .visibility(this.currentSelectedClassify === index ? Visibility.Visible : Visibility.None)
  }
  .height(56)
}

重要的地方格外注意：

.borderRadius({ topLeft: this.currentSelectedClassify == index && index != 0 ? 8 : 0, bottomLeft: this.currentSelectedClassify == index ? 8 : 0, topRight: this.currentSelectedClassify + 1 == index ? 8 : 0, bottomRight: this.currentSelectedClassify - 1 == index ? 8 : 0 })

1. 一个很容易忽视的地方，视觉误差，需要提一点：

ListItem() {

  this.tabBuilder(index, item)

}
.backgroundColor(this.currentSelectedClassify !== index ? '#FFFFFF' :
  '#F6F6F6')

结论：这样的思路是不是又简单，代码又清爽呢