HarmonyNext使用ListItemGroup添加头部 布局，头部布局底部留很大空白

devtools/2024/12/22 2:18:09/

今天使用ListItemGroup添加头部布局的时候，发现底部留下很多空白

头部布局使用的是相对布局RelativeContainer

错误代码如下：

import { CommonConstants } from "@ohos/utils/src/main/ets/common/CommonConstants";
import { DisPlayInfo } from "@ohos/utils/src/main/ets/utils/DisPlayInfo";
import { DisplayUtil } from "@pura/harmony-utils";@ComponentV2
export struct HomePages {displayInfo: DisPlayInfo = new DisPlayInfo()build() {Column() {List() {ListItemGroup({ header: this.homeHead() }) {ForEach(['0', '1', '2', '3', '4'], (item: string, index: number) => {ListItem() {Row() {RelativeContainer() {Image($r('app.media.icon_home_test')).size({ width: 50, height: CommonConstants.FULL_PERCENT }).borderRadius(8).id('iv_list_cover')}.layoutWeight(1).height(CommonConstants.FULL_PERCENT)Text('免费').size({ width: this.displayInfo.getWidth(48), height: this.displayInfo.getWidth(22) }).backgroundColor($r('app.color.black_22252a')).fontColor($r('app.color.color_white')).fontSize(12).textAlign(TextAlign.Center).borderRadius(19)}.padding({ left: 16, right: 16 }).width(CommonConstants.FULL_PERCENT).height(this.displayInfo.getWidth(50)).alignItems(VerticalAlign.Center)}})}}.listDirection(Axis.Vertical).layoutWeight(1).scrollBar(BarState.Off).width(CommonConstants.FULL_PERCENT)}.width(CommonConstants.FULL_PERCENT).height(CommonConstants.FULL_PERCENT).linearGradient({angle: 180,direction: GradientDirection.Bottom, // 渐变方向repeating: false, // 渐变颜色是否重复colors: CommonConstants.colors}).padding({ top: CommonConstants.DEFAULT_STATUS_HEIGHT })}@BuilderhomeHead() {Column() {RelativeContainer() {Image($r('app.media.icon_home_make')).size({ width: 48, height: 45 }).id('iv_home_1').alignRules({'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }})Image($r('app.media.icon_home_vip')).size({ width: 30, height: 30 }).id('iv_home_2').alignRules({'top': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Top },'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },'bottom': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Bottom }})Row() {Image($r('app.media.icon_home_create_music')).width('50%').onClick(() => {})Column() {Image($r('app.media.icon_import_file')).width(CommonConstants.FULL_PERCENT).onClick(() => {})Image($r('app.media.icon_home_import_sc')).width(CommonConstants.FULL_PERCENT).onClick(() => {}).margin({ top: 6 })}.width('50%').margin({ left: 6 })}.width(CommonConstants.FULL_PERCENT).margin({ top: 24 }).justifyContent(FlexAlign.SpaceAround).alignItems(VerticalAlign.Top).alignRules({'top': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Bottom },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }}).id('rw_make')Row() {Image($r('app.media.icon_home_recommand')).size({ width: 20, height: 20 })Text($r('app.string.home_recommand')).margin({ left: 4 }).fontColor($r('app.color.black_00')).fontSize(16).fontWeight(FontWeight.Bold)}.alignRules({'top': { 'anchor': 'rw_make', 'align': VerticalAlign.Bottom },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }}).margin({ top: 24 }).alignItems(VerticalAlign.Center).id('rw_recommand')//查看更多Row() {Text($r('app.string.to_see_more')).margin({ left: 4 }).fontColor($r('app.color.gray_63')).fontSize(10)Image($r('app.media.icon_home_more')).size({ width: 12, height: 12 })}.alignRules({'top': { 'anchor': 'rw_recommand', 'align': VerticalAlign.Top },'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },bottom: { anchor: 'rw_recommand', align: VerticalAlign.Center }}).alignItems(VerticalAlign.Center)//横向滚动列表List({ space: 3 }) {ForEach(['0', '1', '2', '3'], (item: string, index: number) => {ListItem() {Column() {Stack() {Image($r('app.media.icon_recommand_bg')).size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })RelativeContainer() {Image($r('app.media.icon_home_test')).size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT }).id("iv_cover").borderRadius(16)Text('推荐').fontColor($r('app.color.white')).fontSize(15.5).fontWeight(FontWeight.Medium).backgroundColor($r('app.color.red_f37')).padding({top: 6,bottom: 6,left: 13,right: 13}).borderRadius({ topLeft: 16, bottomRight: 16 }).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }})//播放按钮Image($r('app.media.icon_home_music_pause')).size({ width: 40, height: 40 }).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.size({ width: this.displayInfo.getWidth(190), height: this.displayInfo.getWidth(190) }).backgroundColor($r('app.color.white')).borderRadius(16).padding(2)}.width(CommonConstants.FULL_PERCENT).height(this.displayInfo.getWidth(218))Text('1111').width(CommonConstants.FULL_PERCENT).textAlign(TextAlign.Center).fontSize(14).fontColor($r('app.color.black_00')).fontWeight(FontWeight.Bold).margin({ top: 10 })Text('1111').width(CommonConstants.FULL_PERCENT).textAlign(TextAlign.Center).fontSize(12).fontColor($r('app.color.gray_8c')).fontWeight(FontWeight.Bold).margin({ top: 3 })}.alignItems(HorizontalAlign.Center).width(this.displayInfo.getWidth(218))}})}.listDirection(Axis.Horizontal).scrollBar(BarState.Off).width(CommonConstants.FULL_PERCENT).margin({ top: 12 }).id('list_recommend').alignRules({ top: { anchor: 'rw_recommand', align: VerticalAlign.Bottom } })//独立素材更多Row() {Image($r('app.media.icon_home_dlsc')).size({ width: 20, height: 20 })Text($r('app.string.home_dlsc')).margin({ left: 4 }).fontColor($r('app.color.black_00')).fontSize(16).fontWeight(FontWeight.Bold)}.alignRules({'top': { 'anchor': 'list_recommend', 'align': VerticalAlign.Bottom },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },}).margin({ top: 24 }).alignItems(VerticalAlign.Center).id('rw_dlsc')//查看更多Row() {Text($r('app.string.to_see_more')).margin({ left: 4 }).fontColor($r('app.color.gray_63')).fontSize(10)Image($r('app.media.icon_home_more')).size({ width: 12, height: 12 })}.alignRules({'top': { 'anchor': 'rw_dlsc', 'align': VerticalAlign.Top },'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },bottom: { anchor: 'rw_dlsc', align: VerticalAlign.Center }}).alignItems(VerticalAlign.Center)}.width(CommonConstants.FULL_PERCENT)}.width(CommonConstants.FULL_PERCENT).alignItems(HorizontalAlign.Start).padding({ left: 16, right: 16 })}
}

找了很久，尝试将头部布局直接移出来也不行，后来细想会不会是RelativeContainer相对布局导致高度问题，于是将RelativeContainer布局给拆分后如下，

 @BuilderhomeHead() {Column() {RelativeContainer() {Image($r('app.media.icon_home_make')).size({ width: 48, height: 45 }).id('iv_home_1').alignRules({'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }})Image($r('app.media.icon_home_vip')).size({ width: 30, height: 30 }).id('iv_home_2').alignRules({'top': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Top },'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },'bottom': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Bottom }})}.width(CommonConstants.FULL_PERCENT).height(48)Row() {Image($r('app.media.icon_home_create_music')).width('50%').onClick(() => {})Column() {Image($r('app.media.icon_import_file')).width(CommonConstants.FULL_PERCENT).onClick(() => {})Image($r('app.media.icon_home_import_sc')).width(CommonConstants.FULL_PERCENT).onClick(() => {}).margin({ top: 6 })}.width('50%').margin({ left: 6 })}.width(CommonConstants.FULL_PERCENT).margin({ top: 24 }).justifyContent(FlexAlign.SpaceAround).alignItems(VerticalAlign.Top)RelativeContainer(){Row() {Image($r('app.media.icon_home_recommand')).size({ width: 20, height: 20 })Text($r('app.string.home_recommand')).margin({ left: 4 }).fontColor($r('app.color.black_00')).fontSize(16).fontWeight(FontWeight.Bold)}.alignRules({'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }}).margin({ top: 24 }).alignItems(VerticalAlign.Center).id('rw_recommand')//查看更多Row() {Text($r('app.string.to_see_more')).margin({ left: 4 }).fontColor($r('app.color.gray_63')).fontSize(10)Image($r('app.media.icon_home_more')).size({ width: 12, height: 12 })}.alignRules({'top': { 'anchor': 'rw_recommand', 'align': VerticalAlign.Top },'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },bottom: { anchor: 'rw_recommand', align: VerticalAlign.Center }}).alignItems(VerticalAlign.Center)}.height(43).width(CommonConstants.FULL_PERCENT)//横向滚动列表List({ space: 3 }) {ForEach(['0', '1', '2', '3'], (item: string, index: number) => {ListItem() {Column() {Stack() {Image($r('app.media.icon_recommand_bg')).size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })RelativeContainer() {Image($r('app.media.icon_home_test')).size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT }).id("iv_cover").borderRadius(16)Text('推荐').fontColor($r('app.color.white')).fontSize(15.5).fontWeight(FontWeight.Medium).backgroundColor($r('app.color.red_f37')).padding({top: 6,bottom: 6,left: 13,right: 13}).borderRadius({ topLeft: 16, bottomRight: 16 }).alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }})//播放按钮Image($r('app.media.icon_home_music_pause')).size({ width: 40, height: 40 }).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.size({ width: this.displayInfo.getWidth(190), height: this.displayInfo.getWidth(190) }).backgroundColor($r('app.color.white')).borderRadius(16).padding(2)}.width(CommonConstants.FULL_PERCENT).height(this.displayInfo.getWidth(218))Text('1111').width(CommonConstants.FULL_PERCENT).textAlign(TextAlign.Center).fontSize(14).fontColor($r('app.color.black_00')).fontWeight(FontWeight.Bold).margin({ top: 10 })Text('1111').width(CommonConstants.FULL_PERCENT).textAlign(TextAlign.Center).fontSize(12).fontColor($r('app.color.gray_8c')).fontWeight(FontWeight.Bold).margin({ top: 3 })}.alignItems(HorizontalAlign.Center).width(this.displayInfo.getWidth(218))}})}.listDirection(Axis.Horizontal).scrollBar(BarState.Off).width(CommonConstants.FULL_PERCENT).margin({ top: 12 })RelativeContainer(){//独立素材更多Row() {Image($r('app.media.icon_home_dlsc')).size({ width: 20, height: 20 })Text($r('app.string.home_dlsc')).margin({ left: 4 }).fontColor($r('app.color.black_00')).fontSize(16).fontWeight(FontWeight.Bold)}.alignRules({'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },}).alignItems(VerticalAlign.Center).id('rw_dlsc')//查看更多Row() {Text($r('app.string.to_see_more')).margin({ left: 4 }).fontColor($r('app.color.gray_63')).fontSize(10)Image($r('app.media.icon_home_more')).size({ width: 12, height: 12 })}.alignRules({'top': { 'anchor': 'rw_dlsc', 'align': VerticalAlign.Top },'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },bottom: { anchor: 'rw_dlsc', align: VerticalAlign.Center }}).alignItems(VerticalAlign.Center).margin({ top: 24 })}.height(43).width(CommonConstants.FULL_PERCENT)}.width(CommonConstants.FULL_PERCENT).padding({ left: 16, right: 16 })}

有相对布局的地方，给固定高度，然后问题得到解决。


http://www.ppmy.cn/devtools/144247.html

相关文章

Laya ios接入goole广告，搭建环境 1

Laya ios接入goole广告，搭建环境 1

只能说麻烦的一批，会了不难，难在不会 没有mac机，用的mac本，提示----》可能需要你升级macbook系统版本， 1、安装cocoapods sudo gem install cocoapods -V 加上-V，能查看安装进度，记住大写的…
阅读更多...
【深度学习】论文复现-对论文数据集的一些处理

【深度学习】论文复现-对论文数据集的一些处理

如何书写伪代码： ref:https://www.bilibili.com/video/BV12D4y1j7Zf/?vd_source3f7ae4b9d3a2d84bf24ff25f3294d107 i14时产出的图片比较合理 import json import os.path from matplotlib.ticker import FuncFormatter import pandas as pd import matplotlib.py…
阅读更多...
企业为何需要可视化数据分析系统

企业为何需要可视化数据分析系统

作为当今企业最核心的资产之一的数据，已经成为企业发展的重要基础。随着企业的不断发展壮大，随之在数据处理层面就面临重要的困扰，面对海量数据如何提取有效信息就是关键所在。因此在这样的背景之一，可视化数据分析系统的构建就成…
阅读更多...
FPGA设计-使用 lspci 和 setpci 调试xilinx的PCIe 问题

FPGA设计-使用 lspci 和 setpci 调试xilinx的PCIe 问题

目录 简介 lspci lspci-TV lspci-vvv 注意事项 lspci -vs lspci -vvvs 设置pci 识别setpci中的寄存器 setpci -s 00:01.0 d0.b42 简介 lspci 和 setpci 命令在 Linux 发行版中本身可用。该命令具有各种级别的输出，并提供非常有用的时间点查看 PCI 总线…
阅读更多...
pytorch repeat方法和expand方法的区别

pytorch repeat方法和expand方法的区别

PyTorch 中的 repeat 和 expand 方法都用于调整张量的形状或重复张量，但它们在实现方式和内存使用上有显著的区别。以下是详细对比： 1. repeat 方法 功能：通过实际复制数据来重复张量的内容。内存：会分配新的内存存储重复后的张…
阅读更多...
基于SpringBoot+layui+html实现电影院售票系统【源码+数据库文件+包部署成功+答疑解惑问到会为止】

基于SpringBoot+layui+html实现电影院售票系统【源码+数据库文件+包部署成功+答疑解惑问到会为止】

代码包运行启动成功！不管你有没有运行环境，哪怕你是刚买的新电脑，也包启动运行成功！有不懂的地方随便问！问到会为止！ 功能介绍 基于SpringBoot实现电影院售票系统设计了超级管理员、管理员、测试、用户四种…
阅读更多...
GaussDB数据库中SQL诊断解析之配置SQL限流

GaussDB数据库中SQL诊断解析之配置SQL限流

配置SQL限流 GaussDB提供SQL限流功能，当存在异常SQL（如存在不优索引）、SQL并发量上升时，通过SQL限流功能控制异常SQL的访问量或者并发量，保障服务的可用性。 前提条件 登录账号需要具备授权项“gaussdb:instance:li…
阅读更多...
接口测试-Fidder及jmeter使用

接口测试-Fidder及jmeter使用

一、接口测试的基础 1.接口的含义 也叫做API，是一组定义、程序及协议的集合，提供访问一组例程的能力，无需访问源码获理解内部工作细节 2.接口的分类 代码内部的接口，程序模块间的接口，对于程序接口测试，需…
阅读更多...
最新文章

Copyright @ 2022~2023