弹窗箭头位置错误，指示不明确
==============

#### 问题现象

弹窗提示“点击图片可放大”，但是箭头并未指向图片。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f5/v3/UxetenOvQ0CBx0RBrEPjQQ/zh-cn_image_0000002658798189.png?HW-CC-KV=V1&HW-CC-Date=20260709T134021Z&HW-CC-Expire=86400&HW-CC-Sign=4F12DAE3FFF55D04430AD640DAF80AA9382FB9D105313EF7208B77FF7598362D "点击放大")

#### 背景知识

通过[Popup控制](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-popup)，可以为组件绑定Popup气泡，并设置气泡内容，交互逻辑和显示状态。

#### 问题定位

1.  使用DevEco Testing查看问题组件，该弹窗组件为Popup气泡弹窗组件。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e5/v3/8Suw4NeQRPuVwZ-HVt_f1Q/zh-cn_image_0000002628558818.png?HW-CC-KV=V1&HW-CC-Date=20260709T134021Z&HW-CC-Expire=86400&HW-CC-Sign=AD70662F568B0E6A76BC6C978915C85BDBD8DDF221556F731EDC02B2682BB0AF "点击放大")
    
2.  查看该Popup气泡弹窗组件的设置，该组件并没有绑定在图片组件上，而是绑定在列表组件List上。
    
    @Entry
    @Component
    struct ScrollExample {
      private arr: number\[\] = \[0, 1, 2, 3, 4\];
      @State customPopup: boolean = false;
    
      build() {
        Column() {
          Text('壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。\\n')
            .width('90%')
            .fontSize(20);
    
          List({ space: 5 })
            .onAppear(() => {
              this.customPopup = true;
            })
          _  // 气泡弹窗绑定在列表组件上_
            .bindPopup(this.customPopup, {
             _ // PopupOptions类型气泡的内容_
              message: '点击图片可放大'
            });
        }
        .width('100%')
        .height('100%');
      }
    }
    

#### 分析结论

Popup气泡弹窗组件未绑定到图片组件上，而是绑定到列表组件上，导致弹窗箭头位置错误，指示不明确。

#### 修改建议

Popup气泡弹窗组件绑定到图片组件上。

@Entry
@Component
struct ScrollExamplePop {
  private arr: number\[\] = \[0, 1, 2, 3, 4\];

  build() {
    Column() {
      Text('壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。\\n')
        .width('90%')
        .margin({ top: 10 })
        .fontSize(20);

      List({ space: 5 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Row() {
              Image($r('app.media.startIcon')) _// $r('app.media.startIcon')需要替换为开发者需要的图片资源文件_
                .height('80%')
                .width('20%')
                .objectFit(ImageFit.Contain)
                .margin({ left: 10 })
                _// 绑定第一张图片_
                .bindPopup(item === 0 ? true : false, {
                 _ // PopupOptions类型气泡的内容_
                  message: '点击图片可放大',
                  messageOptions: {
                   _ // 气泡的文本样式_
                    font: {
                      size: '14vp',
                      weight: FontWeight.Bolder
                    }
                  },
                  targetSpace: '15vp',
                  arrowHeight: 10,
                  radius: 8,
                  shadow: {
                    radius: 50,
                    color: '#dedede',
                    offsetX: 0,
                    offsetY: 0
                  }, _// 设置气泡的阴影_
                  placement: Placement.Top,
                });

              Text('123456')
                .fontSize(20)
                .width('70%')
                .height('100%')
                .margin({ left: 10 })
                .textAlign(TextAlign.Start);
            }
            .width('100%')
            .height('100%');
          }
          .width('90%')
          .height(80)
          .backgroundColor('#f1f3f5')
          .borderRadius(20);
        });
      }
      .alignListItem(ListItemAlign.Center)
      .margin({ top: 20 });
    }
    .width('100%')
    .height('100%');
  }
}

效果图如下：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/6a/v3/o1nXHoeESjWW2cO4BIZJ4g/zh-cn_image_0000002658918135.png?HW-CC-KV=V1&HW-CC-Date=20260709T134021Z&HW-CC-Expire=86400&HW-CC-Sign=FE970987097A3AF69BDA5F1F23C5C1668313117BAD381C232A111E7B79624D37 "点击放大")