状态栏的高度答案

【问题标题】：Elevation of status bar状态栏的高度
【发布时间】：2026-01-09 02:25:02
【问题描述】：

像这样使用安全区域

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

但是现在由于应用栏的升高，应用栏和状态栏似乎是分开的，所以最好的解决方法是让应用栏和状态栏看起来合并

【问题讨论】：

您是否尝试将 elevation: 0 添加到 AppBar ？
其实我需要在 appbar 中提升
@TarunJain 可以分享截图吗？

标签： flutter dart flutter-layout flutter-appbar

【解决方案1】：

在 Counter App 上实现您的代码。

  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 看起来并没有分开。

【讨论】：