HarmonyOS 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%')
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.

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

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)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
HarmonyOS
2024-12-18 16:51:54
364浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
shlp

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

分享
微博
QQ
微信
回复
2024-12-18 17:54:58


相关问题
Text文本过长如何实现上下滚动
1221浏览 • 1回复 待解决
webviewController的loadData无法显示长文本
2172浏览 • 1回复 待解决
长文字如何滚动显示
2110浏览 • 1回复 待解决
如何获取文本显示宽度和高度
934浏览 • 1回复 待解决
HarmonyOS 单行超长文本换行不生效
382浏览 • 1回复 待解决
HarmonyOS bindSheet高度异常
760浏览 • 1回复 待解决