使用仪表图显示实时数据变化,但指针不会随着值的变化而更新,它只显示第一个值。
analytics.dart
import 'package:my_app/widgets/charts/gauge.dart';
// class _AnalyticsPageState extends State<AnalyticsPage> {
@override
void initState() {
super.initState();
_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
_liveCurrent = randomNumber(dValue: true);
_liveVoltage = randomNumber();
});
}
// usage
return Gauge(
title: 'Voltage',
pointer: _liveVoltage,
minValue: 0,
maxValue: 150,
scales: [
GaugeRange(
startValue: 0,
endValue: 50,
color: Colors.green,
),
GaugeRange(
startValue: 50,
endValue: 100,
color: Colors.orange,
),
GaugeRange(
startValue: 100,
endValue: 150,
color: Colors.red,
)
],
),
图表在
my_app/widgets/charts/gauge.dart
中定义
class Gauge extends StatefulWidget {
final String? title;
final List<GaugeRange> scales;
final double pointer;
final double minValue;
final double maxValue;
const Gauge({
Key? key,
this.title,
required this.scales,
this.pointer = 0,
this.minValue = 0,
this.maxValue = 100
}) : super(key: key);
@override
State<Gauge> createState() => _GaugeState();
}
class _GaugeState extends State<Gauge> {
Widget _getRadialGauge() {
return SfRadialGauge(
title: GaugeTitle(
text: widget.title!,
textStyle: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold
)
),
axes: <RadialAxis>[
RadialAxis(
minimum: widget.minValue,
maximum: widget.maxValue,
ranges: widget.scales,
pointers: <GaugePointer>[
NeedlePointer(
value: widget.pointer
)
],
annotations: <GaugeAnnotation>[
GaugeAnnotation(
widget: Text(
widget.pointer.toStringAsFixed(2),
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold
)
),
angle: 90,
positionFactor: 0.5
)
]
)
]
);
}
@override
Widget build(BuildContext context) {
return _getRadialGauge();
}
}
我想让
widget.pointer
值动态化,并在父窗口小部件中更改值时更改指针Analytics
.