我是这个 Flutter 的新手,我想从异步 Future<<List>获取这些数据到另一个 Dart 文件。此函数返回一个ByteData,我想将其添加到另一个 dart 文件中,以便创建带有图像和数据网格的 PDF 文件。此函数放置在有状态小部件中。为了访问此函数的返回值或数据,如何在另一个Dart文件中编写代码,以便我可以将图像添加到PDF函数中?
这是我创建的代码:
class CathodicColumn extends StatefulWidget {
const CathodicColumn({Key? key}) : super(key: key);
@override
State<CathodicColumn> createState() => _CathodicColumnState();
}
class _CathodicColumnState extends State<CathodicColumn> {
// Key State for Column Chart
late GlobalKey<SfCartesianChartState> keyChart =
GlobalKey<SfCartesianChartState>();
// Initiate State
@override
void initState() {
loadCathodicData();
keyChart = GlobalKey<SfCartesianChartState>();
super.initState();
}
// Dispose Data
@override
void dispose() {
chartData!.clear();
super.dispose();
}
// Overrides
@override
Widget build(BuildContext context) {
return _buildCathodicColumnChart();
}
Column _buildCathodicColumnChart() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SfCartesianChart(
key: keyChart,
plotAreaBorderWidth: 1.0,
title: ChartTitle(text: 'Cathodic Voltages to Time Column Charts'),
tooltipBehavior: TooltipBehavior(enable: true),
legend: Legend(
position: LegendPosition.bottom,
isResponsive: true,
isVisible: true,
),
primaryXAxis: DateTimeAxis(
edgeLabelPlacement: EdgeLabelPlacement.shift,
title: AxisTitle(text: 'Time (hourly)'),
intervalType: DateTimeIntervalType.hours,
majorGridLines: const MajorGridLines(width: 0),
isVisible: true,
),
primaryYAxis: NumericAxis(
edgeLabelPlacement: EdgeLabelPlacement.shift,
axisLine: const AxisLine(width: 0),
labelFormat: '{value} DCV',
majorTickLines: const MajorTickLines(size: 0),
),
series: _getCathodicColumnSeries(),
),
const SizedBox(height: defaultPadding * 1.2),
ElevatedButton(
onPressed: saveFileAsPdf,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
maximumSize: const Size(200.0, 50.0),
),
child: Row(
children: const [
Text("Export to PDF"),
Spacer(),
Icon(Icons.picture_as_pdf_outlined),
],
),
),
],
);
}
List<ColumnSeries<DataCathodic, DateTime>> _getCathodicColumnSeries() {
return <ColumnSeries<DataCathodic, DateTime>>[
ColumnSeries(
name: 'TR Area DWP Voltages',
dataSource: chartData!,
xValueMapper: (DataCathodic cathodic, _) => cathodic.timestamp,
yValueMapper: (DataCathodic cathodic, _) => cathodic.voltage,
),
ColumnSeries(
name: 'Mile Area 22',
dataSource: chartData!,
xValueMapper: (DataCathodic cathodic, _) => cathodic.timestamp,
yValueMapper: (DataCathodic cathodic, _) => cathodic.voltageLoc2,
),
ColumnSeries(
name: 'Mile Area 34',
dataSource: chartData!,
xValueMapper: (DataCathodic cathodic, _) => cathodic.timestamp,
yValueMapper: (DataCathodic cathodic, _) => cathodic.voltageLoc3,
),
ColumnSeries(
name: 'Mile Area 50',
dataSource: chartData!,
xValueMapper: (DataCathodic cathodic, _) => cathodic.timestamp,
yValueMapper: (DataCathodic cathodic, _) => cathodic.voltageLoc4,
),
ColumnSeries(
name: 'Mile Area 68',
dataSource: chartData!,
xValueMapper: (DataCathodic cathodic, _) => cathodic.timestamp,
yValueMapper: (DataCathodic cathodic, _) => cathodic.voltageLoc5,
),
];
}
Future<List<int>> readImageData() async {
// Convert Charts to Images
final ui.Image data = await keyChart.currentState!.toImage(pixelRatio: 3.0);
// Creates Image from Chart with format PNG
final ByteData? bytesImage =
await data.toByteData(format: ui.ImageByteFormat.png);
// Return the Image
return bytesImage!.buffer.asUint8List(
bytesImage.offsetInBytes,
bytesImage.lengthInBytes,
);
}
}
我想将上述代码的返回值发送到另一个Dart文件,因此readImageData()函数中的转换图像可以添加到另一个PDF文件中,其中包括图表图像和数据网格。
你能帮我写正确的代码吗?谢谢!
如果你在另一个页面中处理PDF函数,你可以使用readImageData()
函数创建一个变量,如下所示:
Uint8List imageData = await readImageData();
然后将值传递给新屏幕
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondPage(data: imageData)));
第二页示例
class SecondPage extends StatefulWidget {
final Uint8List data;
const SecondPage({required this.data, Key? key}) : super(key: key);
@override
_SecondPageState createState() => _SecondPageState();
}
您还可以通过在等待后添加.then
来获取readImageData()
的返回值,并对返回值执行某些操作。
await readImageData().then((value) {
// Do something with the value
});