SyncFusion 颤振仪

Question

我目前正在使用 SyncFusion Flutter Radial Gauge。我已经分配了 GaugeTitle，它出现在屏幕的顶部。我想知道如何将它向下移动，以便它可以出现在仪表的正上方。这是我的代码：

class _MyHomePageState extends State<MyHomePage> {
    @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(
            'Speedometer',
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
        body: Center(
          child: SfRadialGauge(
              title: GaugeTitle(
                  text: 'Speed Level', alignment: GaugeAlignment.center),
              enableLoadingAnimation: true,
              axes: <RadialAxis>[
                RadialAxis(
                  pointers: <GaugePointer>[
                    NeedlePointer(value: 90, enableAnimation: true),
                  ],
                  annotations: <GaugeAnnotation>[
                    GaugeAnnotation(
                        widget: Text(
                          '90.0',
                          style: TextStyle(
                              fontSize: 20.0, fontWeight: FontWeight.bold),
                        ),
                        positionFactor: 0.5,
                        angle: 90),
                  ],
                ),
              ]),
        ),
      ),
    );
  }
}

Answer 1

您可以使用 center 属性将标题放在仪表上方。默认情况下，仪表位于可用尺寸的中心，因为 centerX 和 centerY 的默认值为 0.5。现在您可以调整 centerY 值以减少标题和仪表之间的空间。

链接：https://help.syncfusion.com/flutter/radial-gauge/axes

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(
          child: SizedBox(
            height: 500,
            width: 300,
            child: SfRadialGauge(
              title: const GaugeTitle(
                  text: 'Speed Level', alignment: GaugeAlignment.center),
              enableLoadingAnimation: true,
              axes: <RadialAxis>[
                RadialAxis(
                  centerY: 0.3,
                  pointers: <GaugePointer>[
                    const 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),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

此外，您可以使用 Text 小部件添加标题，而不是使用 GaugeTitle。根据您的要求将 Text 小部件和 SfRadialGauge 排列到 Stack 小部件。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text(
            'Speedometer',
            style: Theme.of(context).textTheme.headline6,
          ),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.topCenter,
            children: [
              const Text('Speed Level'),
              Padding(
                padding: const EdgeInsets.only(top: 10.0),
                child: 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),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

您可以将 Text 小部件包装在堆栈中并将其放置在您想要的任何位置。