flutter_ListView_顶部的灰色区

在使用Listview时候,需要注意ListView默认会有一个padding,当页面内仅有一个ListView时,顶部状态栏会出现一个灰色的区域,如下图

image.png

对应的代码如下:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.purple,
      ),
      home: MyHome(),
    );
  }
}
class MyHome extends StatelessWidget {
  final String _url = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.qhimg.com%2Ft01336ac635fa90a230.jpg";
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Container(
            height: 20,
            color: Colors.pink,
          ),
          Image.network(_url),
        ],
      ),
    );
  }
}

如果想去掉这块灰色,则需要重新对ListView的padding重新赋值,将padding值的顶部距离改为0,

padding: EdgeInsets.only(top: 0),

完整代码

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: EdgeInsets.only(top: 0),
        children: [
          Container(
            height: 20,
            color: Colors.pink,
          ),
          Image.network(_url),
        ],
      ),
    );
  }

image.png

这样就不会显示灰色块了,同理,在其他地方,如drawer等其他控件中也可以做这样的修改