鸿蒙ArkTS语言入门——网格布局
通过之前的学习,想必大家对如何通过Row和Column来构建一个最基础的页面已经有了一个初步的掌握,接下来,笔者将会介绍更多的页面布局,来将我们的页面变得更加丰富精彩。在本篇博客中,笔者将会介绍Grid/GridItem(网格布局),尽可能的详细的解释该布局的用法以及在实际开发过程中一些小技巧的使用。
Grid
首先我们来对Grid进行一个初步的认识:
网格布局(Grid)是由“行”和“列”分割的单元格所组成,通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力,子组件占比控制能力,是一种重要自适应布局,其使用场景有九宫格图片展示、日历、计算器等。
上面的内容是官方给出的对Grid的文字定义,不难看出,网格布局在特定场景(例如日历、计算器等)下是有较大优势的,它可以轻松的将页面进行均分,大大减少代码量,提高编码效率,而且做出来的页面会更加简洁美观。我们用图片来解释会更加明了,如下图:
在这张图片中,Grid网格布局通过其子组件GridItem将整个页面划分为一个九宫格的布局形式,我们可以在每一个GridItem再进行布局,从而实现每一个GridItem都能实现其独特的功能,大大提升了页面的美观以及实用性,需要注意的是,Grid的子组件只能是GridItem,所以,这两者一般是组合出现使用的。
图片
如图便是一个计算器的页面,这个页面便是使用Grid的一个典型例子,在每一个GridItem中放入一个Button按钮,并赋予他们各自的功能,最终组成整个计算器系统的页面。
又例如此图,软件中它将不同的餐品放在一张张单独的卡片中,这也是可以通过Grid来进行布局的,这样的布局使得整个页面清晰明了,有利于顾客更好地选餐。总之这是一个应用场景非常广的布局方式,接下来,笔者将详细讲解一下该布局的写法。