在StatefulWidget中作为状态的项目数组并确保"setState"仅触发数组中已更改的项目的更新？

Question

Background-希望为StatefulWidget使用动态项目列表。在我的用例中，该小部件将调用CustomPaint(画布)，因此有时会在画布上绘制不同数量的图像，因此在父StatefulWidget中希望有一个"画布"；图像阵列"；。

问题-如果使用数组作为状态变量，我需要用程序做什么(如果有的话)来确保只有数组中已更改的项实际上得到"；重新绘制"；，特别是在这种情况下；重新喷漆"；在画布上。

(这里可能有两个单独的答案，一个是针对具有(a)标准小部件的数组，另一个是关于(b)项目被传递给CustomPaint以便在画布上绘制的情况？)

例如，请参阅下面的代码(@ch271828n提供了这一点，以帮助我解决另一个问题——在这个Flutter/Dat代码中，获取'；Future<Image>'；不能分配给类型为'；Image'；的变量？)。这段代码强调了主要思想，但不包括传递到CustomPainter作为参数。

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'),
),
);
}
}

Answer 1

首先，讨论builds：确实需要一个状态管理解决方案。也许看看https://flutter.dev/docs/development/data-and-backend/state-mgmt/options.我个人建议MobX，它需要很少的样板，可以使开发更快。

使用setState不是一个好主意。setState在查看源代码时，除了之外什么也不做

void setState(VoidCallback fn) {
assert(...);
_element.markNeedsBuild();
}

所以它只不过是markNeedsBuild——整个有状态的小部件再次被称为build。传递到setState的回调没有什么特别之处。因此，这种方式不能触发部分重建。

其次，您只想减少重新绘制，但不想减少构建数量，因为flutter的设计使build可以轻松地以60fps调用。然后事情变得很容易：

class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Stack(
children: [
for (final image in _yourImages)
CustomPaint(
painter: _MyPainter(image),
),
],
);
}
}
class _MyPainter extends CustomPainter {
final ui.Image image;
_MyPainter(this.image);
@override
void paint(ui.Canvas canvas, ui.Size size) {
// paint it
}
@override
bool shouldRepaint(covariant _MyPainter oldDelegate) {
return oldDelegate.image != this.image;
}
}

请注意，您可以随时在主页中调用setState，因为这很便宜。(如果你的主页有很多小部件，那么可能不好，那么你需要状态管理解决方案)。但除非shouldRepaint同意，否则油漆工不会重新油漆。是的！