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

发布于12月18日

在我的Flatter应用程序中，屏幕A没有AppBar.

在另一个具有AppBar的屏幕B被推送然后弹出之后，屏幕A有亮起的状态栏.

当屏幕弹出时，我希望系统UI返回到原始设置.

GIF

推荐答案

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

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

当您按下AppBar小部件上的后退按钮时，将立即从Navigator.of(context).push(someroute)返回，即使导航动画仍在从堆叠屏幕渲染.

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

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