From b34de212d5fa8c3fdb8155c0c3143422e27106f8 Mon Sep 17 00:00:00 2001 From: ding_chengjie Date: Thu, 22 Sep 2022 17:30:34 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3GridLayoutHelper=E5=B8=83?= =?UTF-8?q?=E5=B1=80colsSpan=E5=90=88=E5=B9=B6=E5=8D=95=E5=85=83=E6=A0=BC?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=E5=BC=95=E5=8F=91=E7=9A=84=E9=AB=98=E5=BA=A6?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: ding_chengjie --- CHANGELOG.md | 2 ++ entry/package.json | 26 +++++++------- vlayout/package.json | 30 ++++++++-------- .../components/common/GridLayoutHelper.ets | 34 +++++++++++++++++-- .../common/RangeGridLayoutHelper.ets | 22 +++++++++--- 5 files changed, 79 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 80a3ab3..568f682 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,6 @@ ## v1.0.5 +- 解决了GridLayoutHelper布局colsSpan合并单元格属性引发的高度问题 + - 优化了BannerLayoutHelper和SingleLayoutHelper容器高度自适应的实现方式 - 解决了一拖n布局的高度自适应和行列权重的问题 diff --git a/entry/package.json b/entry/package.json index b5368bf..ed8862a 100644 --- a/entry/package.json +++ b/entry/package.json @@ -1,16 +1,16 @@ { - "license": "Apache-2.0", - "devDependencies": {}, - "name": "entry", - "ohos": { - "org": "huawei", - "directoryLevel": "module", - "buildTool": "hvigor" + "license":"Apache-2.0", + "devDependencies":{}, + "name":"entry", + "ohos":{ + "org":"huawei", + "directoryLevel":"module", + "buildTool":"hvigor" }, - "description": "example description", - "repository": {}, - "version": "1.0.5", - "dependencies": { - "@ohos/vlayout": "file:../vlayout" + "description":"example description", + "repository":{}, + "version":"1.0.5", + "dependencies":{ + "@ohos/vlayout":"file:../vlayout" } -} +} \ No newline at end of file diff --git a/vlayout/package.json b/vlayout/package.json index b2e0308..eb1c61b 100644 --- a/vlayout/package.json +++ b/vlayout/package.json @@ -1,23 +1,23 @@ { - "types": "", - "keywords": [ + "types":"", + "keywords":[ "OpenHarmony", "vlayout" ], - "author": "hihope", - "description": "vlayout能够处理列表、网格和其他布局在同一个视图的复杂情况，使用者可以使用已设定好的容器布局组件，也可以在此基础上自定义容器布局组件。", - "ohos": { - "org": "opensource" + "author":"hihope", + "description":"vlayout能够处理列表、网格和其他布局在同一个视图的复杂情况，使用者可以使用已设定好的容器布局组件，也可以在此基础上自定义容器布局组件。", + "ohos":{ + "org":"opensource" }, - "main": "index.ets", - "repository": "https://gitee.com/openharmony-sig/vlayout", - "version": "1.0.5", - "tags": [ + "main":"index.ets", + "repository":"https://gitee.com/openharmony-sig/vlayout", + "version":"1.0.5", + "tags":[ "OpenHarmony", "vlayout" ], - "dependencies": {}, - "license": "Apache-2.0", - "devDependencies": {}, - "name": "@ohos/vlayout" -} + "dependencies":{}, + "license":"Apache-2.0", + "devDependencies":{}, + "name":"@ohos/vlayout" +} \ No newline at end of file diff --git a/vlayout/src/main/ets/components/common/GridLayoutHelper.ets b/vlayout/src/main/ets/components/common/GridLayoutHelper.ets index 26f3cad..ea07710 100644 --- a/vlayout/src/main/ets/components/common/GridLayoutHelper.ets +++ b/vlayout/src/main/ets/components/common/GridLayoutHelper.ets @@ -87,8 +87,8 @@ export struct GRID_LAYOUT { computedSpanCountAndWeights() { if (this.gridInfo.spanCount == undefined && this.gridInfo.weights == undefined) { //列数和列占比集合同时未定义时 - this.gridInfo.spanCount = 1 - this.gridInfo.weights = [100] + this.gridInfo.spanCount = 4 + this.gridInfo.weights = [25, 25, 25, 25] } else if (this.gridInfo.spanCount == undefined && this.gridInfo.weights != undefined) { //列占比集合定义了但列数未定义时 this.gridInfo.spanCount = this.gridInfo.weights.length } else { @@ -187,6 +187,10 @@ export struct GRID_LAYOUT { this.computedRightPadding(rightPadding) this.columnsTemplate = newCols.join(' ') } + let count = Math.ceil(this.vLayoutData.length / this.gridInfo.spanCount) + let rows = [] + rows.push('1fr '.repeat(count)) + this.rowsTemplate = rows.join(' ') } else { console.error(TAG + 'autoExpand false') } @@ -204,7 +208,31 @@ export struct GRID_LAYOUT { } computedRowsTemplate() { - let count = Math.ceil(this.vLayoutData.length / this.gridInfo.spanCount) //行数等于数据源长度除以列数 + let sum = 0 + let temp = 0 + for (let i = 0;i < this.vLayoutData.length; i++) { + if (this.vLayoutData[i].colsSpan > this.gridInfo.spanCount) { //如果合并列大于列数，合并项等于列数 + this.vLayoutData[i].colsSpan = this.gridInfo.spanCount + } else if (this.vLayoutData[i].colsSpan < 1) { //如果合并列小于1，合并项等于1 + this.vLayoutData[i].colsSpan = 1 + } else { + console.info(TAG + 'colsSpan = ' + this.vLayoutData[i].colsSpan) + } + let colsSpan = 0 + if (this.vLayoutData[i].colsSpan == undefined) { + colsSpan = 1 + } else { + colsSpan = this.vLayoutData[i].colsSpan + } + sum = sum + colsSpan + if (temp + colsSpan > this.gridInfo.spanCount) { + sum = sum + this.gridInfo.spanCount - temp + temp = colsSpan + } else { + temp = temp + colsSpan + } + } + let count = Math.ceil(sum / this.gridInfo.spanCount) //获得实际行数 let rows = [] rows.push('1fr '.repeat(count)) //行数为1:1 this.rowsTemplate = rows.join(' ') diff --git a/vlayout/src/main/ets/components/common/RangeGridLayoutHelper.ets b/vlayout/src/main/ets/components/common/RangeGridLayoutHelper.ets index 267ed8f..ee7f2df 100644 --- a/vlayout/src/main/ets/components/common/RangeGridLayoutHelper.ets +++ b/vlayout/src/main/ets/components/common/RangeGridLayoutHelper.ets @@ -87,8 +87,8 @@ export struct RANGEGRID_LAYOUT { computedSpanCountAndWeights() { if (this.gridInfo.spanCount == undefined && this.gridInfo.weights == undefined) { //列数和列占比集合同时未定义时 - this.gridInfo.spanCount = 1 - this.gridInfo.weights = [100] + this.gridInfo.spanCount = 4 + this.gridInfo.weights = [25, 25, 25, 25] } else if (this.gridInfo.spanCount == undefined && this.gridInfo.weights != undefined) { //列占比集合定义了但列数未定义时 this.gridInfo.spanCount = this.gridInfo.weights.length } else { @@ -187,6 +187,10 @@ export struct RANGEGRID_LAYOUT { this.computedRightPadding(rightPadding) this.columnsTemplate = newCols.join(' ') } + let count = Math.ceil(this.vLayoutData.length / this.gridInfo.spanCount) + let rows = [] + rows.push('1fr '.repeat(count)) + this.rowsTemplate = rows.join(' ') } else { console.error(TAG + 'autoExpand false') } @@ -204,9 +208,19 @@ export struct RANGEGRID_LAYOUT { } computedRowsTemplate() { - let count = Math.ceil(this.vLayoutData.length / this.gridInfo.spanCount) + 2 //行数等于数据源长度除以列数 + let lines: number[] = [0] + let columnCount = this.gridInfo.spanCount + for (let item of this.vLayoutData) { + let colsSpan = Math.min(Math.max(item.colsSpan ?? 1, 1), columnCount) + item.colsSpan = colsSpan; + if (lines[lines.length-1] + colsSpan > columnCount) { + lines.push(colsSpan) + } else { + lines[lines.length-1] += colsSpan + } + } let rows = [] - rows.push('1fr '.repeat(count)) //行数为1:1 + rows.push('1fr '.repeat(lines.length)) //行数为1:1 this.rowsTemplate = rows.join(' ') } -- Gitee