HarmonyOS 鸿蒙Next【初学者求助】开发工具预览器显示界面与真机部署不一致如何处理

HarmonyOS 鸿蒙Next【初学者求助】开发工具预览器显示界面与真机部署不一致如何处理 初学者根据官方提供的案例代码尝试写一个包含导航的搜索页面

在开发工具中的预览器进行UI预览时显示较为正常：

但是将应用部署到Mate 50 Pro （软件版本 4.0.0.112）时，出现了UI界面显示异常，

初学者有点懵。。。请求大佬指导。。。

完整代码如下：

// Second.ets
// 导入页面路由模块
import router from '@ohos.router';

@Entry
@Component
struct Index {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  @State currentIndex: number = 0
  @State Build: Array<Object> = [
    {
      text: '首页',
      num: 0
    },
    {
      text: '简介',
      num: 1
    },
    {
      text: '经费',
      num: 2
    },
    {
      text: '关于',
      num: 3
    }
  ]
  @Builder NavigationTitle() {
    Column() {
      Text('主页')
        .fontColor('#182431')
        .fontSize(30)
        .lineHeight(41)
        .fontWeight(700)
      Text('关于项目的描述')
        .fontColor('#182431')
        .fontSize(14)
        .lineHeight(19)
        .opacity(0.4)
        .margin({ top: 2, bottom: 20 })
    }.alignItems(HorizontalAlign.Start)
  }
  @Builder NavigationMenus() {
    Row() {
      Image('common/navigation_icon1.svg')
        .width(24)
        .height(24)
      Image('common/navigation_icon1.svg')
        .width(24)
        .height(24)
        .margin({ left: 24 })
      Image('common/navigation_icon2.svg')
        .width(24)
        .height(24)
        .margin({ left: 24 })
    }
  }
  @Builder NavigationToolbar() {
    Row() {
      ForEach(this.Build, item => {
        Column() {
          Image(this.currentIndex == item.num ? 'common/public_icon_selected.svg' : 'common/public_icon.svg')
            .width(24)
            .height(24)
          Text(item.text)
            .fontColor(this.currentIndex == item.num ? '#007DFF' : '#182431')
            .fontSize(10)
            .lineHeight(14)
            .fontWeight(500)
            .margin({ top: 3 })
        }.width(104).height(56)
        .onClick(() => {
          this.currentIndex = item.num
        })
      })
    }.margin({ left: 24 })
  }
  build() {
    Column() {
      Navigation(){
        Text('主页')
        TextInput({
          placeholder: '搜索详情...'
        })
          .width('90%')
          .height(40)
          .backgroundColor('#FFFFFF')
          .margin({top: 8})
        List({space: 12, initialIndex: 0}){
          ForEach(this.arr, (item) => {
            ListItem(){
              Text('' + item)
                .margin({ top: 8 })
                .width('90%')
                .height(40)
                .backgroundColor('#FFFFFF')
                .fontSize(16)
                .fontWeight(500)
                .textAlign(TextAlign.Center)
            }.editable(true)
          },item => item)
        }
          .height(324)
          .width('80%')
          .margin({top: 12, left: '10%'})
      }
        .title(this.NavigationTitle)
        .menus(this.NavigationMenus)
        .titleMode(NavigationTitleMode.Full)
        .toolBar(this.NavigationToolbar)
        .hideTitleBar(false)
        .hideToolBar(false)
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}