HarmonyOS 鸿蒙Next 模拟器与预览器显示效果不一致的问题依旧存在

HarmonyOS 鸿蒙Next 模拟器与预览器显示效果不一致的问题依旧存在 用grid模块做的阵列,同一套代码,在预览器和远程模拟器中的生成效果不一致。远程模拟器中只渲染了griditem的部分。

效果如下:

屏幕截图 2023-05-10 221452.png

屏幕截图 2023-05-10 221424.png

页面相关部分代码如下:

Column() {
  Column({
    space: 10
  }){
    Row() {
      Text('← 2048')//返回主页')
        .fontSize(25)
        .onClick(() => {
          router.replaceUrl({
            url: "pages/Index"
          })
        })
    }
    .justifyContent(FlexAlign.Start)
    //  .backgroundColor(Color.Orange)
    //.alignItems()
    .width('100%')
    .margin({
      top: 10
    })
    Row(){//展示分数
      Column() {
        Text('最高记录')
          .fontSize(25)
        Text(this.maxScore.toString())
          .fontSize(25)
      }
      .backgroundColor('#ffab91')
      .padding('10vp')
      .borderRadius(15)
      Column() {
        Text('当前分数')
          .fontSize(25)
        Text(this.nowScore.toString())
          .fontSize(25)
      }
      .backgroundColor(Color.Brown)
      .borderRadius(15)
      .padding('10vp')
    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    Column() { //存放游戏主体
      Grid() {
        ForEach(this.UIArray, (X) => {
          GridItem() {
            Text(X.toString())
          }
          .width('55vp')
          .height('55vp')
          .backgroundColor(this.useDefaultColor ? DefaultColor(X) : SecondColor(X))
        },)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
    }
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        PanGesture({
          fingers: 1,
          direction: PanDirection.Right
        })
        .onActionEnd(() => {
          this.GoRight()
        }),
        PanGesture({
          fingers: 1,
          direction: PanDirection.Left
        })
        .onActionEnd(() => {
          this.GoLeft()
        }),
        PanGesture({
          fingers: 1,
          direction: PanDirection.Up
        })
        .onActionEnd(() => {
          this.GoUp()
        }),
        PanGesture({
          fingers: 1,
          direction: PanDirection.Down
        })
        .onActionEnd(() => {
          this.GoDown()
        })
      )
    )
    .width('300vp')
    .height('300vp')
    .backgroundColor($r('app.color.2048BigSquare'))
    Text(this.info)
      .fontSize(30)
    Blank()
    Button('更换配色')
      .fontSize(30)
      .onClick(() => {
        this.useDefaultColor = !this.useDefaultColor
        AppStorage.SetOrCreate('2048useDefaultColor', this.useDefaultColor)
      })
      .backgroundColor(this.useDefaultColor ? SecondColor(0) : DefaultColor(0))
      .fontColor(Color.Grey)
      .fontWeight(1)
    Button('重新开始')
      .fontSize(30)
      .onClick(() => {
        router.replaceUrl({
          url: "pages/2048"
        })
      })
      .margin({
        bottom: 10
      })
  }
  .height('100%')
  .width('90%')
}
.height('100%')
.width('100%')
.backgroundColor($r('app.color.2048Background'))

DEV版本:

DevEco Studio 3.1 Beta2

Build #DS-223.8617.56.36.310400, built on April 7, 2023

Runtime version: 17.0.5+1-b653.25 amd64

VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.

Windows 10 10.0

GC: G1 Young Generation, G1 Old Generation

Memory: 1536M

Cores: 4

Registry:

  • external.system.auto.import.disabled=true

SDK版本:

SDK.JPG

远程模拟器:

模拟器.JPG


更多关于HarmonyOS 鸿蒙Next 模拟器与预览器显示效果不一致的问题依旧存在的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

排查了一下基本可以确定问题出在grid组件,grid通过columntemplate和rowtemplate属性进行平均分以后,在预览器中会根据griditem的实际大小在每一个区块中居中放置,但是在远程模拟器中会直接无视griditem的具体大小,直接按照grid的分区把griditem放大填满分区,导致预览器中能看到的分割线在模拟器中消失。

更多关于HarmonyOS 鸿蒙Next 模拟器与预览器显示效果不一致的问题依旧存在的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


3.1.0.500版本应该修复了,您可以用用看!

应该是没问题了,

感谢您的反馈,如后期有疑问可以随时发帖,感谢您的支持。

请您提供下DevEco Studio版本以及SDK、远程模拟器镜像版本!

相关信息已更新,

基本信息

  • 姓名: 张三
  • 年龄: 30
  • 职业: 软件工程师
  • 所在地: 北京

好的,我会将问题转给相关开发,请耐心等待!

针对“HarmonyOS 鸿蒙Next 模拟器与预览器显示效果不一致的问题依旧存在”这一问题,以下提供直接相关的解决方案概述:

HarmonyOS 鸿蒙Next模拟器与预览器之间显示效果的不一致,可能源于多个因素,包括但不限于系统版本差异、分辨率设置不匹配、UI组件适配问题等。为了排查并解决这个问题,你可以尝试以下步骤:

  1. 确认版本一致性:确保模拟器和预览器运行的是相同版本的HarmonyOS系统。版本差异可能导致渲染效果不同。

  2. 分辨率与DPI设置:检查并统一模拟器和预览器的屏幕分辨率及DPI(每英寸点数)设置。不一致的分辨率和DPI设置会直接影响显示效果。

  3. UI组件适配:检查应用中的UI组件是否针对不同屏幕尺寸和分辨率进行了适配。未适配的组件在不同环境下可能呈现不同效果。

  4. 更新与补丁:检查是否有可用的模拟器或预览器更新。软件更新可能包含对显示问题的修复。

  5. 日志分析:查看模拟器和预览器的日志文件,寻找可能的错误信息或警告,这有助于定位问题原因。

如果执行上述步骤后问题依旧存在,请联系官网客服以获取进一步的技术支持。官网地址是:https://www.itying.com/category-93-b0.html

回到顶部