HarmonyOS @ohos/MpChart如何实现允许parent左右滑动禁止parent上下滑动

Consulting description:@ohos/MpChart如何实现允许parent左右滑动禁止parent上下滑动 (HitTestMode.Block会阻止LineChart滑动,也会阻止parent上下和左右滑动)

Scenario:

child is LineChart:

build() {
  Column() {
    LineChart({ model: this.line })
      .width(FULL)
      .height(CHART_HEIGHT)
      .hitTestBehavior(HitTestMode.Block)
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

parent is tabs:

@Builder
TabsComponent() {
  // tabs
  Tabs() {
    // weight
    TabContent() {
      Scroll() {
        MineWeightComponent()
          .padding({ top: 1, bottom: 120, })
      }
      .height(FULL)
      .scrollBar(BarState.Off)
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST,
      })
    }
    .tabBar(this.tabBuilder(0, CommonConstants.TAB_NAME_1))
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
HarmonyOS
2024-12-20 17:14:23
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
superinsect

给parent组件添加了.hitTestBehavior(HitTestMode.None),这个属性的效果就是 自身不响应 但是子节点和兄弟节点都还会响应,参开文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-hit-test-behavior-V5

目前替代方案是通过@Provide和@Consume状态管理,在子组件内部捕捉TouchType.Down事件,关闭Tab滑动,让LineChart响应滑动;

滑动结束后恢复Tab的滑动属性,样例代码如下:

// 父组件内:
import { Const } from '../common/constants/CommonConstants';
import { MineWeightComponent } from '../view/MineWeightComponent';
@Entry
@Component
struct TabTest {
  @Provide tabScrollable: boolean = true
  build() {
    RelativeContainer() {
      Tabs() {
        TabContent() {
          Scroll() {
            MineWeightComponent()
          }
          .height(Const.FULL_PERCENT)
          .scrollBar(BarState.Off)
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST,
            scrollBackward: NestedScrollMode.SELF_FIRST,
          })
        }
        .tabBar(this.tabBuilder(0, "TAB_1"))
      }
      // 绑定tabScrollable
      .scrollable(this.tabScrollable)
    }
    .height('100%')
    .width('100%')
  }
}
// 子组件内
@Component
export struct MineWeightComponent {
  @Consume tabScrollable: boolean
  //...
  
  build() {
    Column() {
      LineChart({ model: this.model })
        .width(FULL)
        .height(400)
        .onTouch((event: TouchEvent) => {
          // 通过不同事件,变更父组件Tab的滑动属性
          switch (event.type) {
            case TouchType.Down:
              this.tabScrollable = false
              break
            case TouchType.Cancel:
              this.tabScrollable = true
              break
            case TouchType.Up:
              this.tabScrollable = true
              break
          }
        })
      //...
    }
  }
}
  • 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.
分享
微博
QQ
微信
回复
2024-12-20 19:45:29
相关问题
HarmonyOS如何禁止页面左右滑动返回
1893浏览 • 1回复 待解决
键盘拉起时列表无法上下滑动
2882浏览 • 1回复 待解决
服务卡片可以响应上下滑动操作吗?
7714浏览 • 2回复 待解决
HarmonyOS 如何实现类似match_parent的效果
1146浏览 • 1回复 待解决
HarmonyOS 组件List如何禁止滑动
1394浏览 • 1回复 待解决
HarmonyOS 如何禁止Swipe向某个index滑动
468浏览 • 1回复 待解决
tabs组件 左右滑动延迟较高
1534浏览 • 1回复 待解决