首页 > 其他分享 >【HarmonyOS】低代码平台组件拖拽使用技巧之滚动容器

【HarmonyOS】低代码平台组件拖拽使用技巧之滚动容器

时间:2023-10-12 11:35:24浏览次数:40  
标签:容器 滚动 垂直 HarmonyOS 组件 拖拽 页面

​【关键字】

HarmonyOS、低代码平台、组件拖拽、滚动容器

 

1、写在前面 上一篇中我们介绍了低代码平台组件库中的堆叠容器的一些拖拽技巧,本篇我们继续,今天带大家一些来看一个新的组件——滚动容器。关于滚动容器的直接使用其实很简单,所以这个不是今天的重点,今天的重点是如何在原有布局的基础上在外层套上一个滚动容器,废话不多说了,开始吧! 2、开发实战 先来快速的看一下滚动容器如何直接使用?

首先页面中是一个垂直容器中拖入了一个文本组件用作标题,然后从组件库中拖入一个滚动容器,设置滚动容器的宽高之后,再往滚动容器中拖入一个垂直容器,这里需要注意,滚动容器它的内部是有且只有一个子容器,所以我们这里是拖入了一个垂直容器用来做后续其它容器的父容器,接着我们快速拖拽几个图片组件将滚动容器给撑开,顺利的话你可以看到页面上已经出现滚动条了,这里提供一张动图展示:

1.gif

接下来我们重点来看一下如何在原有布局的基础上在外层嵌套一个滚动容器。

首先我们先准备一个高度超过整个屏幕高度的页面布局,这里我使用一个垂直容器里面放了一些组件:

cke_5614.png​​

然后我们来实际操作一下如何在垂直容器的外层添加一个滚动容器。

从组件库中拖拽一个滚动容器拖到画布中页面的最上方,这里可以看一下绿色的线,等到绿色的线在布局最上方时松开鼠标,接着选中下方整个垂直容器的所有组件,将它整体拖动到滚动容器里面,注意这里不要选中页面上的十字花拖动,选中整个垂直容器拖动。最后修改滚动容器的宽为100%,高为自动,下面一起来看一下完整的操作:

2.gif

OK,到这里,我们就已经可以看到页面可以滚动了,右侧也已经出现了滚动条。

今天的内容就到这里,下期再会!

标签:容器,滚动,垂直,HarmonyOS,组件,拖拽,页面
From: https://www.cnblogs.com/mayism123/p/17759099.html

相关文章

  • vue动态引入组件
    vue动态引入组件,正常情况是页面渲染时动态加载该页面组件,还能进行细化动态加载情况,比如弹窗组件动态导入:除了路由懒加载,你还可以在其他地方使用动态导入来按需加载组件。例如,在某个按钮的点击事件中异步加载一个组件:import('./components/MyComponent.vue').then((module)=>{......
  • HarmonyOS远端状态订阅开发实例
     IPC/RPC提供对远端Stub对象状态的订阅机制, 在远端Stub对象消亡时,可触发消亡通知告诉本地Proxy对象。这种状态通知订阅需要调用特定接口完成,当不再需要订阅时也需要调用特定接口取消。使用这种订阅机制的用户,需要实现消亡通知接口DeathRecipient并实现onRemoteDied方法清理资源......
  • 天合光能组件质量怎么样?至尊组件双面增益达8.82%,高可靠性再获验证
     近日,第三方权威检测认证机构鉴衡进行的极端气候户外实证报告出炉:天合光能至尊600W+系列组件在张北常年多风天气下,运行表现优异,EL图像无缺陷,与至尊600W+单面组件相比,双面组件发电增益高达8.82%。再度证实至尊组件应用于常年大风地区光伏电站的卓越可靠性,用品质护航客户价值。......
  • .NET5_Log4Net组件使用
    一、NUGet引入程序集:log4Net+Microsoft.Extensions.Logging.Log4Net.AspNetCore二、准备配置文件 三、配置使用Log4Net记录日志......
  • HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Toggle
    组件提供勾选框样式、状态按钮样式及开关样式。该组件从APIVersion8开始支持。仅当ToggleType为Button时可包含子组件。一、接口Toggle(options:{type:ToggleType,isOn?:boolean})从APIversion9开始,该接口支持在ArkTS卡片中使用。参数:ToggleType枚举说明从APIversion9......
  • Spring Cloud相关组件说明
    1、SpringCloud版本现有SpringCloud有两代实现,分为SpringCloudNetflix和SpringCloudAlibaba,由于SpringCloudNetflix版一些重要组件如注册中心Euraka、Ribbon已经不再迭代更新了,SpringCloudAlibaba慢慢孵化出SpringCloudAlibaba一套相关组件。2、SpringCloudNetflix......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-18-处理鼠标拖拽-上篇
    1.简介本文主要介绍两个在测试过程中可能会用到的功能:在selenium中宏哥介绍了Actions类中的拖拽操作和Actions类中的划取字段操作。例如:需要在一堆log字符中随机划取一段文字,然后右键选择摘取功能。playwright同样可以实现元素的拖拽和释放的操作。2.拖拽操作鼠标拖拽操作,顾名......
  • React跨路由组件动画
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。本文作者:佳岚回顾传统React动画对于普通的React动画,我们大多使用官方推荐的react-transition-group,其提供了四个基本组件Transition、CSSTr......
  • 全志R128芯片 基础组件开发指南——RTOS 多媒体编码
    RTOS多媒体编码介绍FreeRTOS下如何使用xrecorder的接口来开发录制应用程序,方便录制应用开发人员快速正确地开发,以及录制应用测试人员如何根据该文档对基于xrecord的录制应用进行验证测试。编码支持情况目前RTOS平台多媒体编码应用支持的编码格式分别为:pcm、amr、mp3、s......
  • 界面组件DevExpress WPF v23.1 - 进一步升级数据处理能力
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件的衍伸产品,还是以数据为中心......