求助一下SingleChildScrollView在高刷屏幕下异常卡顿的问题

1,193 阅读1分钟

我在写一个展示页面时,当我使用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(),
          ),
      ),
    );
  }
}