在 Flutter App 中使用 Sliver App Bar 时，状态栏和导航栏颜色不切换

Question

这是我用来在暗模式和亮模式之间切换的代码。 一切正常，但是当我的小部件子树包含“Sliver App Bar”时，导航栏和状态栏的颜色不会自动更改。

这是预览

PS：一旦我删除了 Sliver App Bar，一切正常

.

我用来在主题之间切换的代码。

if (MediaQuery.of(context).platformBrightness == Brightness.light) {
  setState(() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Color(0xDCDCDCDC).withOpacity(1),
      statusBarIconBrightness: Brightness.dark,
      systemNavigationBarColor: Color(0xFAFAFAFA),
      systemNavigationBarIconBrightness: Brightness.dark,
    ));
  });
} 
else {
  setState(() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
      statusBarColor: Color(0x000).withOpacity(1),
      statusBarIconBrightness: Brightness.light,
      systemNavigationBarColor: Colors.black.withAlpha(234),
      systemNavigationBarIconBrightness: Brightness.light,
    ));
  });
}

.

我用于 Sliver App Bar 的代码

class _HomeScreen extends State<HomeScreen>{
  @override
  Widget build(BuildContext context) {

    return CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: <Widget>[
          SliverAppBar(
            title: Text(
              "Home",
              style: Theme.of(context).textTheme.title.copyWith(fontWeight: FontWeight.w600),
            ),
            floating: true,
            backgroundColor: Theme.of(context).primaryColorDark,
            elevation: 3,
            forceElevated: true,
            leading: Padding(
              padding: EdgeInsets.only(
                left: 16,
                top: 10,
                bottom: 10
              ),
              child: ClipOval(
                clipper: ProfileClipper(),
                child: Image.network(
                  'https://images.unsplash.com/photo-1511447333015-45b65e60f6d5?ixlib=rb-1.2.1&w=1000&q=80',
                  fit: BoxFit.cover,
                  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
                    if (loadingProgress == null)
                      return child;
                    return Center(
                      child: CircularProgressIndicator(
                        value: loadingProgress.expectedTotalBytes != null
                            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
                            : null,
                      ),
                    );
                  },
                ),
              ),
            ),
            actions: <Widget>[
              Padding(
                padding: EdgeInsets.only(
                  right: 8
                ),
                child: IconButton(
                  icon: Icon(
                    Icons.more_vert
                  ),
                  onPressed: () {},
                ),
              )
            ],
          ),

        ],
      );
  }
}

Answer 1

您可以尝试将 prop: Brightness: MediaQuery.of(context).platformBrightness 添加到 SliverAppBar?

Answer 2

我已经使用了您的代码并进行了一些修改以使其正常工作。 我已将更改应用程序的亮度和颜色的方法移至 Main Widget，使其成为有状态的。 这使您可以轻松更改整个应用程序的亮度，包括状态栏。 我还将 SystemChrome 更改移到了 setState 之外，因为它们不需要应用它。 检查下面的代码，并自己测试：

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Brightness _themeBrightness = Brightness.light;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: _themeBrightness,
        primarySwatch: Colors.blueGrey,
        appBarTheme: AppBarTheme(
          brightness: _themeBrightness
        ),
      ),
      home: Scaffold(
        body: SliverAppBarTheme60543149(
          swapThemeBrightness: swapThemeBrightness,
        )
      ),
    );
  }

  void swapThemeBrightness(){
    if (_themeBrightness == Brightness.light) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.black,
        systemNavigationBarColor: Colors.black,
        systemNavigationBarIconBrightness: Brightness.light,
      ));
      setState(() {
        _themeBrightness = Brightness.dark;
      });
    } else {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
        statusBarColor: Colors.white,
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark,
        systemNavigationBarDividerColor: Colors.white,
      ));
      setState(() {
        _themeBrightness = Brightness.light;
      });
    }
  }
}

class SliverAppBarTheme60543149 extends StatefulWidget {
  final Function swapThemeBrightness;

  SliverAppBarTheme60543149({
    @required this.swapThemeBrightness
  });

  @override
  _SliverAppBarTheme60543149State createState() => _SliverAppBarTheme60543149State();
}

class _SliverAppBarTheme60543149State extends State<SliverAppBarTheme60543149> {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: <Widget>[
        SliverAppBar(
          title: Text(
            "Home",
            style: Theme.of(context).textTheme.title.copyWith(fontWeight: FontWeight.w600),
          ),
          floating: true,
          backgroundColor: Theme.of(context).primaryColorDark,
          elevation: 3,
          forceElevated: true,
          leading: Padding(
            padding: EdgeInsets.only(
              left: 16,
              top: 10,
              bottom: 10
            ),
            child: Container(
              height: 60,
              width: 60,
              color: Colors.blue,
            ),
          ),
          actions: <Widget>[
            Padding(
              padding: EdgeInsets.only(
                right: 8
              ),
              child: IconButton(
                icon: Icon(
                  Icons.more_vert
                ),
                onPressed: () {},
              ),
            )
          ],
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, int){
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: RaisedButton(
                  onPressed: widget.swapThemeBrightness,
                  child: Text('Swap theme'),
                ),
              );
            },
            childCount: 1,
          ),
        ),
      ],
    );
  }
}

Answer 3

这对我有用

SliverAppBar(
iconTheme: IconThemeData(color: Colors.black),
 brightness: Brightness.light,