HarmonyOS 鸿蒙Next calc 计算组件高度无效
HarmonyOS 鸿蒙Next calc 计算组件高度无效
一个Column里面有两个组件，第二个组件设置calc无效。 这样的布局Grid一定会超过屏幕，滚动到底部，还有部分是在屏幕外，代码如下
import PrivacyItem1 from '../widgets/PrivacyItem1';
import { PrivacyItemView1 } from '../widgets/PrivacyItemView1';
import { common } from '@kit.AbilityKit';
let context = getContext(this) as common.UIAbilityContext;
@Entry
@Component
struct TestPage {
@State privacyList: PrivacyItem1[] =
[{ selected: false, path: '1' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }, { selected: false, path: '2' }, { selected: false, path: '3' },
{ selected: false, path: '4' }];
@State editMode: boolean = true;
@State selectAll: boolean = false;
build() {
Column() {
RelativeContainer() {
Button(this.selectAll ? 'clean selected' : 'select all').onClick((event) => {
this.selectAll = !this.selectAll;
context.eventHub.emit('selectAll', this.selectAll);
})
}.id('button').width('100%').height(60).backgroundColor(0x787878)
Grid() {
ForEach(this.privacyList, (item: PrivacyItem1, i) => {
GridItem() {
PrivacyItemView1({
data: item,
editMode: this.editMode,
onSelectChange: (pi: PrivacyItem1, selected: boolean) => {
pi.selected = selected;
},
onItemClick: (pi: PrivacyItem1) => {
}
})
}
})
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.cachedCount(6)
.margin(5)
.size({ height: 'calc(100%-300vp)', width: '100%' })
}.size({ width: '100%', height: '100%' })
}
}
``` ```
import PrivacyItem1 from './PrivacyItem1';
import { common } from '@kit.AbilityKit';
let context = getContext(this) as common.UIAbilityContext;
@Component
export struct PrivacyItemView1 {
private itemWidth = 120;
@Link editMode: boolean;
@State data: PrivacyItem1 = { selected: false, path: '' };
private onSelectChange: ((pi: PrivacyItem1, selected: boolean) => void) | undefined;
private onItemClick: ((pi: PrivacyItem1) => void) | undefined;
@State selected: boolean = false;
aboutToAppear(): void {
context.eventHub.on('selectAll', this.selectAllEvent)
}
selectAllEvent = (isOn: boolean) => {
this.selected = isOn;
}
aboutToDisappear(): void {
context.eventHub.off('selectAll');
}
build() {
RelativeContainer() {
Text(this.data.path)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center },
})
if (this.editMode && this.selected) {
Row() {
Image($r('app.media.select')).width(40)
}.width(this.itemWidth).height(this.itemWidth).backgroundColor(0x80000000).justifyContent(FlexAlign.Center)
}
}
.width(this.itemWidth)
.height(this.itemWidth)
.border({ width: 1, color: $r('app.color.lightGrey'), radius: 6 })
.onClick((event) => {
if (this.editMode) {
this.selected = !this.selected;
if (this.onSelectChange != undefined) {
this.onSelectChange(this.data, this.selected);
}
} else {
if (this.onItemClick != undefined) {
this.onItemClick(this.data);
}
}
})
}
}
``` ``` @
Observed
export default class PrivacyItem1 {
selected: boolean = false;
path: string = '';
}
更多关于HarmonyOS 鸿蒙Next calc 计算组件高度无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
3 回复
可尝试用scroll包裹全部组件，然后在grid组件下面加一个空组件，示例如下：
build() {
Scroll() {
Column() {
RelativeContainer() {
Button(this.selectAll ? 'clean selected' : 'select all').onClick((event) => {
this.selectAll = !this.selectAll;
context.eventHub.emit('selectAll', this.selectAll);
})
}.id('button').width('100%')
.height(60).backgroundColor(0x787878)
Grid() {
ForEach(this.privacyList, (item: PrivacyItem1, i) => {
GridItem() {
PrivacyItemView1({
data: item,
editMode: this.editMode,
onSelectChange: (pi: PrivacyItem1, selected: boolean) => {
pi.selected = selected;
},
onItemClick: (pi: PrivacyItem1) => {
}
})
}
})
}
.columnsTemplate('1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.cachedCount(6)
.margin(5)
// .size({ height: 'calc(100%-300vp)', width: '100%' })
Column() {
}
.width('100%')
.height('300vp')
}
}
}
更多关于HarmonyOS 鸿蒙Next calc 计算组件高度无效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中，Next calc 计算组件高度无效的问题通常与布局管理和组件属性设置有关。以下是一些可能的原因和解决方案：
-
布局容器限制：检查组件所在的布局容器（如DirectionLayout、GridLayout等）是否有高度限制或固定高度设置。如果容器高度被固定或限制，子组件（包括Next calc）的高度调整可能会失效。
-
组件自身属性：确认Next calc组件是否有设置固定高度或高度权重。如果设置了固定高度，则高度无法动态调整；如果高度权重设置不当，也可能影响高度计算。
-
布局刷新问题：在某些情况下，布局可能不会立即刷新以反映新的高度设置。尝试调用相关API触发布局重新计算，如
invalidate()或requestLayout()。 -
版本兼容性问题：检查所使用的HarmonyOS版本和组件库版本是否兼容。有时版本更新会引入新的布局算法或修复旧问题。
-
其他样式干扰：检查是否有其他CSS样式（如margin、padding、border等）影响组件的高度计算。
如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。
