You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.28 21:48:02