我目前正在使用 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),
],
),
]),
),
),
);
}
}
uj5u.com熱心網友回復：
您可以將 Text 小部件包裝在堆疊中并將其放置在您想要的任何位置。
uj5u.com熱心網友回復：
您可以使用 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),
],
),
],
),
),
],
),
),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/340232.html