flutter - Flutter：无法使用 SliverAppBar 将状态栏设置为透明

Question

我很难将 Android 的状态栏设置为透明。我使用以下代码进行了测试，它可以工作：

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    ),
  );
  return Scaffold(
    body: Text('temporary test widget'),
  );
}

但是当我在我的正文部分替换我的正确小部件时Scaffold，透明度会丢失：

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    ),
  );
  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          brightness: Brightness.dark,
          pinned: true,
          expandedHeight: 225.0,
          flexibleSpace: FlexibleSpaceBar(
            background: Image(
              fit: BoxFit.cover,
              excludeFromSemantics: false,
              image: AssetImage('images/aristocrat.jpg'),
            ),
          ),
        ),
        SliverFixedExtentList(
          itemExtent: 100.0,
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: Text('List Item $index'),
              );
            },
            childCount: 10,
          ),
        ),
      ],
    ),
  );
}

我错过了什么？

标签： flutter

Answer 1

答案 3.0

此代码工作正常，这使状态栏透明，而Brightness.dark, 将负责其余部分。

指针：另外，如果你想使用它，虽然，它不是必需的。但是，如果您没有任何效果，请考虑使用flutter_statusbarcolor包

Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent, // this one will make the statusbar transparent
        statusBarIconBrightness: Brightness.dark //this will take care of the icon color
      ),
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              // brightness: Brightness.dark, <-- Not required if you have mentioned in the above AnnotatedRegion
              pinned: true,
              expandedHeight: 225.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Image(
                  fit: BoxFit.cover,
                  excludeFromSemantics: false,
                  image: AssetImage('images/aristocrat.jpg'),
                ),
              ),
            ),
            SliverFixedExtentList(
              itemExtent: 100.0,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: Text('List Item $index'),
                  );
                },
                childCount: 10,
              ),
            ),
          ],
        ),
      )
   );
}