HarmonyOS NEXT应用开发之元素超出List区域

介绍

本示例介绍在List组件内实现子组件超出容器边缘的布局样式的实现方法。

List组件clip属性默认为true,超出容器边缘的子组件会按照List的布局范围被裁剪。为此,可以在List组件内部添加一个占位的ListItem,以达到预期的布局效果。List占满整个窗口或者不可滚动的情况下,也可以在List外占位,同时设置List的clip属性为false达成同样的效果。

该布局效果多用于头像、列表子项标题等元素的突出显示。

效果图预览

使用说明

  • 上下滑动屏幕,可以查看整个列表。

实现步骤

  1. 通过设置负的margin值,移动组件位置,使其超出父组件范围。
Image($r("app.media.io_user_portrait")).width(80).height(80).margin({ top: -50, left: 15 })
  1. 在List内部使用ListItem占位,包住超出的区域。
List() {ListItem().height(40).selectable(false) // 占位组件ListItem() { // 需要超出范围的组件Image($r("app.media.io_user_portrait")).width(80).height(80).margin({ top: -50, left: 15 })}...
}

实现步骤(另一种方式)

  1. 通过设置负的margin值,移动组件位置,使其超出父组件范围。
Image($r("app.media.io_user_portrait")).width(80).height(80).margin({ top: -50, left: 15 })
  1. 在List组件外部使用Row占位,同时设置List.clip(false),允许滚动时上下溢出List组件的区域。
Row().height(60) // 占位组件
List() {ListItem() { // 需要超出范围的组件Image($r("app.media.io_user_portrait")).width(80).height(80).margin({ top: -50, left: 15 })}...
}.clip(false)

高性能知识点

不涉及

工程结构&模块类型

listitemoverflow                                // har类型
|---AboutMe.ets                                 // 页面布局实现页面

模块依赖

@ohos/routermodule(动态路由)

参考资料

List

clip

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

腾讯T10级高工技术,安卓全套VIP课程全网免费送:https://qr21.cn/D2k9D5

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

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

相关文章

每日一题-spring中的设计模式

1、 spring中的设计模式 工厂模式(Factory Pattern):Spring使用工厂模式来创建和管理对象。通过ApplicationContext,Spring可以作为一个工厂,负责创建、初始化和返回应用程序所需的对象。 单例模式(Singlet…

【vscode 常用扩展插件】

vscode 常用扩展插件 常用插件部分插件使用技巧1、eslint 保存自动格式化2、代码片段的使用3、最后是关于引入文件路径提示的 常用插件 记录vscode方便开发的扩展插件,方便换电脑时,快速部署所需环境。 部分插件 1、Auto Close Tag html自动闭合标签插…

React——class组件中setState修改state

class组件中通过state去存储当前组件的数据,那怎么对其进行修改呢?就是方法this.setState({ 要修改的部分数据 }) setState() 作用:1 、修改 state 内容;2 、更新 UI 特别注意:react的核心其实是虚拟dom(数…

WebSocket 和SSE的区别以及优缺点

WebSocket 和 Server-Sent Events(SSE)都是用于实现服务器向客户端推送消息的技术,但它们有一些重要的区别: 1.双向 vs 单向:WebSocket 是全双工的,这意味着服务器和客户端可以同时发送和接收消息。而 SSE …

【项目实践Day06】异步请求与同步请求+Ajax+微信小程序上实现发送异步请求

什么是同步和异步 同步 在主线程上排队执行的任务,只有前一个任务执行完毕,才能继续执行下一个任务。也就是一旦调用开始,就必须等待其返回结果,程序的执行顺序和任务排列顺序一致。客户端必须等待服务器端的响应。在等待的期间客…

HTML静态网页成品作业(HTML+CSS)——宠物狗店网页(1个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有1个页面。 二、作品演示 三、代…

el-date-picker时间禁用问题

// 选择今天以及今天以后的日期 export const disabledDate (time) > {return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的 }设置开始时间小于结束时间(不能等于) export const disabledDate (date) …

NVIDIA NIM 提供优化的推理微服务以大规模部署 AI 模型

NVIDIA NIM 提供优化的推理微服务以大规模部署 AI 模型 生成式人工智能的采用率显着上升。 在 2022 年 OpenAI ChatGPT 推出的推动下,这项新技术在几个月内就积累了超过 1 亿用户,并推动了几乎所有行业的开发活动激增。 到 2023 年,开发人员…

Covalent Network(CQT)借助最大规模的历史与实时 Web3 数据集,推动人工智能的发展

人工智能在众多领域中增强了区块链的实用性,反之亦然,区块链确保了 AI 模型所使用的数据的来源和质量。人工智能带来的生产力提升,将与区块链系统固有的安全性和透明度融合。 Covalent Network(CQT)正位于这两项互补技…

设计模式(结构型设计模式——代理模式)

设计模式(结构型设计模式——代理模式) 代理模式 基本定义 代理模式就是给一个对象提供一个代理,并由代理对象控制对原对象的引用。在代理模式中,“第三者”代理主要是起到一个中介的作用,它连接客户端和目标对象。 …

HarmonyOS NEXT应用开发之Navigation实现多设备适配案例

介绍 在应用开发时,一个应用需要适配多终端的设备,使用Navigation的mode属性来实现一套代码,多终端适配。 效果图预览 使用说明 将程序运行在折叠屏手机或者平板上观看适配效果。 实现思路 本例涉及的关键特性和实现方案如下&#xff1a…

backtrader回测股票:突破20日均线买入,跌破20日均线卖出

数据源:akshare 回测工具:backtrader 策略:突破20日均线买入,跌破20日均线卖出 代码: from datetime import datetime import backtrader as bt #1.9.78.123 import matplotlib.pyplot as plt #3.8.3 import aks…

单片机-点亮LED灯

[2-1] 点亮一个LED_哔哩哔哩_bilibili main()程序执行结束后,单片机会再次执行main()。 不断执行P20xFE;(点亮LED灯1) #include "reg52.h"void main() {P20xFE; //1111 1110 } 只执行一次P20xFE; #include "r…

数据库只追求性能是不够的!

那些成功的数据库公司没有一家是通过性能比竞争对手更快而成功的。 作者:JORDAN TIGANI,DuckDB 公司 MotherDuck 联合创始人&CEO 本文和封面来源:https://motherduck.com/,爱可生开源社区翻译。 本文约 4500 字,预…

论文阅读之AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE

文章目录 原文链接主要内容模型图技术细节实验结果 原文链接 AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE 主要内容 这篇文章的主要内容是介绍了一种新的计算机视觉模型——Vision Transformer(ViT),这是…

【iOS ARKit】触发器与触发域

触发器 在上节的示例中,所有可见的物体都参与了物理模拟,但在一些应用中,我们物理模拟,同时又需要了解是否有物体与它们发生了碰撞。如在 AR场景中,当角色靠近一散门时,我们并不希望因为角色与门发生碰撞而…

自然语言处理学习总结

目录 1、词表示 2、语言模型(LM) 3、常用学习网址 自然语言处理 1、词表示 词表示:自然语言中最基本的语言单位表示成机器理解的方式 方式一:词与词之间的相似度 方式二:词与词之间的关系 词义的表示方法&…

云手机在海外电商中的应用优势

随着海外市场的不断拓展,电商行业对于高效、安全的工具需求日益增长。在这一背景下,云手机作为一种新型服务,为海外电商提供了强大的支持和便利。云手机对传统物理手机起到了非常好的延展和补充作用,拓展了更广泛的应用场景&#…

Kafka整理-Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)的区别是什么?

Apache Kafka与传统消息队列系统(如RabbitMQ, ActiveMQ)虽然都是处理消息和数据流的中间件,但它们在设计理念、架构、功能和使用场景方面有显著的区别。下面是Kafka与传统消息队列系统的主要区别: 1. 设计目的和使用场景 Kafka: 设计初衷是为处理大量的实时数据流。强调高…

埃隆·马斯克与OpenAI诉讼案剖析

解析马斯克与OpenAI的法律纠纷 摘要 在人工智能迅速发展的背景下,一场法律纠纷引起了广泛关注,它涉及到了理想主义与商业现实的交汇点。特斯拉创始人埃隆马斯克起诉了他共同创立的人工智能研究组织OpenAI。马斯克认为OpenAI背离了其最初的宗旨&#xf…