HarmonyOS 鸿蒙Next DevEco编辑器的预览器和模拟器显示效果不同的问题（以import { util } from '@kit.ArkTS';为例展示）| HarmonyOS 鸿蒙Next在论坛中发问答和帖子的不同演示教程（小贴士）

HarmonyOS 鸿蒙Next DevEco编辑器的预览器和模拟器显示效果不同的问题（以import { util } from ‘@kit.ArkTS’;为例展示）| HarmonyOS 鸿蒙Next在论坛中发问答和帖子的不同演示教程（小贴士） 在运行案例中发现了有关界面显示效果不达预期，现发出改进如下，提供一种思路。

预览图：

以下是代码：

import { util } from '[@kit](/user/kit).ArkTS';

class Contact {
  key: string = util.generateRandomUUID(true);
  name: string;
  icon: Resource;

  constructor(name: string, icon: Resource) {
    this.name = name;
    this.icon = icon;
  }
}

class ContactsGroup {
  title: string = '';
  contacts: Array<Contact> | null = null;
  key: string = '';
}

export let contactsGroups: ContactsGroup[] = [
  {
    title: 'A',
    contacts: [
      new Contact('艾佳', $r('app.media.ic_public_contacts')),
      new Contact('安安', $r('app.media.ic_public_contacts')),
      new Contact('Angela', $r('app.media.ic_public_contacts')),
    ],
    key: util.generateRandomUUID(true),
  },
  {
    title: 'B',
    contacts: [
      new Contact('白叶', $r('app.media.ic_public_contacts')),
      new Contact('伯明', $r('app.media.ic_public_contacts')),
    ],
    key: util.generateRandomUUID(true),
  },
// ...
];

@Entry
@Component
struct ContactsList {
  @Builder itemHead(text: string) {
    // 分组标题组件
    Text(text)
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .backgroundColor('#f1f3f5')
      .width('100%')
      .padding(8)
      .margin({ top: 4, bottom: 4 });
  }

  build() {
    List() {
      // 渲染分组列表
      ForEach(contactsGroups, (itemGroup: ContactsGroup) => {
        ListItemGroup({
          header: this.itemHead(itemGroup.title),
        }) {
          if (itemGroup.contacts) {
            ForEach(itemGroup.contacts, (item: Contact) => {
              ListItem() {
                Row() {
                  Image(item.icon)
                    .width(40)
                    .height(40)
                    .margin(8);
                  Text(item.name)
                    .fontSize(16)
                    .margin({ left: 12 });
                }.alignItems(VerticalAlign.Center)
              }.padding(10);
            }, (item: Contact) => item.key);
          }
        };
      }, (itemGroup: ContactsGroup) => itemGroup.key);
    }
    .sticky(StickyStyle.Header) // 确保分组标题吸顶效果
    .width('100%')
    .backgroundColor('#ffffff'); // 为列表整体设置背景色
  }
}

简单区分：发帖子在发布的附近位置是没有悬赏可选的，有悬赏的就是问答，没悬赏的就是帖子。

所谓悬赏长得是这个样子，大家注意分辨：