微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在颤振中制作多色仪表?

如何解决如何在颤振中制作多色仪表?

如何在Flutter应用中制作这种类型的仪表?

Image

解决方法

检查这个库:- fl_chart

它具有所有图表和图形,您可以根据需要对其进行自定义

,

你可以使用这个包: syncfusion_flutter_gauges 然后在你的 dart 文件中导入这个包:

import 'package:syncfusion_flutter_gauges/gauges.dart';

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SfRadialGauge(),),);
  }

普通径向滑块 要创建一个普通的径向滑块,我们需要禁用 RadialAxis 类中的标签和刻度属性,并根据我们的设计需要在最小和最大属性中设置轴范围值。

要显示 100% 的进度,我们需要将轴的最小值定义为 0,将最大值定义为 100,如下面的代码示例所示。

SfRadialGauge(
    axes: <RadialAxis>[
      RadialAxis(minimum: 0,maximum: 100,showLabels: false,showTicks: false,axisLineStyle: AxisLineStyle(
              cornerStyle: CornerStyle.bothCurve,color: Colors.white30,thickness: 25),)
    ]
)

范围指针将是轨道,标记指针将是径向滑块的拇指。您还可以为范围指针设置渐变,如下面的代码示例所示。

SfRadialGauge(
    axes: <RadialAxis>[
      RadialAxis(
          pointers: <GaugePointer>[
            RangePointer(
                value: 50,cornerStyle: CornerStyle.bothCurve,width: 25,sizeUnit: GaugeSizeUnit.logicalPixel,gradient: const SweepGradient(
                    colors: <Color>[
                      Color(0xFFCC2B5E),Color(0xFF753A88)
                    ],stops: <double>[0.25,0.75]
                )),MarkerPointer(
                value: 50,enableDragging: true,markerHeight: 34,markerWidth: 34,markerType: MarkerType.circle,color: Color(0xFF753A88),borderWidth: 2,borderColor: Colors.white54)
          ],)
    ]
)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。