在使用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等其他控件中也可以做这样的修改
