HarmonyOS 鸿蒙Next bindpopup绑定在被foreach循环多次的组件上bindpopup会出现多次气泡颜色popupColor是黑色比较明显怎么解决

HarmonyOS 鸿蒙Next bindpopup绑定在被foreach循环多次的组件上bindpopup会出现多次气泡颜色popupColor是黑色比较明显怎么解决

@Entry @Component struct BindPopup { @State message: string = ‘Hello World’; @State longPress:string=’’; @State lists:string[]=[“0”, “1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”, “10”, “11”, “12”, “13”, “14”, “15”,‘16’,‘17’,‘18’,‘19’,‘20’,‘21’,‘22’,‘23’,‘24’,‘25’,‘26’]

@Builder longBindPopup(){ Column(){ Text(‘编辑’) .fontColor(Color.White) } }

build() { Column() { Grid(){ ForEach(this.lists,(item:string)=>{ GridItem(){ Text(this.message) .fontSize(15) .width(100) .height(30) .margin({top:20}) .fontWeight(FontWeight.Bold)

      }
      .parallelGesture(GestureGroup(GestureMode.Exclusive,
        LongPressGesture({ repeat: true })
          .onAction(() => {
            this.longPress=item
          }),
      ))
      .bindPopup(this.longPress===item,{
        builder:this.longBindPopup(),
        width:50,
        popupColor:('rgba(0,0,0,0.80)')
      })
    })
  }
 
}
.height('100%')
.width('100%')

} }


更多关于HarmonyOS 鸿蒙Next bindpopup绑定在被foreach循环多次的组件上bindpopup会出现多次气泡颜色popupColor是黑色比较明显怎么解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

给

@Entry
@Component
struct BindPopup {
  @State message: string = 'Hello World';
  @State longPress: string = '';
  @State lists: string[] =
    ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", '16', '17', '18', '19', '20',
      '21', '22', '23', '24', '25', '26',]

  @Builder
  longBindPopup() {
    Column() {
      Text('编辑')
        .fontColor(Color.White)
    }
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.lists, (item: string) => {
          GridItem() {
            Text(this.message)
              .fontSize(15)
              .width(100)
              .height(30)
              .margin({ top: 20 })
              .fontWeight(FontWeight.Bold)

          }
          .parallelGesture(GestureGroup(GestureMode.Exclusive,
            LongPressGesture({ repeat: true })
              .onAction(() => {
                this.longPress = item
              }),
          ))
          .bindPopup(this.longPress === item, {
            builder: this.longBindPopup(),
            width: 50,
            enableArrow: true,
            autoCancel: true,
            backgroundBlurStyle: BlurStyle.NONE,
            popupColor: Color.Black,
          })
        })
      }

    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next bindpopup绑定在被foreach循环多次的组件上bindpopup会出现多次气泡颜色popupColor是黑色比较明显怎么解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


popupColor设置为纯透明#00000000，在传入组件哪设置具体颜色

@Entry
@Component
struct BindPopup {
  @State message: string = 'Hello World';
  @State longPress:string='';
  @State lists:string[]=["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15",'16','17','18','19','20','21','22','23','24','25','26',]

  @Builder longBindPopup(){
    Column(){
      Text('编辑')
        .fontColor(Color.Black)
    }
  }

  build() {
    Column () {
      Grid(){
        ForEach(this.lists,(item:string)=>{
          GridItem(){
            Text(this.message)
              .fontSize(15)
              .width(100)
              .height(30)
              .margin({top:20})
              .fontWeight(FontWeight.Bold)
          }
          .parallelGesture(GestureGroup(GestureMode.Exclusive,
            LongPressGesture({ repeat: true })
              .onAction(() =>{
                this.longPress=item
              }),
          ))
          .bindPopup(this.longPress===item,{
            builder:this.longBindPopup(),
            width:50,
            popupColor:('#00000000'),
          })
        })
      }

    }
    .height('100%')
    .width('100%')
  }
}

需求就是黑底白字，使用这种在里面传会导致那个箭头还是白色的，然后黑底白字，很丑，

在HarmonyOS鸿蒙Next中，当bindPopup绑定在foreach循环多次的组件上时，可能会出现多次气泡且popupColor为黑色的问题。这是因为foreach循环会为每个组件实例独立生成popup，导致多个popup叠加显示。可以通过以下方式解决：

  1. 使用唯一标识符：为每个popup设置唯一的id，确保每个popup独立显示，避免叠加。例如，在foreach循环中为每个组件动态生成唯一的id。

  2. 控制popup的显示状态：在foreach循环中，通过条件判断控制popup的显示状态，确保只有当前操作的组件显示popup，其他组件隐藏popup。

  3. 使用if条件渲染：在foreach循环中，结合if条件渲染，确保只有在特定条件下才生成popup，避免多余的popup生成。

  4. 调整popupColor：如果popupColor为黑色较明显，可以通过设置popupColor为其他颜色或调整透明度来减轻视觉影响。

通过这些方法，可以有效解决bindPopup在foreach循环中多次生成气泡的问题。

回到顶部