鸿蒙Scroll布局,横向与纵向

注意,当横向scroll时,直接子元素的宽,不能100%,

               当纵向scroll时,直接子元素的高,不能100%​​​​​​​

1、纵向代码:

        方法1:用数值计算,来设置中间的高度:

@Entry
@Component
struct ScrollCase {@State message: string = 'Hello World';@State middleHeigh: number = 0;build() {Column() {Row() {}.height(50).width('100%').backgroundColor(Color.Blue)Column(){}.width('100%').height(this.middleHeigh).backgroundColor(Color.Orange)Row() {}.height(50).width('100%').backgroundColor(Color.Red)}.justifyContent(FlexAlign.SpaceBetween) //两端对齐.width('100%').height('100%').onAreaChange((old: Area, newArea: Area) => { //界面渲染时会被调用this.middleHeigh=(newArea.height as number) - 100})}
}

效果:

完全效果:

代码:

@Entry
@Component
struct ScrollCase {@State message: string = 'Hello World';@State middleHeigh: number = 0;scroller:Scroller =new Scroller()build() {Column() {Row() {}.height(50).width('100%').backgroundColor(Color.Blue).onClick(()=>{this.scroller.scrollEdge(Edge.Bottom)})Scroll(this.scroller){Column(){ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()ScrollItem()}}.scrollBarColor(Color.Red).width('100%').height(this.middleHeigh).backgroundColor(Color.Orange)Row() {}.height(50).width('100%').backgroundColor(Color.Red).onClick(()=>{this.scroller.scrollEdge(Edge.Top)})}.justifyContent(FlexAlign.SpaceBetween) //两端对齐.width('100%').height('100%').onAreaChange((old: Area, newArea: Area) => { //界面渲染时会被调用this.middleHeigh=(newArea.height as number) - 100})}
}@Component
struct ScrollItem {build() {Row(){Text("滚动区域内容").backgroundColor(Color.White)}.justifyContent(FlexAlign.Center).width('100%').height(80).backgroundColor(Color.Pink).margin(10)}
}

Scroller对Scorll进行控制滑动到顶、或底

2、横向滚动,效果:

代码:

@Entry
@Component
struct ScrollCase02 {@State message: string = 'Hello World';scroller: Scroller = new Scroller()build() {Column() {Scroll(this.scroller) {Row({ space: 20 }) {Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()Actor()}.height(200).backgroundColor(Color.Orange)}.height(200).width('100%').backgroundColor(Color.Pink).scrollable(ScrollDirection.Horizontal)Row() {Button("滚动左边").onClick(() => {this.scroller.scrollEdge(Edge.Start)})Button("滚动右边").onClick(() => {this.scroller.scrollEdge(Edge.End)})}}.justifyContent(FlexAlign.Center).height('100%').width('100%').backgroundColor(Color.Pink)}
}@Component
struct Actor {build() {Row() {Text("热辣滚烫--贾玲").fontColor(Color.White)}.width(100).height(180).backgroundColor(Color.Red)}
}

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

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

相关文章

nginx负载均衡、java、tomcat装包

一、nginx 七层负载均衡 1、七层负载均衡基础配置 2、负载均衡状态 [rootserver]# vim /usr/local/nginx/conf/nginx.confworker_processes 1;event {worker_connections 1024;}http { # 七层负载均衡支持http、ftp协议include mime.types;default_type app…

【云原生】数据库忘记密码怎么办?

相信很多人都会遇到在虚拟机中忘记数据库密码的情况,想必大家都很苦恼,所以今天给大家来讲讲数据库忘记密码了如何修改密码再登录数据库!!! 1、关闭数据库服务 systemctl stop mariadb 2、执行MySQL 服务器在启动时跳…

ModuleNotFoundError: No module named ‘tqdm‘

报错信息: tqdm是一个快速、可扩展的Python进度条库,用于展示迭代器的长循环执行进度。 解决:通过以下命令安装 使用conda命令安装 conda install tqdm使用pip安装: pip install tqdm

【JVM】垃圾回收机制、算法和垃圾回收器

什么是垃圾回收机制 为了让程序员更加专注于代码的实现,而不用过多的考虑内存释放的问题,所以在Java语言中,有了自动的垃圾回收机制,也是我们常常提及的GC(Garbage Collection) 有了这个垃圾回收机制之后,程序员只需…

Spring学习笔记1

今天内容:配置maven 搭建了springboot项目 约定大于配置(它默认的框架优先级比配置的要高,基本全都用它所默认的框架只有特殊需求的时候才会修改一小部分。) IOC Spring IOC 管理项目中java bean的生命周期 在项目运行阶段,…

操作系统与进程简单介绍

操作系统与进程 操作系统进程 操作系统 上一篇博客中介绍了操作系统到底层硬件它们之间的一个关系,那么还是这张图 操作系统到用户它们之间的关系又是如何的呢? 又回到了最根本的问题上:为什么要有操作系统呢? 1、向下管理好软…

敦煌文化主题页面 HTML,CSS,Javascript 源码分享

使用技术:HTML,CSS,JavaScript 项目亮点:加入了大量的CSS动画效果,以及JS交互效果,水平适合初学者以及大学生,包含登录注册页 需要的可以dd, 绿泡泡:ColdDayOne

为面试准备的一些内容

开发中使用了什么技术? mvvm、compose、livedata、单例模式、工厂模式、弱引用、线程池、Handler。 对于项目一开始我们打算使用aosp原生的管控方式,如UsageStatManager获取每个app的使用时长,和使用PackageManager的setPackagesSuspended方…

一文弄清Java的四大引用及其两大传递

开场白 Hello大家好呀,我是CodeCodeBond✊最近在复习很多很多的基础知识,有了很多新的感悟~ 话不多说,直接发车✈ 四大引用 问题切入点 在学习 Thread线程利用ThreadLocalMap实现线程的本地内存(变量副本)的时候&…

mac配置git的sshkey

在MAC中配置Git的SSH Key: 1.打开终端 2.生成SSH密钥,输入以下命令: ssh-keygen -t rsa -b 4096 -C “你自己的账号电子邮件地址” 按回车键后,系统会提示你输入文件保存路径,默认为~/.ssh/id_rsa直接按回车键使用默…

Mybatis实战:#{} 和 ${}的使用区别和数据库连接池

一.#{} 和 ${} #{} 和 ${} 在MyBatis框架中都是用于SQL语句中参数替换的标记,但它们在使用方式和处理参数值上存在一些显著的区别。 #{}的作用: #{} 是MyBatis中用于预编译SQL语句的参数占位符。它会将参数值放入一个预编译的PreparedStatement中&am…

Java语言程序设计——篇十一(2)

🌿🌿🌿跟随博主脚步,从这里开始→博主主页🌿🌿🌿 欢迎大家:这里是我的学习笔记、总结知识的地方,喜欢的话请三连,有问题可以私信🌳🌳&…

MySQL(8.0)数据库安装和初始化以及管理

1.MySQL下载安装和初始化 1.下载安装包 下载地址:https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar wget https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 2.解压…

数据同步策略概览

数据同步在业务开发中比较普遍,例如 订阅MySQL的binlog将数据同步至异构数据库。数据同步方案需要考虑一下几点: 数据实时性要求数据量级是否有数据转换逻辑 可分为两种模式 发布订阅模式:分为订阅数据库log还是订阅应用层发的消息点对点模…

问界M7是不是换壳东风ix7? 这下有答案了

文 | AUTO芯 作者 | 谦行 终于真相大白了 黑子们出来挨打啊 问界M7是换壳的东风ix7? 你们没想到,余大嘴会亲自出来正面回应吧 瞧瞧黑子当时乐的 问界你可以啊!靠改名字造车呢? 还有更过分的,说M7是东风小康ix7…

【网络】网络入门(第一篇)

网络入门可以从多个方面开始,以下是一个基本的网络入门指南,涵盖了网络的基本概念、网络类型、网络协议、网络拓扑、网络设备以及网络地址等方面。 一、网络基本概念 计算机网络:将多个计算机系统和设备连接在一起,以实现资源共…

CANoe系统变量模块里定义的结构体类型和变量从CAPL代码角度理解

CAPL里声明一个结构体类型: variables {struct DoIPMessage{byte version;byte inVersion;word type;dword length;byte payload[1500];};struct DoIPMessage doipMessage; }声明一个结构体类型DoIPMessage,定义了一个此结构体…

【数据结构】哈希表(散列表)

目录 1、unordered系列关联式容器 2、哈希概念 3、哈希函数 3.1 直接定址法 3.2 除留余数法 4、哈希冲突 4.1 闭散列(开放定址法) 4.1.1 线性探测 4.1.2 二次探测 4.1.3 线性探测代码实现 插入 搜索 删除 对于不可以取模的类型 4.2 开散列(哈希桶/拉链法) 插入…

【pyhton】Python中zip用法详细解析与应用实战

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

在WordPress上启用reCAPTCHA的指南

随着网络安全问题的日益严重,网站管理员必须采取措施保护自己的网站免受恶意攻击。对于WordPress用户来说,可以通过启用谷歌的reCAPTCHA功能来增强网站的安全性。本文将介绍两种在WordPress上启用reCAPTCHA的方法:使用插件和手动添加代码。 一…