HarmonyOS 能否提供一个demo,想实现柱状图且能控制是否滑动

因项目中有多处使用柱状图的地方,但是感觉目前感觉三方距如MPChart,v-chart使用起来很复杂,或者是不能满足需求,能否提供一个demo,想实现柱状图且能控制是否滑动

HarmonyOS
20h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

通过@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
微信
回复
18h前
相关问题
HarmonyOS 柱状图实现
41浏览 • 1回复 待解决
HarmonyOS 关于柱状图,环形的绘制
33浏览 • 1回复 待解决
HarmonyOS能否提供一个NFC识别的demo
430浏览 • 1回复 待解决
能否提供一个关于SM3加密的demo
697浏览 • 1回复 待解决
HarmonyOS List滑动速度是否控制
318浏览 • 1回复 待解决
能否提供一个SM3加密案例
623浏览 • 1回复 待解决
提供一个关于地图组件使用的小demo
592浏览 • 1回复 待解决
如何实现一个GIF显示指定次数
2127浏览 • 1回复 待解决