我在写一个展示页面时,当我使用SingleChildScrollView
时,页面的跟手性大幅下降,且有掉帧的现象,但我如果换成同类型的ListView
就会变得非常流畅,请大家教教我到底是什么导致了这种情况!
以下附上我的实验代码(图片素材可能需要大家自行准备一下)
- 使用
SingleChildScrollView
时
import 'package:flutter/material.dart';
class ImageAndIconRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
var img = AssetImage("res/leetcode.png");
return Scaffold(
appBar: AppBar(),
body: Center(
child: SingleChildScrollView(
child: Column(
children: <Image>[
Image(
image: img,
height: 50,
width: 100,
fit: BoxFit.fill,
),
Image(
image: img,
height: 50,
width: 50,
fit: BoxFit.contain,
),
Image(
image: img,
height: 100,
width: 50,
fit: BoxFit.cover,
),
Image(
image: img,
height: 100,
width: 50,
fit: BoxFit.fitWidth,
),
Image(
image: img,
height: 100,
width: 50,
fit: BoxFit.fitHeight,
),
Image(
image: img,
height: 100,
width: 50,
fit: BoxFit.scaleDown,
),
Image(
image: img,
height: 50,
width: 100,
fit: BoxFit.none,
),
Image(
image: img,
color: Colors.blue,
colorBlendMode: BlendMode.difference,
width: 100,
fit: BoxFit.fill,
),
Image(
image: img,
height: 100,
width: 200,
repeat: ImageRepeat.repeatY,
),
].map((e){
return Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(16),
child: SizedBox(
width: 100,
child: e,
),
),
Text(e.fit.toString())
],
);
}).toList(),
),
),
),
);
}
}
- 使用
ListView
时
class ImageAndIconRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
var img = AssetImage("res/leetcode.png");
return Scaffold(
appBar: AppBar(),
body: Center(
child: ListView(
children: <Image>[
Image(
image: img,
height: 50,
width: 100,
fit: BoxFit.fill,
),
Image(
image: img,
height: 50,
width: 50,
fit: BoxFit.contain,
),
Image(
image: img,
height: 100,
width: 50,
fit: BoxFit.cover,
),
Image(
image: img,
height: 100,
width: 50,
fit: BoxFit.fitWidth,
),
Image(
image: img,
height: 100,
width: 50,
fit: BoxFit.fitHeight,
),
Image(
image: img,
height: 100,
width: 50,
fit: BoxFit.scaleDown,
),
Image(
image: img,
height: 50,
width: 100,
fit: BoxFit.none,
),
Image(
image: img,
color: Colors.blue,
colorBlendMode: BlendMode.difference,
width: 100,
fit: BoxFit.fill,
),
Image(
image: img,
height: 100,
width: 200,
repeat: ImageRepeat.repeatY,
),
].map((e){
return Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(16),
child: SizedBox(
width: 100,
child: e,
),
),
Text(e.fit.toString())
],
);
}).toList(),
),
),
);
}
}