flutter - 不改变背景或整个区域(状态栏除外)

Question

我需要将状态栏背景设置为橙色，并将整个其他区域设置为蓝色

片段:

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        backgroundColor: Colors.orange,
        body: SafeArea(
            child: SingleChildScrollView(
                child: new Container(
                    color: Colors.blue,
                    margin: const EdgeInsets.only(
                        left: Constants.DEFAULT_MARGIN,
                        top: Constants.DEFAULT_MARGIN,
                        right: Constants.DEFAULT_MARGIN),
                    child: new Text("TEST TEXT")))));
  }
}

结果:



为什么蓝色背景仅用于文本小部件？

Answer 1

发生此问题是因为您的容器只会扩展以包含它作为子项的所有内容。
您可以使用媒体查询根据您的设备屏幕尺寸设置容器的高度和宽度。
下面的代码应该可以达到你想要的效果:

return Scaffold(
      backgroundColor: Colors.orange,
      body: SafeArea(
        child: SingleChildScrollView(          
          child: Container(
            color: Colors.blue,
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Text("TEST TEXT"),
          ),          
        ),
      ),
    );