如何在没有填充的情况下在状态栏后面绘制列表视图？答案

【问题标题】：How to draw list view behind status bar without padding?如何在没有填充的情况下在状态栏后面绘制列表视图？
【发布时间】：2021-01-12 14:08:04
【问题描述】：

这是我想要实现的目标：

这就是我现在拥有的：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: ListView(
        children: [
          Image.asset(
            'assets/images/videosbg.png',
            fit: BoxFit.cover,
            height: 300,
            width: double.infinity,
          ),
          ...
        ],
      ),
    );
  }

我不想移除状态栏或更改其颜色，因此 SystemChrome 不适合我。

如何将脚手架主体放置在状态栏后面，而不是下方？我需要以某种方式移除状态栏的上边距吗？

【问题讨论】：

我已经尝试在 main() 中将颜色设置为透明，如下面的一些答案所示，但没有任何改变。上部填充物仍然存在。也许我的小部件结构有误，或者我应该更改 Scaffold 中的某些内容？

标签： flutter dart

【解决方案1】：

ListView 有 padding 属性，设置为EdgeInsets.zero

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: ListView(
        padding: EdgeInsets.zero,
        children: [
          Image.asset(
            'assets/images/videosbg.png',
            fit: BoxFit.cover,
            height: 300,
            width: double.infinity,
          ),
          ...
        ],
      ),
    );
  }

仅供参考https://github.com/flutter/flutter/issues/14842

【讨论】：

【解决方案2】：

适用于 Android 是

SystemChrome 用于设置条形透明。该类提供了一个setSystemUIOverlayStyle 方法，您可以像这样使用它：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main(){
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  runApp(MyApp());
}

【讨论】：

@Darkhan：你能告诉我这个解决方案是否适合你
我尝试在 main() 中将颜色设置为透明，但没有任何改变。似乎问题不在于颜色，而在于填充。也许我的小部件结构有误，或者我应该更改 Scaffold 中的某些内容？
脚手架是为你的屏幕准备的，它不会帮助你。

【解决方案3】：

我尝试在运行 MaterialApp 之前将具有透明颜色的 SystemChrome 放在 main() 函数中

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(statusBarColor: Colors.transparent),
);

并且我能够重现您正在寻找的内容

【讨论】：

我尝试在 main() 中将颜色设置为透明，但没有任何改变。上部填充物仍然存在。也许我的小部件结构有误，或者我应该更改 Scaffold 中的某些内容？