flutter - 状态栏的高度

Question

像这样使用安全区域

 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

在 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.

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

像这样改变你statusBarColor：

statusBarColor: Colors.blue,

还要删除调试横幅MaterialApp添加这个：

debugShowCheckedModeBanner: false,

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

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