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)
  }
}

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))
HarmonyOS
2天前
浏览
收藏 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
          }
        })
      //...
    }
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS如何禁止页面左右滑动返回
945浏览 • 1回复 待解决
键盘拉起时列表无法上下滑动
2165浏览 • 1回复 待解决
服务卡片可以响应上下滑动操作吗?
6916浏览 • 2回复 待解决
tabs组件 左右滑动延迟较高
1090浏览 • 1回复 待解决
HarmonyOS Tabs和Web嵌套左右滑动问题
347浏览 • 1回复 待解决
HarmonyOS 如何实现滑动监听?
442浏览 • 1回复 待解决