3

我想知道有没有什么办法可以给 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),
          ), 
        ),
      ),
    );
  }
4

3 回答 3

5

您可以做一件简单的事情 => 将 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：如果您使用的是脚手架，那么您可以简单地将您的 body 小部件绑定在里面，它会解决您的问题。

于 2020-01-08T06:18:20.437 回答
1

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

如果设置bottom = true，SafeArea 将包括底部。分别用顶部元素做。

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

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

于 2020-08-19T04:34:53.410 回答
0

所以，我找到了这种方法来做到这一点。您可以更改静态颜色，例如我就是这样做的。我不知道这是正确的方法，但它有效。我认为@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,
                ),
              ),
            ),
          ),
        );
      }
    }
于 2021-04-09T12:22:17.393 回答