flutter fl_chart 柱状图 柱条数量较多 实现左右滑动 固定y轴

**Flutter FlChart柱状图实现**

在 Flutter 中使用 FlChart 库绘制柱状图是一个很好的选择。下面我们将一步步地讲解如何实现一个可以左右滑动的柱状图，且固定Y轴。

###依赖和导入首先，我们需要在 `pubspec.yaml` 文件中添加 FlChart 库的依赖：

ymldependencies:
 flutter:
 sdk: flutter fl_chart: ^0.53.0

然后，重新运行 `flutter pub get` 来安装依赖。

接下来，在 Dart 文件中导入 FlChart 库：

dartimport 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';

### 数据准备假设我们有一个包含柱状图数据的列表：

dartList barData = [
 BarData(
 spots: [
 FlSpot(0,10),
 FlSpot(1,20),
 FlSpot(2,15),
 FlSpot(3,25),
 FlSpot(4,18),
 // ...
 ],
 ),
];

### 构建柱状图现在，我们可以使用 `BarChart` widget 来绘制柱状图：

dartclass MyHomePage extends StatefulWidget {
 @override _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
 List barData = [
 BarData(
 spots: [
 FlSpot(0,10),
 FlSpot(1,20),
 FlSpot(2,15),
 FlSpot(3,25),
 FlSpot(4,18),
 // ...
 ],
 ),
 ];

 @override Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('柱状图示例'),
 ),
 body: BarChart(
 barData[0],
 swapAnimationColor: Colors.blue,
 swapAnimationDuration: Duration(milliseconds:500),
 swapAnimationCurve: Curves.easeInOutCirc,
 swapAnimationType: SwapAnimationType.x,
 swapAnimationValueGetter: (value) => value,
 ),
 );
 }
}

### 左右滑动为了实现左右滑动，我们需要使用 `DraggableScrollableSheet` widget：

dartclass MyHomePage extends StatefulWidget {
 @override _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
 List barData = [
 BarData(
 spots: [
 FlSpot(0,10),
 FlSpot(1,20),
 FlSpot(2,15),
 FlSpot(3,25),
 FlSpot(4,18),
 // ...
 ],
 ),
 ];

 @override Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('柱状图示例'),
 ),
 body: DraggableScrollableSheet(
 initialChildSize:0.5,
 minChildSize:0.1,
 maxChildSize:0.9,
 builder: (context, scrollController) {
 return BarChart(
 barData[0],
 swapAnimationColor: Colors.blue,
 swapAnimationDuration: Duration(milliseconds:500),
 swapAnimationCurve: Curves.easeInOutCirc,
 swapAnimationType: SwapAnimationType.x,
 swapAnimationValueGetter: (value) => value,
 );
 },
 ),
 );
 }
}

### 固定Y轴为了固定Y轴，我们需要使用 `CustomPaint` widget：

dartclass MyHomePage extends StatefulWidget {
 @override _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
 List barData = [
 BarData(
 spots: [
 FlSpot(0,10),
 FlSpot(1,20),
 FlSpot(2,15),
 FlSpot(3,25),
 FlSpot(4,18),
 // ...
 ],
 ),
 ];

 @override Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('柱状图示例'),
 ),
 body: CustomPaint(
 painter: _BarChartPainter(barData[0]),
 child: Container(),
 ),
 );
 }
}

class _BarChartPainter extends CustomPainter {
 final BarData barData;

 _BarChartPainter(this.barData);

 @override void paint(Canvas canvas, Size size) {
 // ...
 }

 @override bool shouldRepaint(_BarChartPainter oldDelegate) => false;
}

### 总结在本文中，我们讲解了如何使用 FlChart 库在 Flutter 中实现一个可以左右滑动的柱状图，且固定Y轴。我们使用 `BarChart` widget 来绘制柱状图，并使用 `DraggableScrollableSheet` widget 来实现左右滑动。最后，我们使用 `CustomPaint` widget 来固定Y轴。