自定义组件onMeasureSize的使用

如何在定义自定义组件长度是100%,宽度不定义的条件下,通过重写自定义组件的onMeasureSize方法实现展示出来的组件长度是宽度2倍。

HarmonyOS
2024-10-08 13:11:12
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

demo如下:

创建一个GlobalContext.ets,GlobalContext.ets中代码如下:

export class GlobalContext {  
  private constructor() {  
  }  
  private static instance: GlobalContext;  
  private _objects = new Map<string, Object>();  
  public static getContext(): GlobalContext {  
    if (!GlobalContext.instance) {  
      GlobalContext.instance = new GlobalContext();  
    }  
    return GlobalContext.instance;  
  }  
  getObject(value: string): Object | undefined {  
    return this._objects.get(value);  
  }  
  setObject(key: string, objectClass: Object): void {  
    this._objects.set(key, objectClass);  
  }  
}

在EntryAbility.ets文件中的onWindowStageCreate方法中的windowStage.loadContent前添加如下代码:

let windowClass:window.Window = windowStage.getMainWindowSync();      
 GlobalContext.getContext().setObject('windowClass',windowClass)

在pages包下的Index.ets文件中编写如下代码:

import { window } from '@kit.ArkUI';  
import { GlobalContext } from './GlobalContext'  
@Entry  
@Component  
struct Index {  
  @State windowWidth: number = 0;  
  aboutToAppear(): void {  
    let windowClass: window.Window = GlobalContext.getContext().getObject('windowClass') as window.Window;  
    let rect: window.Rect = windowClass.getWindowProperties().windowRect;  
    this.windowWidth = px2vp(rect.width);  
  }  
  build() {  
    Column() {  
      CustomLayout({ builder: ColumnChildren, windowWidth: this.windowWidth })  
    }  
  }  
}  
@Builder  
function ColumnChildren() {  
  ForEach([1], (index: number) => {  
    Text('S' + index)  
      .fontSize(30)  
      .height('100%')  
      .borderWidth(2)  
      .offset({ x: 10, y: 20 })  
  })  
}  
@Component  
struct CustomLayout {  
  @Builder  
  doNothingBuilder() {  
  };  
  @BuilderParam builder: () => void = this.doNothingBuilder;  
  @State startSize: number = 100;  
  @Prop windowWidth: number;  
  result: SizeResult = {  
    width: 0,  
    height: 0  
  };  
  onMeasureSize(selfLayoutInfo: GeometryInfo, children: Array<Measurable>, constraint: ConstraintSizeOptions) {  
    let size = this.windowWidth/6;  
    children.forEach((child) => {  
      let result: MeasureResult = child.measure({  
        minHeight: size * 2,  
        minWidth: size,  
        maxWidth: size,  
        maxHeight: size * 2  
      })  
    })  
    this.result.width = size;  
    this.result.height = size * 2;  
    return this.result;  
  }  
  build() {  
    this.builder()  
  }  
}
分享
微博
QQ
微信
回复
2024-10-08 17:37:44
相关问题
自定义组件使用@ObjectLink报错
1125浏览 • 1回复 待解决
自定义组件嵌套子组件
9425浏览 • 3回复 待解决
自定义组件使用watch监听
409浏览 • 1回复 待解决
HarmonyOS如何自定义组件Controller?
248浏览 • 1回复 待解决
HarmonyOS 使用自定义字体
166浏览 • 1回复 待解决
自定义装饰器使用问题
739浏览 • 1回复 待解决
ArkTs如何自定义容器组件
3041浏览 • 1回复 待解决
如何自定义组件原型菜单
835浏览 • 1回复 待解决
如何自定义模拟Tabs组件
846浏览 • 1回复 待解决
自定义弹窗自定义转场动画
1064浏览 • 1回复 待解决
HarmonyOS 自定义组件问题
318浏览 • 1回复 待解决
Grid组件scrollBar是否支持自定义
2164浏览 • 1回复 待解决
自定义弹窗如何嵌套使用
1587浏览 • 1回复 待解决
自定义弹窗使用相关问题
870浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人