flutter中使用listview在顶部出现空白区域的解决方法
listview组件会在listview的区域顶部出现一个空白区域,如下
在图片中可以看出阴影的起始线和图片的顶部并不在一起,这就是listview留下的空白区域,所用到的代码如下
Container(
//创建一个可以滚动的内容列表
height: 700,
child: ListView(
children: [
Container(
width: 100,
height: 200,
margin: const EdgeInsets.fromLTRB(10, 0, 10, 0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("images/cz/u1204.jpg"),
fit: BoxFit.cover)),
// child: Image.asset("images/cz/u1204.jpg"),
), //页面主体上面的图片
],
),),
通过使用MediaQuery.removePadding
组件可以解决这一问题,
MediaQuery.removePadding的使用参考:https://www.helloworld.net/p/5659699907
解决后的显示如下:
可以看到当下拉出现阴影时,阴影的起始线与图片顶部相对齐,
解决后的代码如下:
Container(
//创建一个可以滚动的内容列表
height: 700,
child:MediaQuery.removePadding( //由于直接使用listview会在顶部留下空白区域,所以使用MediaQuery.removePadding去除空白
context: context,
removeTop: true, //去除顶部的空白
child: ListView(
children: [
Container(
width: 100,
height: 200,
margin: const EdgeInsets.fromLTRB(10, 0, 10, 0),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("images/cz/u1204.jpg"),
fit: BoxFit.cover)),
// child: Image.asset("images/cz/u1204.jpg"),
), //页面主体上面的图片
],
),
)
),