是否在不设置固定大小的情况下摆动图像占位符(FadeInImage)

Question

在下载图像之前，我如何使用类似FadeInImage的东西来设置和保持页面的布局？正如预期的那样，只要使用Image.network，一旦图像加载并变得可见，页面就会跳转。我没有设置图像大小(我允许它们根据屏幕等调整大小(，并且希望避免设置固定的高度。使用FadeInImage加载并显示图像很好，但屏幕仍然会跳跃很多。

@override
Widget build(BuildContext context) {
return 
Scaffold(
appBar: AppBar(
title: Text('Welcome!'),
),
drawer: sideDrawer(),
body: new SingleChildScrollView(
padding: const EdgeInsets.all(8.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
SizedBox(height: 28),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(width: 64),
Flexible( // tried Expanded too
child: 
FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://www.xyzserver.com/images/dummyimage.png',
fit: BoxFit.scaleDown,
),
),
SizedBox(width: 64),
],
),
SizedBox(height: 28),
Text("stuff below the image"),
],
),
)
);
}

当使用"；展开的"；图像行/区域在垂直方向上非常高(文本"图像下方的东西"位于页面底部，因此当加载图像时页面会向上跳。当使用"灵活"时，图像行/面积会稍小，当加载图像后页面会向下跳。

在我现在播放的图像中，它是一个水平图像，比可用的屏幕空间大，所以它会缩小。我想我在想，既然flutter可以计算出可用于扩展/柔性的最大宽度，它应该能够计算出高度，但当我写这篇文章时，我认为这是不可能的，因为它不知道高度/宽度比，所以无法预测高度。

如何设置此设置，使图像可以正确调整大小和显示，并且页面不会跳转？我无法想象使用固定的高度/宽度设置是可行的。也许我对图像的处理方式完全错误，我应该始终使用设置的高度/宽度，尽管当人们被允许上传自己的图像时，这可能会相当困难。

谢谢！

Answer 1

检查这个

class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Uint8List? imageData;
Future<Uint8List> dosometinhdd() async {
return (await rootBundle.load('assets/images/a.png')).buffer.asUint8List();
}
@override
void initState() {
dosometinhdd().then((value) {
setState(() {
imageData = value;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Welcome!'),
),
body: new SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height * 0.8,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
imageData != null
? Expanded(
child: FadeInImage.memoryNetwork(
placeholder: imageData!,
image:
'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
fit: BoxFit.scaleDown,
),
)
: Container(),
Text("stuff below the image"),
],
),
),
));
}