flutter - 在此 Flutter/Dart 代码中,无法将“Future ”分配给“Image”类型的变量?
问题描述
我正在尝试创建一个函数以在 Flutter (Dart) 中加载图像,但不确定如何使此代码正常工作。我越来越:
“Future”类型的值不能分配给“Image”类型的变量。尝试更改变量的类型,或将右侧类型转换为“图像”。
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ui.Image _backgroundImage;
Future<ui.Image> loadImage(imageString) async {
ByteData bd = await rootBundle.load(imageString);
// ByteData bd = await rootBundle.load("graphics/bar-1920×1080.jpg");
final Uint8List bytes = Uint8List.view(bd.buffer);
final ui.Codec codec = await ui.instantiateImageCodec(bytes);
final ui.Image image = (await codec.getNextFrame()).image;
return image;
// setState(() => imageStateVarible = image);
}
@override
Widget build(BuildContext context) {
setState( () => {
_backgroundImage = loadImage('imageNameString'); // <<== ISSUE: A value of type 'Future<Image>' can't be assigned to a variable of type 'Image'
});
return Scaffold(
body: Center(
child: Text('testing'),
),
);
}
}
解决方案
尝试这个。你的问题是:
- 不应在构建中调用诸如“下载图像”之类的东西。那应该是一个纯函数。
- 您的 loadImage 是异步的。因此我在 _asyncInit 中调用它。此外,您可能只想加载一次图像(而不是每次构建),所以我输入了 initState。
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ui.Image _backgroundImage;
@override
void initState() {
super.initState();
_asyncInit();
}
Future<void> _asyncInit() async {
final image = await loadImage('imageNameString');
setState(() {
_backgroundImage = image;
});
}
Future<ui.Image> loadImage(imageString) async {
ByteData bd = await rootBundle.load(imageString);
// ByteData bd = await rootBundle.load("graphics/bar-1920×1080.jpg");
final Uint8List bytes = Uint8List.view(bd.buffer);
final ui.Codec codec = await ui.instantiateImageCodec(bytes);
final ui.Image image = (await codec.getNextFrame()).image;
return image;
// setState(() => imageStateVarible = image);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _backgroundImage != null ? YourWidget(_backgroundImage) : Text('you are loading that image'),
),
);
}
}
编辑:
如果你想要一组图像:
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<ui.Image> _backgroundImages;
@override
void initState() {
super.initState();
_asyncInit();
}
Future<void> _asyncInit() async {
final imageNames = ['firstimage', 'secondimage', 'thirdimage'];
// NOTE by doing this, your images are loaded **simutanously** instead of **waiting for one to finish before starting the next**
final futures = [for (final name in imageNames) loadImage(name)];
final images = await Future.wait(futures);
setState(() {
_backgroundImages = images;
});
}
Future<ui.Image> loadImage(imageString) async {
ByteData bd = await rootBundle.load(imageString);
// ByteData bd = await rootBundle.load("graphics/bar-1920×1080.jpg");
final Uint8List bytes = Uint8List.view(bd.buffer);
final ui.Codec codec = await ui.instantiateImageCodec(bytes);
final ui.Image image = (await codec.getNextFrame()).image;
return image;
// setState(() => imageStateVarible = image);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: _backgroundImages != null ? YourWidget(_backgroundImages) : Text('you are loading that image'),
),
);
}
}
推荐阅读
- excel - 如何在 VLookup 中将另一个工作簿中的整个工作表作为我的表数组引用?
- spring-boot - Spring Cloud Config:如果无效则验证并拒绝配置
- java - 使用 .antMatchers() 更好地设计 REST 端点
- python - 使用 TensorFlow 神经网络为美国股票期权定价,蒙特卡洛模拟
- docker - 不同堆栈和网络上的 Docker 容器相互通信
- regex - 使用 | 时这种奇怪的行为是怎么回事?里面 ()?
- java - compareTo 在 int 类型上
- git - 将 git commit 与提取的目录进行比较
- java - Spring Data Rest - 存储库上的 PUT 在子引用上静默失败
- google-maps - 谷歌地方搜索不返回结果