HarmonyOS 鸿蒙Next页面上下出现空白
HarmonyOS 鸿蒙Next页面上下出现空白
今天更新之后,页面的上下出现空白部分,但是宽高都已经设置成100了
代码如下
@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元素被限制在安全区内(自动排除状态栏和导航条)进行布局,来避免界面元素被状态栏和导航条遮盖。可通过在装载启动页面时强制设置全屏解决。