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…

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

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

大数据—元数据管理

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

Amazon云计算AWS(四)

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

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, …

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 如何使用国内…

构造,CF862C. Mahmoud and Ehab and the xor

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 862C - Codeforces 二、解题报告 1、思路分析 非常松的一道构造题目 我们只需让最终的异或和为x即可 下面给出个人一种构造方式&#xff1a; 先选1~N-3&#xff0c;然后令o (1 << 17) …

Redis5学习笔记之三:事务、锁和集成

3. 事务&#xff0c;锁和集成 3.1 事务 3.1.1 基本应用 redis事务的本质&#xff1a;一组命令的集合&#xff0c;一个事务中的所有命令都会被序列化&#xff0c;在执行事务的过程中&#xff0c;会按照顺序执行 redis事务的特点&#xff1a; redis单条命令能够保证原子性&…

第五讲:独立键盘、矩阵键盘的检测原理及实现

IO口电平检测 检测IO口的电平时&#xff0c;需要先给高电平 之后便进入输出状态 #include <reg52.h>void main() {// 配置P1.0为输出模式&#xff0c;并输出高电平P1 0x01; // 将P1.0置为高电平// 读取P1.0的电平状态if (P1 & 0x01) {// 如果P1.0为高电平&#x…

YOLOv9改进策略 | 添加注意力篇 | 利用YOLOv10提出的PSA注意力机制助力YOLOv9有效涨点(附代码 + 详细修改教程)

一、本文介绍 本文给大家带来的改进机制是YOLOv10提出的PSA注意力机制&#xff0c;自注意力在各种视觉任务中得到了广泛应用&#xff0c;因为它具有显著的全局建模能力。然而&#xff0c;自注意力机制表现出较高的计算复杂度和内存占用。为了解决这个问题&#xff0c;鉴于注意…

【iOS】Runtime

文章目录 前言一、Runtime简介二、NSObject库起源isaisa_t结构体cache_t的具体实现class_data_bits_t的具体实现 三、[self class] 与 [super class]四、消息发送与转发五、Runtime应用场景 前言 之前分part学习了Runtime的内容&#xff0c;但是没有系统的总结&#xff0c;这篇…