HarmonyOS鸿蒙Next中Grid卡片列表页面通过NodeContainer渲染，长按拖拽时onPreDrag自定义缩率图导致布局错乱和文本消失问题

HarmonyOS鸿蒙Next中Grid卡片列表页面通过NodeContainer渲染，长按拖拽时onPreDrag自定义缩率图导致布局错乱和文本消失问题

import {  NodeController, BuilderNode, Size, FrameNode ,UIContext } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';

@Builder
function buttonBuilder(params: GridItemData) {
  Column() {
    // ID显示
    Text(`ID: ${params.id}`)
      .fontSize(16)
      .fontColor(Color.White)
      .fontWeight(FontWeight.Medium)

    // 文本内容
    Text(params.text)
      .fontSize(14)
      .fontColor(Color.White)
      .margin({ top: 5 })
      .maxLines(1)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
  }.justifyContent(FlexAlign.Center)
}

class MyNodeController extends NodeController {
  private buttonNode: BuilderNode<[GridItemData]> | null = null;
  private wrapBuilder: WrappedBuilder<[GridItemData]> = wrapBuilder(buttonBuilder);
  private dataItem: GridItemData | null = null

  constructor(data: GridItemData) {
    super()
    this.dataItem = data
  }

  makeNode(uiContext: UIContext): FrameNode {
    if (this.buttonNode == null) {
      this.buttonNode = new BuilderNode(uiContext);
      this.buttonNode.build(this.wrapBuilder, this.dataItem)
    }
    return this.buttonNode!.getFrameNode()!;
  }
}


@ObservedV2
class GridItemData {
  id: number;
  @Trace text: string;
  constructor(id: number, text: string) {
    this.id = id
    this.text = text
  }
}

// 入口组件
@ComponentV2
export struct GridPage {
  // 使用@Local装饰器定义响应式数据
  @Local itemList: GridItemData[] = [
    new GridItemData(1, '项目一'),
    new GridItemData(2, '项目二'),
    new GridItemData(3, '项目三'),
    new GridItemData(4, '项目四'),
    new GridItemData(5, '项目五'),
    new GridItemData(6, '项目六'),
    new GridItemData(7, '项目七'),
    new GridItemData(8, '项目八')
  ];


  build() {
    Grid() {
      // 使用Repeat进行循环渲染
      Repeat<GridItemData>(this.itemList)
        .each((item: RepeatItem<GridItemData>) => {
          GridItem() {
            GridItemContent({
              gridItemData: item.item
            })
          }
          .borderRadius(12)
        })
        .key((item: GridItemData) => item.id.toString())
    }
    .columnsTemplate('1fr 1fr') // 2列等分布局
    .rowsGap(12)
    .columnsGap(12)
    .padding(10)
  }
}

@ComponentV2
struct GridItemContent {
  @Param @Require gridItemData: GridItemData
  @Local pixelMap: image.PixelMap | undefined = undefined;

  private myNodeController: MyNodeController = new MyNodeController(this.gridItemData);

  // 截图缩率图
  @Builder
  pixelMapBuilder() {
    Column() {
      RelativeContainer() {
        NodeContainer(this.myNodeController)
        Text('自定义缩率图').alignRules({
          end: { anchor: '__container__', align: HorizontalAlign.End },
          top: { anchor: '__container__', align: VerticalAlign.Top }
        })
      }
    }
    .height(100)
    .width(180)
    .backgroundColor(Color.Red)
  }

  private getComponentSnapshot(): void {
    this.getUIContext().getComponentSnapshot().createFromBuilder(() => {
      this.pixelMapBuilder()
    }, (error: Error, pixmap: image.PixelMap) => {
      if (error) {
        return;
      }
      this.pixelMap = pixmap;
    })
  }

  // 准备阶段截图
  private PreDragChange(preDragStatus: PreDragStatus): void {
    if (preDragStatus == PreDragStatus.ACTION_DETECTING_STATUS) {
      this.getComponentSnapshot();
    }
  }

  build() {
    Stack() {
      // 自定义节点渲染
      RelativeContainer() {
        if (this.myNodeController) {
          NodeContainer(this.myNodeController)
        }
      }
    }
    .width('100%')
    .height(100)
    .backgroundColor(0x007DFF)
    .onPreDrag((status: PreDragStatus)=>{
      this.PreDragChange(status);
    })
    // 拖拽开始,返回自定义缩率图
    .onDragStart((event?: DragEvent, extraParams?: string) => {
      let dragItemInfo: DragItemInfo = {
        pixelMap: this.pixelMap,
        builder: () => {
          this.pixelMapBuilder()
        },
      };
      return dragItemInfo;
    })
  }
}