状态栏的高度

Question

像这样使用 safeArea

 Widget build(BuildContext context) {
return Container(
  color: Colors.white,
  child: SafeArea(
    child: Scaffold(
  appBar: AppBar(
    title: Text("Payment Method"),
    centerTitle: true,
    leading: IconButton(
      icon: Icon(
        Icons.navigate_before,
        size: 40,
      ),
      onPressed: () {
        Navigator.of(context).pop();
      },
    ),
  ),
        body: RefreshIndicator(
          -----)

我用它做状态栏

     void main() {
    SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
    systemNavigationBarColor: Colors.white,
    systemNavigationBarIconBrightness: Brightness.dark,
    systemNavigationBarDividerColor: Colors.transparent,
  ));runApp(MyApp());}

但是现在发生的情况是应用栏和状态栏似乎由于应用栏的高度而分开，所以最好的解决方法是使应用栏和状态栏似乎合并

Answer 1

在计数器应用上实现您的代码。

  void main() {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
        systemNavigationBarDividerColor: Colors.transparent,
      ));
      runApp(MyApp());
    }

    @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            appBar: AppBar(
              title: Text(widget.title),
              elevation: 10,
            ),
            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.headline4,
                  ),
                ],
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          ),
        );
      }
    }

这是我在 Counter App 中实现您的代码的结果。

确实，当您使用 SafeArea 时，状态栏和 AppBar 看起来是分开的。

一个非常简单的解决方法是：

像这样改变你的statusBarColor：

statusBarColor: Colors.blue,

同时删除 MaterialApp 中的调试横幅并添加：

debugShowCheckedModeBanner: false,

现在计数器应用程序看起来像这样：

经过这些小改动后，StatusBar 和 AppBar 看起来并没有分开。