有没有办法在 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 这样 phone 的顶部区域将采用 AppBar 的背景颜色，底部 SafeArea 将采用 parent container 的颜色。理想情况下，我建议如果您将 scaffold 限制在 SafeArea 内，那么它的顶部 SafeArea 颜色应与 AppBar 背景颜色相同，底部 SafeArea 颜色应符合您的要求要求（parent容器的颜色）。

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

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 将包括底部。分别对top元素做。

要获取bottom/top区域的高度，可以通过这种方式到达MediaQuery.of(context).padding.bottom。

要为 bottom/top 区域制作一些背景颜色，您可以添加一个具有上述高度的容器小部件。

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,
                ),
              ),
            ),
          ),
        );
      }
    }

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

Is there are way to add two different color Iphone x SafeArea on Flutter

flutter

iphone-x

flutter-layout

safeareaview