有没有办法在Flutter上添加两个不同颜色的Iphone x SafeArea

Question

我想知道有什么办法可以给iPhone X SafeArea添加两种不同的颜色吗？

在

React Native

上，可以通过添加两个

SafeAreaView

来修复此问题。有谁知道如何解决颤振问题吗？

谢谢

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: SafeArea(
        left: true,
        top: true,
        right: true,
        bottom: true,
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), 
        ),
      ),
    );
  }

Answer 1

您可以做一件简单的事情 => 将

SafeArea

的顶部属性标记为 false，这样手机的顶部区域将采用

AppBar

的背景颜色，底部 SafeArea 将采用父级

container 的颜色

。理想情况下，我建议如果您将

scaffold

限制在

SafeArea

内，那么它的顶部

SafeArea

颜色应与

AppBar

背景颜色相同，底部 SafeArea 颜色应根据您的要求（父容器的颜色）。

我用两种不同的颜色修改了你的代码：

Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: SafeArea(
        top: false,        
        child: Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            backgroundColor: Colors.orange,
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), 
        ),
      ),
    );
  }

选项 2：如果您使用脚手架，那么您只需将您的 body 小部件绑定在里面即可解决您的问题。

Answer 2

在 SafeArea 小部件中，我们有一些元素，例如底部、顶部......

如果设置bottom = true，则SafeArea将包括bottom。分别对顶部元素进行操作。

要获取底部/顶部区域的高度，可以通过这种方式到达

MediaQuery.of(context).padding.bottom

。

要为底部/顶部区域制作一些背景颜色，您可以添加一个高度如上的容器小部件。

Answer 3

所以，我找到了这个方法来做到这一点。您可以更改静态颜色，例如我就是这样做的。我不知道这是正确的方法，但它有效。我认为@dhaval-kansara 的方法不是我想要的，因为状态栏是透明的并且在滚动时会溢出。我接受我的演讲中的批评，因为我还是一个初学者，可能知道的不多。 （对不起我的英语）

    import 'package:flutter/material.dart';
    
    class ColoredSafeArea extends StatelessWidget {
      final Color topColor;
      final Color bottomColor;
      final Color color;
      final Widget child;
    
      const ColoredSafeArea(
          {Key key,
          this.topColor,
          this.bottomColor,
          this.color,
          @required this.child,})
          : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return ColoredBox(
          color: bottomColor ?? Colors.yellow, // bottombar color
          child: SafeArea(
            top: false,
            child: ColoredBox(
              color: topColor ?? Colors.blue, // statusbar color
              child: SafeArea(
                top: true,
                child: ColoredBox(
                  color: color ?? Colors.teal, // background color
                  child: child,
                ),
              ),
            ),
          ),
        );
      }
    }

Answer 4

只需将 SafeArea 包裹在样式化的容器中

return Scaffold(
  body: Container(
    decoration: const BoxDecoration(
      image: DecorationImage(
        image: AssetImage('assets/images/backgrounds/path'),
        fit: BoxFit.cover,
      ),
    ),
    child: SafeArea(
      child: Center(
        child: Column(
          children: [],
        ),
      ),
    ),
  ),
);