【Flutter】graphic图表实现tooltip一段时间后自动隐藏

概述

graphic图表中提供了自定义tooltip的事件，可通过selections中on和clear配置手势选项和可识别设备，默认情况下tooltip需要双击隐藏，但这并不符合我们的需求。通过调研发现，若想实现tooltip隔几秒后隐藏，可通过StreamController向chart发送订阅流事件隐藏，这感觉更像是局部刷新
在这里插入图片描述

实现

import 'dart:async';
import 'package:flutter/material.dart';class ChartWidget extends StatefulWidget {const ChartWidget({super.key});@overrideState<ChartWidget> createState() => _ChartWidgetState();
}class _ChartWidgetState extends State<ChartWidget> {LineChart? callBackValue;//流Stream 控制器final StreamController<LineChart?> _streamController = StreamController();@overridevoid dispose() {//销毁_streamController.close();super.dispose();}@overridevoid initState() {super.initState();//发送消息_streamController.add(初始化数据);}Timer? _timer;// tooltip几秒后自动消失void _hideTooltip(value) {// 如果已经有一个计时器在运行，取消它_timer?.cancel();// 启动一个新的计时器_timer = Timer(const Duration(seconds: 3), () {print('3秒后自动消失');_streamController.add(value);});}// 自定义tooltipList<MarkElement> simpleTooltip(Size size,Offset anchor,Map<int, Tuple> selectedTuples,) {_hideTooltip(图表数据);// 自定义处理....}@overrideWidget build(BuildContext context) {// //接收消息return StreamBuilder<LineChart?>(//绑定Streamstream: _streamController.stream,builder: (BuildContext context, AsyncSnapshot<LineChart?> snapshot) {if (snapshot.data == null) {return const Center(child: CircularProgressIndicator(),);}// 返回chart组件return SingleChildScrollView(child: Center(child: Column(children: <Widget>[Container(padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),child: const Text('Group interactions',style: TextStyle(fontSize: 20),),),Container(margin: const EdgeInsets.only(top: 10),width: 450,height: 200,child: Chart(// 手势事件交互流gestureStream: StreamController<GestureEvent>.broadcast(),// 将接收到的数据赋值给图表datadata: snapshot.data!,// 其他配置....tooltip: TooltipGuide(renderer: simpleTooltip,),)),],),),);},);}
}