Flutter：我应该在哪里调用 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark)

Question

在我的 flutter 应用程序中，屏幕 A 没有 AppBar。所以我打电话给SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark)build。

在另一个带有 AppBar 的屏幕 B 被推送然后弹出后，屏幕 A 的状态栏亮了。

我希望系统用户界面在弹出屏幕时恢复到原始设置。

Answer 1

这背后的原因是您的新屏幕将有自己的生命周期，因此状态栏可能会使用另一种颜色。

您可以调用SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark)您的initState方法，但在弹出堆叠屏幕后不会触发该方法。这里有两个问题，但是您可以在从 screen 返回后再次调用它pop()。够简单吧？差不多了。

当您按下小部件上的后退按钮时，即使导航动画仍在从堆叠屏幕中渲染，AppBar也会立即从您的 中返回。Navigator.of(context).push(someroute)为了解决这个问题，您可以添加一点“调整”，在 500 毫秒后再次设置状态栏颜色，这应该足以让动画完全完成。所以，你会想要或多或少像这样的东西：

class HomeScreen extends StatefulWidget {
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    _updateAppbar();
    super.initState();
  }

  void _updateAppbar() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: RaisedButton(
            child: Text('Navigate to second screen'),
            onPressed: () => Navigator.of(context)
                .push(MaterialPageRoute(builder: (BuildContext context) => SecondScreen()))
                .whenComplete(() => Future.delayed(Duration(milliseconds: 500)).then((_) => _updateAppbar()))));
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

虽然这有效，但我仍然很想知道是否有人知道更好的方法来处理这个问题并将状态栏颜色绑定到每个屏幕。

Answer 2

也许你可以用 AnnotatedRegion 包装整个页面小部件，如下所示：

AnnotatedRegion(
value: _currentStyle,
child: Center(
  child: ElevatedButton(
    child: const Text('Change Color'),
    onPressed: _changeColor,
   ),
 ),
);

您可以在此处遵循完整示例： https: //api.flutter.dev/flutter/services/SystemChrome/setSystemUIOverlayStyle.html