Dart 颤振：我应该在哪里调用SystemChrome.setSystemTimeIOVerlayStyle（SystemUiOverlayStyle.dark）

在我的颤振应用程序中，屏幕A没有AppBar。 因此，我在构建中调用

SystemChrome.setSystemUIOverlayStyle（systemuioverlystyle.dark）

在另一个带有AppBar的屏幕B被按下然后弹出后， 屏幕A有亮起的状态栏

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

---

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

您可以在

initState

方法中调用

SystemChrome.setSystemTimeOverlayStyle（SystemUiOverlayStyle.dark）

，但在弹出堆叠屏幕后不会触发。这里有两个问题，但是，您可以在从屏幕返回后再次调用。够简单吧？差不多了

当您按下

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

类主屏幕扩展StatefulWidget{
_HomeScreenState createState（）=>\u HomeScreenState（）；
}
类_homescrenstate扩展状态{
@凌驾
void initState（）{
_updateAppbar（）；
super.initState（）；
}
void _updateAppbar（）{
SystemChrome.SetSystemEmioVerlayStyle（SystemUiOverlayStyle.dark）；
}
@凌驾
小部件构建（构建上下文）{
返回容器(
孩子：升起按钮(
子项：文本（“导航到第二个屏幕”），
onPressed:（）=>Navigator.of（上下文）
.push（MaterialPage路由（生成器：（BuildContext上下文）=>SecondScreen（））
.whenComplete（（）=>Future.delayed（持续时间（毫秒：500））。然后（（）=>updateAppbar（））；
}
}
类SecondScreen扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（），
);
}
}

虽然这是可行的，但我还是很好奇，是否有人知道更好的方法来处理这个问题，并在每个屏幕上保留一个状态栏颜色绑定

也许这样行

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.transparent)

---

将此程序包添加到项目中，并将屏幕状态扩展到恢复状态

import 'package:need_resume/need_resume.dart';

class WelcomeScreen extends StatefulWidget {
  final String title;

  const WelcomeScreen({Key key, this.title}) : super(key: key);
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends ResumableState<WelcomeScreen> {
  @override
  void onResume() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    super.onResume();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [],
      ),
    );
  }
}

import'package:need_resume/need_resume.dart'；
类WelcomeScreen扩展StatefulWidget{
最后的字符串标题；
const WelcomeScreen（{Key，this.title}）：super（Key:Key）；
@凌驾
_WelcomeScreenState createState（）=>\u WelcomeScreenState（）；
}
类_WelcomeScreenState扩展ResumableState{
@凌驾
void onResume（）{
SystemChrome.SetSystemEmioVerlayStyle（SystemUiOverlayStyle.dark）；
super.onResume（）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：专栏(
儿童：[]，
),
);
}
}

---

此解决方案与预期一样工作，只需对代码进行很少的更改。

也许您可以使用AnnotatedRegion将整个页面小部件包装为如下所示：

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

您可以在此处遵循完整的示例：

---

所以每次推一个页面时我都需要调用

\u updateAppbar

吗？这已经在2年前得到了回答，但是，如果您没有在每个页面中使用

AppBar

属性集（为您处理状态栏颜色），我会说是的。