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

news/2024/12/22 3:13:47/

今天使用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/news/1557092.html

相关文章

启动打印服务提示：Http端口已被使用，请修改

启动打印服务提示：Http端口已被使用，请修改

分销AV 10.0.0及其以上版本启动打印服务提示：Http端口已被使用，请修改。该如何处理？ 一、先将打印服务退出,电脑桌面右下角任我打印服务操作退出。 二、到打印管理器安装目录\print下找到CONFIG文件，用记事本打开后，将…
阅读更多...
ThreadLocal数据结构、内存泄漏分析

ThreadLocal数据结构、内存泄漏分析

文章目录 ⚽ThreadLocal🎉入门案例🎈ThreadLocal在线程中怎么存储的🎗为什么会造成内存泄漏？🎃ThreadLocalMap的key使用强引用和弱引用有什么区别呢？🔔补充说明Java中引用类型分类内存泄漏和内存…
阅读更多...
技术分享 —— JMeter接口与性能测试实战！

技术分享 —— JMeter接口与性能测试实战！

前言 在软件开发和运维过程中，接口性能测试是一项至关重要的工作。JMeter作为一款开源的Java应用，被广泛用于进行各种性能测试，包括接口性能测试。本文将详细介绍如何使用JMeter进行接口性能测试的过程和步骤。 JMeter是Apache组织开发的基…
阅读更多...
Redis——缓存双写一致性问题

Redis——缓存双写一致性问题

文章目录 1、情况描述2、缓存双写一致性2.1 情况讨论2.2 双检加锁2.3 数据库和缓存一致性的几种更新策略。 总结 1、情况描述 默认不存在缓存雪崩和缓存击穿情况。首先Java先查询redis，若redis中存在数据则直接返回数据。若redis中不存在数据，需要查询my…
阅读更多...
包子凑数（2017年蓝桥杯试题H）

包子凑数（2017年蓝桥杯试题H）

【问题描述】 小明几乎每天早晨都会在一家包子铺吃早餐，他发现这家包子铺有N种蒸笼，其中第i种蒸笼恰好能放Ai(i为下标)个包子。每种蒸笼都有非常多个，可以认为是无限笼。 每当有顾客想买X个包子。卖包子的大叔就会迅速选出若干笼包子&#xf…
阅读更多...
Git Rebase分支合并

Git Rebase分支合并

Git Rebase 的应用场景，包括如何合并多 次提交记录和分支合并 // 1.分支合并 从master切一个开发分支 feature1, git checkout -b feature1 // 2.代码开发完提交代码完后，回到master拉取最新代码 git checkout master git pull // 3.回到feature1 进行代…
阅读更多...
黑客术语3

黑客术语3

19、免杀 : 就是通过加壳、加密、修改特征码、加花指令等等技术来修改程序， 使其逃过杀毒软件的查杀。 20 、加壳 : 就是利用特殊的算法，将 EXE 可执行程序或者 DLL 动态连接库文件的 编码进行改变（比如实现压缩、加密）&a…
阅读更多...
Vue 滚动条样式

Vue 滚动条样式

模板 <template><div class"box"><div v-for"(item, index) in 100" :key"index" class"box_item">{{ item }}</div></div> </template>样式 <style lang"scss" scoped> .box …
阅读更多...
最新文章

Copyright @ 2022~2023