当前位置:网站首页>openharmony容器组件之GridContainer
openharmony容器组件之GridContainer
2022-08-09 13:12:00 【lplj717】
GridContainer:纵向排布栅格布局容器,仅在栅格布局场景中使用
GridContainer(options?: { columns?: number | ‘auto’, sizeType?: SizeType, gutter?: Length, margin?: Length})
columns:设置当前布局总列数。
sizeType:选用设备宽度类型(SizeType,默认Auto)
SizeType枚举类:
XS:最小宽度类型设备
SM:小宽度类型设备
MD:中等宽度类型设备
LG:大宽度类型设备
Auto:根据设备类型进行选择
gutter:栅格布局列间距
margin:栅格布局两侧间距
效果如图:
代码:
@Entry
@Component
struct GridContainerT {
@State sizeType: SizeType = SizeType.XS
build() {
Column({ space: 5 }) {
GridContainer({ columns: 7, sizeType: this.sizeType, gutter: 1 }) {
Row() {
Text('1')
.useSizeType({
xs: { span: 1, offset: 0 },
sm: { span: 3, offset: 0 },
md: { span: 5, offset: 0 },
lg: { span: 7, offset: 0 }
})
.height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
}
}.width('90%')
Text('Click Simulate to change the device width')
.fontSize(9)
.width('90%')
.fontColor(0xCCCCCC)
.textAlign(TextAlign.Center)
Row() {
Button('XS')
.onClick(() => {
this.sizeType = SizeType.XS
}).backgroundColor(0x317aff)
Button('SM')
.onClick(() => {
this.sizeType = SizeType.SM
}).backgroundColor(0x317aff)
Button('MD')
.onClick(() => {
this.sizeType = SizeType.MD
}).backgroundColor(0x317aff)
Button('LG')
.onClick(() => {
this.sizeType = SizeType.LG
}).backgroundColor(0x317aff)
}
}.width('100%').margin({ top: 5 })
}
}
边栏推荐
- npm install失败
- R language kaggle game data exploration and visualization
- IDEA Gradle 常遇问题(一)
- Professor Chen Qiang's "Machine Learning and R Application" course Chapter 16 Assignment
- tkiner组件之滚动文本框(scrolledtext )相关操作
- RobotFramework 之 条件判断
- 微信实现扫码支付(native)
- FFmpeg av_interleaved_write_frame错误
- 微服务+微信小程序实现社区服务
- 程序员的七夕怎么过?不会是写代码吧
猜你喜欢
客户端连接rtsp的步骤
pytest 之 fixture的调用
eslint语法规则报错
企业公众号开通微信支付
GET POST PUT DELETE request in GIN
Final assignment of R language data analysis in a university
pytest 之 fixture的定义及作用域
FFmpeg multimedia file processing (the basic concept of ffmpeg processing stream data)
GIN Bind mode to get parameters and form validation
RobotFramework 之 条件判断
随机推荐
FFmpeg multimedia file processing (implementation of ffmpeg operation directory and list)
IDEA Gradle 常遇问题(一)
ArcEngine(九)图形绘制
[MRCTF2020]套娃-1
目标检测类间不平衡问题
搭建大型分布式服务(二)搭建会员服务
Realization of RTSP Protocol
01_iTween_第一天--小球抛物线
Ledong Fire Rescue Brigade was invited to carry out fire safety training for cadres
GIN file upload and return
蓝桥杯线上模拟赛——Flex 经典骰子布局
ArcEngine(八) 选择要素并高亮显示
常用函数
蓝桥历届真题-门牌制作
2.微服务'黑话'集锦及Eureka注册中心相关概念
JZ7 重建二叉树
学习opencv-基础应用
昇腾AI开发者创享日南京站!一起CANN机器狗+AI机械臂实现硬核智慧救援!燃爆现场~
RobotFramework 之 条件判断
二叉树的遍历(py)