previewer显示的UX效果和真机的显示实际不一致
===========================

#### 问题现象

有如下代码，Flex布局，用previewer查看时，两侧占满屏幕；但是真机查看，两侧会有留白。

@Entry
@Component
struct Index {
  build() {
    Column() {
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { _// 子组件在容器主轴上行布局_
        Text('约伴召集')
          .width(180)
          .height(38)
          .backgroundColor('#ff1a9191')

        Text('我的活动')
          .width(180)
          .height(38)
          .backgroundColor('#ff6868d0')
      }
      .width(360)
      .height(58)
    }
    .height('100%')
    .width('100%')
  }
}

previewer效果：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a6/v3/okIkJapyQ6Wt9SNJCGTMTg/zh-cn_image_0000002658807357.png?HW-CC-KV=V1&HW-CC-Date=20260709T134347Z&HW-CC-Expire=86400&HW-CC-Sign=66736D328757B8F91D73A84BC6A8DB92E5322D1D5DC4068922ED09F2113EDD53 "点击放大")

真机效果：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/68/v3/d5edHIUERhy2VV96nt6-CA/zh-cn_image_0000002628408096.png?HW-CC-KV=V1&HW-CC-Date=20260709T134347Z&HW-CC-Expire=86400&HW-CC-Sign=94082B89A0A703AE05EC2384151348F86BC48E7D8B6296B0F080CAEBE7769170 "点击放大")

可以发现真机的Text组件两侧留有空白。

#### 背景知识

*   previewer可以看到previewer设备的屏幕尺寸：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a/v3/cNl-DI-1QNyz55-QDy317w/zh-cn_image_0000002628567996.png?HW-CC-KV=V1&HW-CC-Date=20260709T134347Z&HW-CC-Expire=86400&HW-CC-Sign=13ED7EDAB1FBD83821772E7469D484ABEFD92B5C3086DCBEEF329CAF1FD51F98 "点击放大")
    
    1080px换算成vp是360vp。
    
*   屏幕管理API @ohos.display可以参考[如何获取手机屏幕信息](https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-242)。

#### 问题定位

引入display工具，添加如下代码，获取真机屏幕尺寸。

try {
  this.screenWidth \= display.getDefaultDisplaySync().width;
  this.screenHeight \= display.getDefaultDisplaySync().height;
} catch (e) {
  console.error('Fail with code: ' \+ JSON.stringify(e));
}
console.info(\`width = ${this.getUIContext().px2vp(this.screenWidth)} , height = ${this.getUIContext()
  .px2vp(this.screenHeight)}\`);

查看日志，可以看到获取到真机屏幕的尺寸是374vp，大于360vp，所以真机两侧存在空白。

#### 分析结论

代码中固定了组件的宽度尺寸是360vp，previewer设备的宽度尺寸设置的也是360vp，所以组件横向充满了previewer；但是真机的宽度尺寸是374vp，所以会留下空白。

#### 修改建议

将Flex宽度设置为'100%'，子元素Text的宽度分别设置为'50%'，即可自适应设备宽度。

import { display } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  private screenWidth: number \= 0;
  private screenHeight: number \= 0;

  build() {
    Column() {
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) { _// 子组件在容器主轴上行布局_
        Text('约伴召集')
          .width('50%')
          .height(38)
          .backgroundColor('#ff1a9191');

        Text('我的活动')
          .width('50%')
          .height(38)
          .backgroundColor('#ff6868d0');
      }
      .width('100%')
      .height(58);
    }
    .height('100%')
    .width('100%')
    .onClick(() \=\> {
      try {
        this.screenWidth \= display.getDefaultDisplaySync().width;
        this.screenHeight \= display.getDefaultDisplaySync().height;
      } catch (e) {
        console.error('Fail with code: ' \+ JSON.stringify(e));
      }
      console.info(\`width = ${this.getUIContext().px2vp(this.screenWidth)} , height = ${this.getUIContext()
        .px2vp(this.screenHeight)}\`);
    });
  }
}