SyncFusion 颤振测量仪
SyncFusion Flutter Gauge
我目前正在使用 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),
],
),
]),
),
),
);
}
}
您可以将文本小部件包装在堆栈中并将其放置在您想要的任何位置。
您可以使用中心 属性 将标题放在仪表的正上方。默认情况下,gauge 位于可用尺寸的中心,因为 centerX 和 centerY 的默认值为 0.5。现在您可以调整 centerY 值以减少 title 和 gauge 之间的 space。
Link: 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 添加标题。根据您的要求将 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),
],
),
],
),
),
],
),
),
),
);
}
}
我目前正在使用 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),
],
),
]),
),
),
);
}
}
您可以将文本小部件包装在堆栈中并将其放置在您想要的任何位置。
您可以使用中心 属性 将标题放在仪表的正上方。默认情况下,gauge 位于可用尺寸的中心,因为 centerX 和 centerY 的默认值为 0.5。现在您可以调整 centerY 值以减少 title 和 gauge 之间的 space。
Link: 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 添加标题。根据您的要求将 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),
],
),
],
),
),
],
),
),
),
);
}
}