Harmony开发 List/Scroll 组件最后一个item显示不全或布局显示不完整

今天在做Harmony开发的时候遇到一个问题,List组件的最后一个item显示不全,如下图,item-9显示不出来,显示了一部分
在这里插入图片描述
这个页面的代码结构如下:

Column() {Row() {Text('文本1').fontSize(15).fontColor(Color.Black)Text('文本2').fontSize(15).fontColor(Color.Black)}.height(150).width('100%').backgroundColor(Color.Green)List({ space: 10 }) {ForEach(this.areaSelectList, (str: string, i: number) => {ListItem() {Stack() {Text('' + str).height(150).fontSize(18).fontColor(Color.White)}.width('100%').borderRadius(5).backgroundColor(Color.Blue)}})}.height('100%').padding({ left: 15, right: 15, top: 15 })
}
.backgroundColor(Color.White)
.height('100%')
.width('100%')

在一个Column组件中有一个Row组件和一个List组件,Row组件高度是150宽度是100%,List组件我想要高度填满剩余的空间所以高度是100%,里边有10个item。

看起来很正常但是实际效果和预想不一样,滑动到最后一个item时发现无法滑动了,已经到底部了,但是最后一个item还没有显示全。

原因:

问题出在了高度的 100% ,这个地方是个坑,在我们预想中,高度100%应该会填满父组件剩余的空间,实际也是这样的,不过这个100%的高度填满,是按照父组件的高度填满,并不是按照父组件的剩余空间填满,也就是说,List组件的高度是是整个父组件的高度,并不是 父组件的高度减去Row组件高度所得的剩余高度,父布局又是一个线性布局,所以List组件的高度就会超出屏幕范围,导致最后一条item显示不全。

对策:

给List组件加上layoutWeight(1),使它填满父控件剩余空间,这个问题就可以解决。
但是还有一种情况,就是List组件的外层又加了一个线性组件,这个时候List又会显示不全,原因其实和上边一样,新加的线性组件的高度也超出了屏幕。方案就是,给新加的线性组件也要加上layoutWeight(1),就可以显示正常。

我建了一个鸿蒙开发者交流群,欢迎大家加入交流鸿蒙开发
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/22009.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Vue3的Uniapp实训项目|一家鲜花店

基于Vue的Uniapp实训指导项目 项目预览: 在这里插入图片描述 pages.json {"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index",&…

群体优化算法---蜂群优化算法应用于数据挖掘

介绍 蜂群优化算法(Bee Algorithm, BA)及其变种主要模拟蜜蜂的觅食行为,以解决复杂的优化问题。这类算法通过蜜蜂之间的信息交流和协作来探索解空间,寻找全局最优解。主要应用于参数优化,结构优化,机器学习…

The First项目报告:去中心化知识产权治理协议MON Protocol如何革新链游产业?

2023年12月,RPG NFT 游戏 Pixelmon 首席执行官 GiulioX 在 X 平台表示,确认将推出代币 MON,代币生成(TGE)时间将取决于 MON 的路线图和主流 CEX 的启动板队列。12 月 11 日,RPG NFT 游戏 Pixelmon 首席执行…

element-plus的Layout组件

elment-plus的layout组件包括el-row和e-col,和bootstrap的栅格类似,e-row采用flex布局,分成了24个栅栏,单个e-col默认占24,可以通过span属性指定其大小,offset属性指定其偏移的栅栏个数。e-row组件的父组件不要使用dis…

深度学习(三)

5.Functional API 搭建神经网络模型 5.1利用Functional API编写宽深神经网络模型进行手写数字识别 import numpy as npimport pandas as pdimport matplotlib.pyplot as pltfrom sklearn.datasets import load_irisfrom sklearn.model_selection import train_test_splitfrom…

Stable diffusion文生图大模型——隐扩散模型原理解析

1、前言 本篇文章,我们将讲这些年非常流行的文生图大模型——Stable Diffusion。该模型也不难,甚至说很简单。创新点也相对较少,如果你学会了我以前的文章讲过的模型,学习这个也自然水到渠成! 参考论文:H…

AdminController

目录 1、 AdminController 1.1、 Students 1.2、 StudentDetail 1.3、 EnrolledStudent AdminController using ITM_College.Data; using ITM_College.Models; using Microsoft.AspNetCore.Mvc; using Microsoft.EntityFrameworkCore; namespace ITM_College.Cont…

大白话说明:k8s-Service资源的理解以及与Ingress Controller 做区分

一、什么是Service? 1、Service只是后段一堆Pod的集合抽象概念而已。 2、当你创建Service资源时会同时创建一个名称为Endpoints的资源对象来List 这些实际的Pod的IP。 二、Service代理流量吗? 1、不代理。 2、实际处理流量是每个节点上的kube-prox…

tomcat-valve通过servlet处理请求

上一节说到请求url定位servlet的过程,tomcat会把请求url和容器的映射关系保存到MappingData中,org.apache.catalina.connector.Request类实现了HttpServletRequest,其中定义了属性mappingDataprotected final MappingData mappingData new M…

腾讯云 TDMQ for Apache Pulsar 多地区高可用容灾实践

作者介绍 林宇强 腾讯云高级工程师 专注于消息队列、API网关、微服务、数据同步等 PaaS 领域。有多年的开发和维护经验,目前在腾讯云从事 TDMQ Pulsar 商业化产品方向的研发工作。 导语 本文将从四个维度,深入剖析 Pulsar 在多可用区高可用领域的容…

大数据—元数据管理

在大数据环境中,元数据管理是确保数据资产有效利用和治理的关键组成部分。元数据是描述数据的数据,它提供了关于数据集的上下文信息,包括数据的来源、格式、结构、关系、质量、处理历史和使用方式等。有效的元数据管理有助于提高数据的可发现…

Amazon云计算AWS(四)

目录 八、其他Amazon云计算服务(一)快速应用部署Elastic Beanstalk和服务模板CloudFormation(二)DNS服务Router 53(三)虚拟私有云VPC(四)简单通知服务和简单邮件服务(五&…

【劲舞团game】

编写《劲舞团》这样的游戏代码是一个复杂的过程,涉及到游戏引擎的使用、图形渲染、物理模拟、音频处理、网络通信等多个方面。以下是一个非常简化的步骤,用于说明如何开始编写一个基于Unity引擎的简单舞蹈游戏: 1. 准备开发环境 下载并安装…

LeetCode刷题之HOT100之全排列

九点半了&#xff0c;做题吧。聊天聊到十一点多哈哈。 1、题目描述 2、逻辑分析 给定一个不重复数组&#xff0c;要求返回所有可能的全排列。这道题跟我上一道题思想一致&#xff0c;都是使用到回溯的算法思想来解决。直接用代码来解释吧 3、代码演示 public List<List&…

MongoDB环境搭建

一.下载安装包 Download MongoDB Community Server | MongoDB 二、双击下载完成后的安装包开始安装&#xff0c;除了以下两个部分需要注意操作&#xff0c;其他直接next就行 三.可视化界面安装 下载MongoDB-compass&#xff0c;地址如下 MongoDB Compass Download (GUI) | M…

Golang | Leetcode Golang题解之第129题求根节点到叶节点数字之和

题目&#xff1a; 题解&#xff1a; type pair struct {node *TreeNodenum int }func sumNumbers(root *TreeNode) (sum int) {if root nil {return}queue : []pair{{root, root.Val}}for len(queue) > 0 {p : queue[0]queue queue[1:]left, right, num : p.node.Left, …

overpass-api 部署(docker)

简介 Overpass是一个用于访问和查询OpenStreetMap&#xff08;OSM&#xff09;数据的开放式数据API和查询语言。OpenStreetMap是一个由社区驱动的免费开放地图项目&#xff0c;用户可以贡献地理数据并使用它来创建自由和开放的地图。 Overpass API提供了一种强大的方式来获取和…

Spire.PDF for .NET【文档操作】演示:在 C# 中向 PDF 文件添加图层

Spire.PDF 完美支持将多页 PDF 拆分为单页。但是&#xff0c;更常见的情况是&#xff0c;您可能希望提取选定的页面范围并保存为新的 PDF 文档。在本文中&#xff0c;您将学习如何通过 Spire.PDF 在 C#、VB.NET 中根据页面范围拆分 PDF 文件。 Spire.PDF for .NET 是一款独立 …

群体优化算法---蝙蝠优化算法分类Iris数据集

介绍 蝙蝠算法&#xff08;Bat Algorithm, BA&#xff09;是一种基于蝙蝠回声定位行为的优化算法。要将蝙蝠算法应用于分类问题&#xff0c;可以通过将蝙蝠算法用于优化分类器的参数&#xff0c;图像分割等 本文示例 我们使用一个经典的分类数据集&#xff0c;如Iris数据集&…

Python开发运维:VSCode与Pycharm 部署 Anaconda虚拟环境

目录 一、实验 1.环境 2.Windows 部署 Anaconda 3.Anaconda 使用 4.VSCode 部署 Anaconda虚拟环境 5.Pycharm 部署 Anaconda虚拟环境 6.Windows使用命令窗口版 Jupyter Notebook 7.Anaconda 图形化界面 二、问题 1.VSCode 运行.ipynb代码时报错 2.pip 如何使用国内…