SyncFusion Flutter Radial Gauge如何将GaugeTitle移动到仪表盘正上方
SyncFusion Flutter Radial Gauge 标题位置调整方案
要实现标题显示在仪表盘正上方,有两种常用实现方式,可根据需求选择:
方案1:外部自定义标题(推荐,灵活度最高)
自带的GaugeTitle默认定位在整个SfRadialGauge组件的顶部,无法直接调整偏移量,直接在外部用Column组合标题和仪表盘组件是最容易控制位置的方式。
修改后的代码如下:
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( appBar: AppBar( backgroundColor: Colors.green, title: Text( 'Speedometer', style: Theme.of(context).textTheme.headline6, ), ), body: Center( // 用Column组合标题和仪表盘 child: Column( mainAxisSize: MainAxisSize.min, children: [ // 自定义标题,可通过调整padding控制和仪表盘的间距 const Padding( padding: EdgeInsets.only(bottom: 8), child: Text( 'Speed Level', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500), ), ), // 移除原来的GaugeTitle配置 SfRadialGauge( enableLoadingAnimation: true, axes: <RadialAxis>[ RadialAxis( pointers: <GaugePointer>[ NeedlePointer(value: 90, enableAnimation: true), ], annotations: <GaugeAnnotation>[ GaugeAnnotation( widget: const Text( '90.0', style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.bold), ), positionFactor: 0.5, angle: 90), ], ), ], ), ], ), ), ), ); } }
方案2:使用仪表盘注释作为标题
如果你希望标题和仪表盘组件完全绑定,也可以在RadialAxis的annotations里新增一个标题注释,调整负的positionFactor让它显示在仪表盘上方:
核心修改点:
- 移除原来的
GaugeTitle配置 - 在
annotations数组里新增如下配置:
GaugeAnnotation( widget: const Text( 'Speed Level', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500), ), // 负数值代表在径向轴外侧上方,可自行调整数值控制上下位置 positionFactor: -0.2, angle: 90, )
内容的提问来源于stack exchange,提问作者user58653
相关产品推荐
相关产品推荐

