openharmony容器组件之Grid
Grid:网格容器,由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局
Grid()属性:
columnsTemplate:用于设置当前网格布局列的数量,不设置时默认1列 示例, ‘1fr 1fr 2fr’ 分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份。
rowsTemplate:用于设置当前网格布局行的数量,不设置时默认1行 示例, '1fr 1fr 2fr’分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。
columnsGap:用于设置列与列的间距。
rowsGap:用于设置行与行的间距。
以下属性SDK8拥有:
editMode:是否进入编辑模式,进入编辑模式可以拖拽Gird组件内部GridItem。
layoutDirection:设置布局的主轴方向,目前支持的主轴布局方向如下:
LayoutDirection.Row:沿水平方向布局,即先填满一列,再去填下一列。
LayoutDirection.Column:沿垂直方向布局,即先填满一行,再去填下一行。
maxCount:当layoutDirection是Row时,表示可显示的最大行数,当layoutDirection是Column时,表示可显示的最大列数。
minCount:当layoutDirection是Row时,表示可显示的最小行数,当layoutDirection是Column时,表示可显示的最小列数。
cellLength:当layoutDirection是Row时,表示一行的高度,当layoutDirection是Column时,表示一列的宽度。
multiSelectable:是否开启鼠标框选,false:关闭框选,true:开启框选。
dragAnimation:是否开启拖拽GridItem动画。
edgeEffection:设置边缘滑动效果,目前支持的滑动效果EdgeEffect
Spring:弹性物理动效,滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离,松手后回弹。
None:滑动到边缘后无效果。
效果如图:
代码:
@Entry
@Component
struct GridTest {@State Number: String[] = ['0', '1', '2', '3', '4']build() {Column({ space: 5 }) {Grid() {ForEach(this.Number, (day: string) => {ForEach(this.Number, (day: string) => {GridItem() {Text(day).fontSize(16).backgroundColor(0xF9CF93).width('100%').height('100%').textAlign(TextAlign.Center)}}, day => day)}, day => day)}.columnsTemplate('1fr 1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr 1fr 1fr').columnsGap(10).rowsGap(10).width('90%').editMode(true).backgroundColor(0xFAEEE0).height(300)Text('C_scroll').fontColor(0x000000).fontSize(9).width('90%')Grid() {ForEach(this.Number, (day) => {ForEach(this.Number, (day) => {GridItem() {Text(day).fontSize(16).backgroundColor(0xF9CF93).width('100%').height(80).textAlign(TextAlign.Center)}}, day => day)}, day => day)}.columnsTemplate('1fr 1fr 1fr 1fr 1fr').columnsGap(10).rowsGap(10).onScrollIndex((first: number) => {console.info(first.toString())}).width('90%').backgroundColor(0xFAEEE0).height(300)}.width('100%').height('100%')}
}
openharmony容器组件之Grid相关推荐
- openharmony容器组件之GridItem
GridItem:网格容器中单项内容容器 GridItem()属性: rowStart:用于指定当前元素起始行号. rowEnd:用于指定当前元素终点行号. columnStart:用于指定当前元素起 ...
- openharmony容器组件之Refresh
Refresh:下拉刷新容器 Refresh(value: {refreshing: boolean, offset?: Length, friction?: number}) refreshing: ...
- openharmony容器组件之Badge
Badge:新事件标记组件,在组件上提供事件信息展示能力 Badge(value: {count: number, position?: BadgePosition, maxCount?: numbe ...
- openharmony容器组件之GridContainer
GridContainer:纵向排布栅格布局容器,仅在栅格布局场景中使用 GridContainer(options?: { columns?: number | 'auto', sizeType?: ...
- java中组件与容器_java中的容器组件和非容器组件
1.java使用到的图形类主要在java.awt 与javax.swing包中. 2.java.awt 与 javax.swing包的区别: ① java.awt中使用的图形类都是依赖于系统的图形库的 ...
- 八十、React中的容器组件和无状态组件
2020/11/20. 周五.今天又是奋斗的一天. @Author:Runsen React,也有了自己去构建一些应用的信心,那会是一种非常棒的感觉. 容器组件和无状态组件 React类组件是在Jav ...
- SAP 产品 UI 里的容器组件的概念和开发概述
这是 Jerry 2021 年的第 68 篇文章,也是汪子熙公众号总共第 345 篇原创文章. Jerry 之前的文章,谈谈 SAP 产品 UI 开发中的组件概念,曾经提到,无论基于何等开发技术的 S ...
- [react] 展示组件和容器组件有什么区别?
[react] 展示组件和容器组件有什么区别? 展示组件(Presentational Component) 关注页面的展示效果(外观) 内部可以包含展示组件和容器组件,通常会包含一些自己的DOM标记 ...
- 使用container的嵌套_ElementUI 技术揭秘(4)— Container 布局容器组件的设计与实现。...
前言 上一篇文章我们分析了 Layout 布局组件的设计和实现,它的应用场景通常是局部布局.对于整个页面的布局,element-ui 提供了 Container 布局容器组件,专门用于 PC 管理后台 ...
最新文章
- 千人千面,撩拨你的个性化广告
- Linux下修改mysql root密码
- 1.15 Java访问控制修饰符(public、 private、protected 和 friendly)
- SAP HR模块用的表
- linux tar.xz的解压方法
- [NOTE] WindowsLinux常用环境变量
- DCMTK:wwwapp instalation
- linux查询引脚功能复用,linux pinmux 引脚多路复用驱动分析与使用
- 深入理解JAVA集合系列二:ConcurrentHashMap源码解读
- 极光im php,利用php+curl调用极光IM第三方REST API方法经验
- JavaScript(十二)常见js特效
- “向日葵”远程控制软件,方舟Q2硬件付费/免费功能全面评测,拔草向
- dp 完全背包问题python
- BLANK_TRIMMING 参数介绍
- 无法登录学校网站的解决办法
- 项目整体管理:制定项目章程--启动过程组
- 解决Android应用签名和系统不一致的问题
- Java 小项目——字符界面收银台(优化版)
- Oracle-09:聚合函数
- 贪心算法1——找零钱问题