在HarmonyOS NEXT开发中binsheet拉起UIExtension时，有什么办法仅让文本滚动，bindSheet页面高度保持？

Question

在HarmonyOS NEXT开发中binsheet拉起UIExtension时，UIAbility中用了TextArea组件显示长文本。滚动文本时，bindsheet页面也会跟随下滑，有什么办法仅让文本滚动，bindSheet页面高度保持？尝试不用UIExtension，直接bindSheet拉起页面布局，此时TextArea组件可以滚动显示文本，bindSheet页面保持高度不受影响。
为什么用UIExtension就会导致bindSheet页面和TextArea文本同时滚动的bug
拉起方：

import prompt from '@ohos.prompt' 
import { Button } from '@ohos.multimodalInput.mouseEvent'; 
@Entry 
@Component 
struct Second { 
  @State message1: string = '大江东去，浪淘尽，千古风流人物。故垒西边，人道是：三国周郎赤壁。乱石崩云，惊涛裂岸，卷起千堆雪。江山如画，一时多少豪杰。' 
  @State visible: Visibility = Visibility.Hidden 
  private proxy: UIExtensionProxy | null = null; 
  @State isShow:boolean = false 
  @Builder myBuilder() { 
    Column() { 
      UIExtensionComponent({ 
        bundleName : "com.example.controllablebuildcomponent", 
        abilityName: "UIExtensionProvider", 
        parameters: { 
          "ability.want.params.uiExtensionType": "sys/commonUI" 
        } 
      }) 
        .width('98%') 
        .height('98%') 
        .onResult((data)=>{ 
          console.log("fengsumei: onResult data : " + JSON.stringify(data)) 
        }) 
        .onRelease((code)=>{ 
          console.log("release code : " + code) 
        }) 
        .onReceive((data) => { 
          console.log("onReceive data : " + JSON.stringify(data)) 
        }) 
        .onRemoteReady((proxy) => { 
          console.info('onRemoteReady, for test') 
          this.proxy = proxy 
          this.proxy.off("asyncReceiverRegister"); 
        }) 
      // .hitTestBehavior(HitTestMode.None) 
    } 
    .width('100%') 
  } 
 
  build() { 
    Row() { 
      Column() { 
        Text(this.message1) 
          .fontSize(20) 
          .margin(20) 
          .copyOption(CopyOptions.InApp) 
          .onClick((event?: ClickEvent) => { 
            console.log("fengsumei: ClickEvent!") 
          }) 
          .textMenuOptions([{content:"Creative",action:(selectContent: string)=>{ 
            console.log("selectContent: " + selectContent) 
            this.isShow = true 
          }}]) 
          .bindSheet($$this.isShow, this.myBuilder(),{ 
            showClose: false, 
            shouldDismiss:((sheetDismiss: SheetDismiss)=> { 
              console.log("bind sheet shouldDismiss") 
              sheetDismiss.dismiss() 
            }), 
          }) 
      } 
      .width('100%') 
      .height('100%') 
    } 
    .height('100%') 
  } 
}

被拉起的应用中有问题的界面代码：

Tabs({ barPosition: BarPosition.End, controller: this.tabsController, index: this.currentIndex }) { 
  TabContent() { 
    TextArea({ 
      text: this.textResult, 
      controller: this.textAreaController 
    }) 
      .width('100%') 
      .height('100%') 
      .fontSize(16) 
      .fontColor('#182431') 
      .backgroundColor('#FFFFFF') 
      .copyOption(CopyOptions.LocalDevice) 
      .lineSpacing(LengthMetrics.px(20)) 
      .letterSpacing(2) 
      .onChange((value: string) => { 
        this.textResult = value 
      }) 
      .onTouch((event: TouchEvent)=>{ 
        console.debug(TAG, "TextArea Touch!") 
        // event.stopPropagation() 
      }) 
      .onContentScroll(()=>{ 
        console.debug(TAG, "TextArea content scroll!") 
      }) 
  } 
  .backgroundColor('#FFFFFF') 
  .borderRadius(15) 
  .margin({ left: 2, right: 2 }) 
 
  TabContent() { 
    TextArea({ 
      text: 'this.textResult 222', 
      controller: this.textAreaController 
    }) 
      .width('100%') 
      .height('100%') 
      .fontSize(16) 
      .fontColor('#182431') 
      .backgroundColor('#FFFFFF') 
      .copyOption(CopyOptions.LocalDevice) 
      .lineSpacing(LengthMetrics.px(20)) 
      .letterSpacing(2) 
      .onChange((value: string) => { 
        // this.textResult = value 
      }) 
  } 
  .backgroundColor('#FFFFFF') 
  .borderRadius(15) 
  .margin({ left: 2, right: 2 }) 
 
  TabContent() { 
    TextArea({ 
      text: 'this.textResult 333', 
      controller: this.textAreaController 
    }) 
      .width('100%') 
      .height('100%') 
      .fontSize(16) 
      .fontColor('#182431') 
      .backgroundColor('#FFFFFF') 
      .copyOption(CopyOptions.LocalDevice) 
      .lineSpacing(LengthMetrics.px(20)) 
      .letterSpacing(2) 
      .onChange((value: string) => { 
        // this.textResult = value 
      }) 
  } 
  .backgroundColor('#FFFFFF') 
  .borderRadius(15) 
  .margin({ left: 2, right: 2 }) 
} 
.vertical(false) 
.barHeight(0) 
.onChange((index: number) => { 
  this.currentIndex = index 
  if (index == 0) { 
    this.previousSource = $r('app.media.ic_arrow_previous_off') 
    this.nextSource = $r('app.media.ic_arrow_next_on') 
  } else if (index == this.totalPageNums - 1) { 
    this.previousSource = $r('app.media.ic_arrow_previous_on') 
    this.nextSource = $r('app.media.ic_arrow_next_off') 
  } else { 
    this.previousSource = $r('app.media.ic_arrow_previous_on') 
    this.nextSource = $r('app.media.ic_arrow_next_on') 
  } 
}) 
.scrollable(true) 
.width('85%') 
.height('85%') 
.animationDuration(400)

Answer 1

你可以在bindSheet里面套一个Scroll，这种情况下半模态的高度不变，内容会向下滑动。