HarmonyOS 鸿蒙Next页面上下出现空白

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next页面上下出现空白

今天更新之后,页面的上下出现空白部分,但是宽高都已经设置成100了

cke_1635.png

代码如下

@Entry
@Component
struct LoginPage {
@State cardCode: string = ‘’;

build() { Row() { // 登录页背景 Image(‘image/login/form.png’) .width(‘73%’) .height(‘100%’)

  <span class="hljs-comment"><span class="hljs-comment">// 登录</span></span>
  Column({ space: <span class="hljs-number"><span class="hljs-number">15</span></span> }) {
    Row() {
      <span class="hljs-comment"><span class="hljs-comment">// logo</span></span>
      <span class="hljs-comment"><span class="hljs-comment">// Image()</span></span>
      Text(<span class="hljs-string"><span class="hljs-string">'您好'</span></span>)
        .fontSize(<span class="hljs-number"><span class="hljs-number">60</span></span>)
        .fontWeight(FontWeight.Bold)
        .fontColor(<span class="hljs-string"><span class="hljs-string">'#b0d9fd'</span></span>)
    }

    Text(<span class="hljs-string"><span class="hljs-string">'欢迎使用XXXX系统'</span></span>)
      .fontWeight(FontWeight.Medium)
      .fontSize(<span class="hljs-number"><span class="hljs-number">16</span></span>)
      .fontColor(Color.Gray)

    Column() {
      Text(<span class="hljs-string"><span class="hljs-string">'请输入您的卡号'</span></span>)
        .fontSize(<span class="hljs-number"><span class="hljs-number">12</span></span>)
        .fontWeight(FontWeight.Lighter)
      TextInput({ text: $$<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.cardCode })
        .maxLength(<span class="hljs-number"><span class="hljs-number">15</span></span>)
        .borderRadius(<span class="hljs-number"><span class="hljs-number">0</span></span>)
        .type(InputType.Number)
        .width(<span class="hljs-string"><span class="hljs-string">'80%'</span></span>)
    }
    .alignItems(HorizontalAlign.Start)

    Row({ space: <span class="hljs-number"><span class="hljs-number">20</span></span> }) {
      Image(<span class="hljs-string"><span class="hljs-string">'image/login/ic_public_settings.svg'</span></span>)
        .width(<span class="hljs-number"><span class="hljs-number">50</span></span>)
        .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)
        .backgroundColor(<span class="hljs-string"><span class="hljs-string">'#b0d9fd'</span></span>)
        .borderRadius(<span class="hljs-number"><span class="hljs-number">5</span></span>)
        .fillColor(Color.White)
      Image(<span class="hljs-string"><span class="hljs-string">'image/login/ic_screenshot_arrowhead.svg'</span></span>)
        .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)
        .height(<span class="hljs-number"><span class="hljs-number">50</span></span>)
        .backgroundColor(<span class="hljs-string"><span class="hljs-string">'#b0d9fd'</span></span>)
        .borderRadius(<span class="hljs-number"><span class="hljs-number">5</span></span>)
        .fillColor(Color.White)
    }
    .justifyContent(FlexAlign.Center)
    .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
    .height(<span class="hljs-number"><span class="hljs-number">100</span></span>)

  }
  .layoutWeight(<span class="hljs-number"><span class="hljs-number">1</span></span>)
  .height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
}
.height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)

} }<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>



关于HarmonyOS 鸿蒙Next页面上下出现空白的问题,您也可以访问:https://www.itying.com/category-93-b0.html 联系官网客服。

14 回复
用的是最新的DevEco Studio NEXT Developer Beta2  5.0.3.500

大哥,解决了吗?我这边也出现了空白

设置全屏启动

图片别设置宽度试试?或者说改一下图片缩放模式

新建一个新的页面设置背景色也是有空白

这就不知道了,模拟器有问题吗

好像换了新的beta2版本的问题,看到别人也有这个问题

盲猜,可能是楼上说的你图片有空白,不然的话就是图片宽度限制了高度,使用.objectFit调整图片填充方式,枚举类型

新建一个新的页面设置背景色也是有空白

试了代码显示没有留空的,是不是你的图片上下有空白的?

图片没有空白

你用最新的版本 重新创建项目就会出现上下空白

应用在默认情况下窗口背景绘制范围是全屏,但UI元素被限制在安全区内(自动排除状态栏和导航条)进行布局,来避免界面元素被状态栏和导航条遮盖。可通过在装载启动页面时强制设置全屏解决。

回到顶部