HarmonyOS-ArkUI Grip组件
我们在学习List的时候，已经捎带引入了Grid。解说如下图所示：https://i-blog.csdnimg.cn/img_convert/eb69a66fb4b286ae6aa479e5e6c73111.png
也就是，如果一个表，长宽根本都是一致的，那么此时可以完全不消Grid也可以实现，并且，优先考虑的就是List。
如果List实现不了的情况下，我们才会考虑到要不要用Grid来完成。那么grid究竟存在什么List不具备的本领呢？
我们起首看一张图就大致明白了。 Grid组件可以实现的本领：
https://i-blog.csdnimg.cn/img_convert/91139475aed4facad539d4fcd78863de.png
此中中央的那张布局结构，就是Grid与List相比有明显差别的地方。当我们有需求，要求每一个子组件并非是严格的相等的宽高时，采用Grid组件是比力合适的。
好有了大概得了解 ，我们接下来来学习一下，这个组件，并掌握这么犬牙交错的界面应该怎么搭建，搭建的时候，组件的其他属性限制。
概述
网格布局是由“行”和“列”分割的单元格构成，通过指定项目所在的单元格做出各种各样的布局，网格布局具有较强的页面均分本领，子组件占比控制本领，是一种紧张的自顺应布局，利用场景如，九宫格，计算器，日历等。
ArkUI为网格布局提供了相关的组件，Grid以及GridItem。Grid用来设置布局相关参数，GridItem定义子组件相关特征。Grid组件也支持，条件渲染，循环渲染，和懒加载等方式来生成组件.
Grid与GridItem组件的关系：
https://i-blog.csdnimg.cn/img_convert/4c8d786bebd15dbb21b9b6325c5494fe.png
Grid组件支持自定义行数和每行每列尺寸占比，设置子组件可以高出几行和几列，同时提供了水平和垂直的布局本领。当网格容器组件发生厘革时，所有组件以及间距会等比例调整，从而实现布局的自顺应本领。根据Grid的这些布局本领，可以构建出差别的网格样式。
https://i-blog.csdnimg.cn/img_convert/91139475aed4facad539d4fcd78863de.png
设置分列方式
Grid的亮点就是用户可以设置分列方式，下面我们学习一下应该怎么分列。
设置行列数量与占比
起首看看效果图
https://i-blog.csdnimg.cn/img_convert/2402e4e18d2dc2cd6284b0848ca379fa.png
Grid提供了rowsTemplate和 columnsTemplate属性，用来设置网格布局的行数，行占比，列数，列占比。他们的值的格式是一个数组，数组的数量即可体现行大概列的数量，数组的内容则代表占比。
上图，构建的是一个三行三列的网格，此中每一行的第二列都是第一行的2倍宽度。以是我们可以如许写。
@Entry
@Component
struct GridItemPage {
@State numberList: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8']
build() {
Stack() {
Grid() {
ForEach(this.numberList, (item:string)=>{
GridItem(){
Text(item)
.backgroundColor(Color.Pink)
}
.backgroundColor(Color.Brown)
}, (item:string)=> item.toString())
}
// 注意中间一定不要有逗号,有逗号，渲染就会出问题。就是空格分开的.
// 另外,展示的数量就是这个行列相乘的数量.即使给定的数据很多,也就会展示这几个元素,且没有滚动交互.
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')
.rowsGap(10)
.columnsGap(10)
}
}
}
https://i-blog.csdnimg.cn/img_convert/f4f3909ab87e8b2c5f3ebede30631d79.png
注意：
当Grid设置了rowsTemplate和columnsTemplate之后，相称于Grid的方向大小已经确定了，以是以下几个不见效
[*]layoutDirection
[*]maxCount
[*]minCount
[*]cellLengh
另外，因为设置了rowsTemplate和columnsTemplate之后，相称于展示的总量已经固定死了，所以Grid的滚动效果也不会被触发，上述界面是不可以滚动的。
构建可滚动的网格布局
https://i-blog.csdnimg.cn/img_convert/b780009504b99841c32ab3caaeb84524.png
可滚动的网格布局，在首页大概某一个紧张的Tab页中用到的是比力多的。这个实现也会用到我们上文讲的 rowsTemplete大概 columnsTemplete，但是利用的时候有个特殊的就是，只用此中一个，系统会因为没有另外一个而造成开放式的这种情况，当内容超出了所能显示的，就会有滚动效果了。
[*]仅仅设置columnsTemplete： 那么就代表列是固定死了， 只能在行上进行发挥，以是滚动是上下滚动，行数随着内容有多少，就会有相应的几行。
[*]仅仅设置rowsTemplete： 那么就代表行已经被固定死了，只能在列进行发挥，以是滚动的时候是左右滚动，列数随着内容有多少，就会有相应的多少列。
@Entry
@Component
struct GridItemPage {
@State numberList: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8']
build() {
Stack() {
Grid() {
ForEach(this.numberList, (item:string)=>{
GridItem(){
Text(item)
.backgroundColor(Color.Pink)
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
}, (item:string)=> item.toString())
}
// 注意中间一定不要有逗号,就是空格分开的.
// 另外,展示的数量就是这个行列相乘的数量.即使给定的数据很多,也就会展示这几个元素,且没有滚动交互.
.rowsTemplate('1fr 1fr')
// .columnsTemplate('1fr 2fr 1fr')
.rowsGap(10)
.columnsGap(10)
.width('100%')
.height('auto')
}
.width('100%')
.height(200)
}
}
https://i-blog.csdnimg.cn/img_convert/35f5073e1f0d7427c4457761a3a5403f.png
可以观察下此时的排布，是纵向排布的！我们在写代码的时候注意下排布方向。
不均匀网格布局
https://i-blog.csdnimg.cn/img_convert/5cda63e6c0b54601919568e58e358962.png
我们可以通过创建Grid组件时传入GridLayoutOptions实现上图所示的，单个网格高出多行多列的场景，设置方式如下：
layoutOptions: GridLayoutOptions = {
regularSize: ,
onGetRectByIndex: (index: number) => {
if (index == key1) { // key1是“0”按键对应的index
return ; // 格式
} else if (index == key2) { // key2是“=”按键对应的index
return ;
}
// ...
// 这里需要根据具体布局返回其他item的位置
}
}
Grid(undefined, this.layoutOptions) {
// ...
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr') 格式解说
[*]rowStart 当前元素起始行号
[*]columStart 当前元素实在列号
[*]rowSpan 当前元素占用的行数
[*]columSpan 当前元素占用的列数
如果一个onGetRectByIndex回调，返回的结果是 也就是告知，在布局第6排第0列的数据时，它要站一行，两列的大小。
就像下方的计算器，0 的位置，就可以这么描述。
https://i-blog.csdnimg.cn/img_convert/271a9bdd887c919a8ecef4c6831c0c2b.png
设置主轴方向
如果不做了解的话，我们大概会有一个迷惑。就是网格布局的主轴方向，有必要么？它会影响什么呢？ 答案是影响排布次序。如图所示。
https://i-blog.csdnimg.cn/img_convert/3a3d561773a112e7d3fa2acc6f7b144a.png
https://i-blog.csdnimg.cn/img_convert/49c91458d775f5585506821fa127b23b.png
Grid设置主轴方向的属性是layoutDirection， 同时要搭配 maxCountminCount来利用
[*]layoutDirection 设置主轴方向。
[*]maxCount： 主轴方向最大可以排几个格。
[*]minCount： 主轴方向最小可以排几个格。
Grid() {
// ...
}
.maxCount(3)
.layoutDirection(GridDirection.Row) 分析
[*]layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时见效，此时元素在layoutDirection方向上分列。
[*]仅设置rowsTemplate时，Grid主轴为水平方向，交叉轴为垂直方向。
[*]仅设置columnsTemplate时，Grid主轴为垂直方向，交叉轴为水平方向。
上文可见，Grid在这种情况下，子组件的数量大概是变更的，以是约束了行大概列的铺排形式。相称于开放式布局。以是我们在约束的时候最好给一个最大可以排几个格子这种值。
设置行列间距
这个很简单，就是columnsGap列间距， rowsGap行间距。
https://i-blog.csdnimg.cn/img_convert/0fc7a3a94dbc63ab9c1c272f93c1cf7f.png
Grid() {
// ...
}
.columnsGap(10)
.rowsGap(15)
控制滚动位置
与消息列表返回到顶部比力相似，滚动位置功能在网格布局中也比力常用，比如日历中的翻页功能。
https://i-blog.csdnimg.cn/img_convert/eaafc2c75368b44c26ceb226c218dc32.png
实现方式，我们记住，凡是滚动控制，都离不开滚动控制器。我们在用系统组件的时候，但凡遇到滚动控制的时候都应该向这个方向来考虑。只是详细的控制器范例有区别，控制的内容细节有区别。套路是大差不差的。在这个案例中我们也是，在Grid构建的时候就会传入一个Scroller。这个跟List是一样的。
@Entry
@Component
struct GridItemPage {
private gridScroller:Scroller = new Scroller()
@State numberList: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8']
build() {
Column(){
Grid(this.gridScroller) {
ForEach(this.numberList, (item:string)=>{
GridItem(){
Text(item)
.backgroundColor(Color.Pink)
}
.width(100)
.height(100)
.backgroundColor(Color.Brown)
}, (item:string)=> item.toString())
}
// 注意中间一定不要有逗号,就是空格分开的.
// 另外,展示的数量就是这个行列相乘的数量.即使给定的数据很多,也就会展示这几个元素,且没有滚动交互.
.rowsTemplate('1fr 1fr')
// .columnsTemplate('1fr 2fr 1fr')
.rowsGap(10)
.columnsGap(10)
.width('100%')
.height('30%')
Row(){
Button("上一页")
.width(100)
.height('wrap')
.onClick(()=>{
this.gridScroller.scrollPage({
next: false
})
})
Button("下一页")
.width(100)
.height('wrap')
.onClick(()=>{
this.gridScroller.scrollPage(
{next: true}
)
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceEvenly)
.margin({top: 20})
}
}
}
Grid性能优化-懒加载
这个也就是和List的优化方式如出一辙，就是设置懒加载，然后设置加载数量。
Grid() {
LazyForEach(this.dataSource, () => {
GridItem() {
}
})
}
.cachedCount(3) 属性互斥关系及注意事项总结
https://i-blog.csdnimg.cn/img_convert/44fd73d6f9326c76fbb988fe349e2c43.jpeg
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]