flutter使用listview在顶部出现空白区域的解决方法

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"),
                  ), //页面主体上面的图片
                ],
              ),
            )
        ),

这篇好文章是转载于：学新通技术网