SafeArea小部件中不安全区域的抖动背景。

Question

当我将其提供SafeArea给小部件时，它会从槽口和主页按钮（iPhone X +中的水平线）处获得一定的利润。如何更改不安全区域的背景？（保证金部分）？

Answer 1

将您包装SafeArea到添加背景的小部件中：

Container(
  color: Colors.red,
  child: SafeArea(...),
),

Answer 2

另一种方法可以做到这一点。

import 'package:flutter/services.dart';

Scaffold(
  body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Theme.of(context).primaryColor
    ),
    child: SafeArea(
      child: Container(...),
    ),
  ),
)

Answer 3

继 R\xc3\xa9mi Rousselet\ 的回答之后......

\n

就我而言，我创建了一个名为的新小部件ColoredSafeArea：

\n

import \'package:flutter/material.dart\';\n\nclass ColoredSafeArea extends StatelessWidget {\n  final Widget child;\n  final Color? color;\n\n  const ColoredSafeArea({\n    Key? key,\n    required this.child,\n    this.color,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      color: color ?? Theme.of(context).appBarTheme.backgroundColor,\n      child: SafeArea(\n        child: Container(\n          color: Theme.of(context).colorScheme.background,\n          child: child,\n        ),\n      ),\n    );\n  }\n}\n

\n

并用它代替SafeArea我的Scaffold. 默认情况下，我将其设置为使用主题中当前的 AppBar 颜色。但当然，您可以使用任何对您有用的东西。

\n

基本上，这个小部件将更改 SafeArea 颜色，而不会影响您的应用程序背景颜色，因为Container它从当前主题的背景颜色中获取背景颜色colorScheme。这样做的优点是背景颜色可以与您设置的任何深色或浅色主题配合使用。

\n

Answer 4

这可能是实现此目的的最简单方法：

const Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Text(
          "White scaffold background that also applies to status bar",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );

基本上用作SafeArea脚手架的子元素Scaffold并将脚手架的背景颜色设置为您想要的任何颜色，或者使用propThemeData全局设置它scaffoldBackgroundColor