HarmonyOS 通过子组件调用父组件方法修改父组件的值后,如何显示以及动态刷新父组件bindsheet标题栏的UI
父组件里用的bindsheet组件有个标题栏需要根据子组件滑动页面里的某个值,做到动态变化显示,
但是当前情况是日志打印可以看到刷新函数里的值获取到新的,父组件的文字却没有显示(只有按钮显示了,文字一直是空白),没有滑动子组件时:
父组件:
class TitleBuildParams {
tileDisplayName: string = "";
}
const TAG = 'ParentView';
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
@State parentSheetShow: boolean = false;
@State mParentDisplayName: string = '';
private updateDescription(formItem: string): void {
this.mParentDisplayName = formItem;
this.message = formItem;
console.log(`onChange parent: ${this.mParentDisplayName}`);
}
@Builder
bindSheetBuilder() {
Column() {
ChildComponent({
mDisplayController: this.updateDescription
})
}
.height(230)
}
@Builder
titleAllBuilder() {
this.titleBuilder({tileDisplayName: this.mParentDisplayName});
}
@Builder
titleBuilder($$: TitleBuildParams) {
Row() {
Button() {
Image($r('sys.media.ohos_ic_compnent_titlebar_back'))
.width(24)
.height(24)
.fillColor($r('sys.color.ohos_id_color_titlebar_text'))
.draggable(false)
}
.width(40)
.height(40)
.backgroundColor($r('sys.color.ohos_id_color_button_normal'))
.onClick(() => {
this.parentSheetShow = false;
})
Blank().width(8).visibility(Visibility.Hidden);
//该处需要绑定显示动态刷新的值
Text($$.tileDisplayName)
.id(`${TAG}_Text_title`)
.draggable(false)
.fontColor($r('sys.color.ohos_id_color_text_primary'))
.fontSize($r('sys.float.ohos_id_text_size_headline8'))
.fontWeight(FontWeight.Bold)
.lineHeight(30)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.textAlign(TextAlign.Start)
}
.width('100%')
.height('100%')
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
}
build() {
RelativeContainer() {
Text(this.message)
.id('HelloWorld')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Top },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
Button().width(30).height(30)
.onClick((event) => {
console.log("click button")
this.parentSheetShow = true;
})
Stack().bindSheet($$this.parentSheetShow, this.bindSheetBuilder(), {
title: this.titleAllBuilder(),
width: 300,
showClose: true,
dragBar: false,
blurStyle: BlurStyle.COMPONENT_ULTRA_THICK,
backgroundColor: Color.Transparent,
detents: [, 0],
mode: SheetMode.EMBEDDED,
onAppear: () => {
console.log('Parent bindSheet onAppear');
},
onDisappear: () => {
console.log(`Parent bindsheet onDisappear`);
this.parentSheetShow = false;
}
})
}
.height('100%')
.width('100%')
}
}
子组件:
@Component
export default struct ChildComponent {
private mDisplayController?: (formItem: string) => void = () => {};
private mDisplayList : string[]= [];
aboutToAppear(): void {
this.mDisplayList = ["111", "222", "333"];
}
build() {
Column() {
Swiper() {
ForEach(this.mDisplayList, (displayName: string, item: number) => {
Column() {
Text(displayName).fontSize(12).width(40).height(40)
}.height(200).width('100%')
}, (item: string, index: number): string => {
return `${this.mDisplayList.length}${index}`;
})
}
.onChange((index: number) => {
//子组件有一个swiper切换index时,调用父组件的函数更新父组件的值
if (this.mDisplayController != undefined && this.mDisplayList.length > index) {
console.log(`onChange child: ${this.mDisplayList[index]}`);
this.mDisplayController(this.mDisplayList[index]);
}
})
}
}
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
父组件调用子组件的方法
1293浏览 • 1回复 待解决
HarmonyOS 子组件被父组件包装后,如何通过父组件设置子组件的属性
558浏览 • 1回复 待解决
子组件调用父组件里的方法
338浏览 • 1回复 待解决
HarmonyOS 子组件调用父组件的方法demo
39浏览 • 1回复 待解决
HarmonyOS 父组件怎么调用子组件的方法
81浏览 • 1回复 待解决
HarmonyOS 父组件如何调用子组件的方法?
400浏览 • 0回复 待解决
HarmonyOS 父组件调用子组件方法
28浏览 • 1回复 待解决
HarmonyOS 父组件如何响应子组件内的事件方法 ,子组件如何响应父组件内的事件方法?
387浏览 • 1回复 待解决
HarmonyOS 父组件如何调用子组件里的方法
41浏览 • 1回复 待解决
HarmonyOS 子组件中点击事件交给父组件处理,在父组件种修改数据后子组件不刷新
486浏览 • 1回复 待解决
HarmonyOS 子组件响应父组件的事件方法
324浏览 • 1回复 待解决
HarmonyOS 关于子组件调用父组件方法的问题
1088浏览 • 1回复 待解决
HarmonyOS 如何在父组件中调用子组件的方法
67浏览 • 1回复 待解决
如何在父组件中调用子组件封装的方法
1638浏览 • 1回复 待解决
开源鸿蒙中 ets子组件调用父组件中的方法?
5721浏览 • 1回复 待解决
HarmonyOS 组件模块化, 父组件如何调用子组件类的方法?
14浏览 • 1回复 待解决
怎么把子组件的方法暴露给父组件调用?
283浏览 • 1回复 待解决
HarmonyOS 子组件如何触发父组件中的方法
22浏览 • 1回复 待解决
HarmonyOS 父组件如何触发子组件内定义的方法
74浏览 • 1回复 待解决
设置子组件的宽度不超出父组件
644浏览 • 1回复 待解决
子组件的事件可以传到父组件吗
697浏览 • 1回复 待解决
父组件中定义的方法如何传递给子组件
394浏览 • 1回复 待解决
弹窗组件调用父组件函数传递
1061浏览 • 1回复 待解决
已达到效果,在父组件中创建子组件时,换调用方式