有没有办法在 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

您可以做一件简单的事情 => 将 top 属性标记SafeArea为false这样手机的顶部区域将采用 的背景颜色，AppBar而底部 SafeArea 将采用 parent 的颜色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：如果您使用的是脚手架，那么您可以简单地将您的身体小部件绑定在里面，它会解决您的问题。