flutter - 如何在颤动中制作多色表?
解决方案
你可以使用这个包:
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)
], )
]
)
推荐阅读
- python - SQLAlchemy - 依赖于外部系统的属性
- r - 安装 R 包时设置 C 依赖位置
- docker - Hyperledger Fabric 对等容器未出现
- javascript - 如何将逐步键和值添加到三个不同的选择选项值
- symfony - 将 Twig 全局变量导入 symfony 控制器
- world-of-warcraft - 客户端卡在“身份验证”阶段
- apache-spark - Apache Spark 不使用来自 Hive 分区外部表的分区信息
- rust - 如何使用 rust 语言在图像中绘制矩形
- ruby-on-rails - 如何消除这个 n+1 查询?
- reactjs - 具有动态主题值的 Google Recaptcha 组件 - Next.js