SyncFusion颤振仪

Question

我目前使用的是SyncFusion颤动径向测量仪。我已经分配了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属性将标题放在仪表的正上方。默认情况下，gauge位于可用尺寸的中心，因为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),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

此外，您可以使用文本小部件添加标题，而不是使用GaugeTitle。根据需要排列文本小部件和指向Stack小部件的SfRadialGauge。

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

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