1
votes

Comment changer la luminosité de l'icône de la barre d'état par programme lorsque la barre d'application Sliver s'est effondrée?

J'utilise une simple barre d'application en ruban de widget flottant.

et je souhaite changer la luminosité de l'icône de la barre d'état lorsque la barre d'application en ruban est réduite. ici, j'écoute la barre de défilement et la fonction d'appel lorsque la barre d'application est réduite. et paramétrer l'état avec la luminosité appropriée.

code: -

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> with RouteAware {
  ScrollController _scrollController;
  SystemUiOverlayStyle _brightness = SystemUiOverlayStyle.light;
  @override
  void initState() {
    this._scrollController = ScrollController()
      ..addListener(() => _isAppBarExpanded
          ? setState(
              () {
                _brightness = SystemUiOverlayStyle.light;
                print('setState is called 1 ');
              },
            )
          : setState(() {
              print('setState is called 2 ');
              _brightness = SystemUiOverlayStyle.dark;
            }));
  }
  bool get _isAppBarExpanded {
    return _scrollController.hasClients &&
        _scrollController.offset > (200 - kToolbarHeight);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: _brightness,
        child: Stack(
          children: <Widget>[
            CustomScrollView(
              controller: this._scrollController,
              slivers: <Widget>[
                SliverAppBar(
                  backgroundColor: Colors.grey[50],
                  expandedHeight: 200,
                  elevation: 0,
                  flexibleSpace: Container()
                ),
                ExerciseList(
                  data: widget.data,
                ),
              ],
            ),
            Container(),
          ],
        ),
      ),
    );
  }
}

rien ne fonctionne, quel est le problème ici?

p >

flutter statusbar themes appbar

1 commentaires

Vous avez deux points dans ScrollController () ..addListener (() => _isAppBarExpanded

3 Réponses :

1
votes

Votre SliverAppBar utilise AppBar en interne. Jetez un œil à ce code, qui provient d'AppBar:

   final Brightness brightness = widget.brightness
      ?? appBarTheme.brightness
      ?? theme.primaryColorBrightness;
    final SystemUiOverlayStyle overlayStyle = brightness == Brightness.dark
      ? SystemUiOverlayStyle.light
      : SystemUiOverlayStyle.dark;

Donc, fondamentalement, votre SliverAppBar remplace SystemUIOverlayStyle, donc je suggère d'ajouter luminosité: _isAppBarExpanded? Brightness.light: Brightness.dark, à votre SliverAppBar .

0 commentaires

0
votes

Veuillez vérifier mon code et si cela résout votre problème, faites-le moi savoir :)

J'ai corrigé votre code comme ci-dessous:

import 'package:flutter/material.dart';

main() => runApp(MaterialApp(
      home: MyWidget(),
    ));

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with RouteAware {
  ScrollController _scrollController;
  bool _isAppBarCollapsed = false;

  @override
  void initState() {
    super.initState();
    this._scrollController = ScrollController()
      ..addListener(() {
        if (isCollapsed() && !_isAppBarCollapsed) {
          setState(() {
            _isAppBarCollapsed = true;
          });
        } else if (!isCollapsed() && _isAppBarCollapsed) {
          setState(() {
            _isAppBarCollapsed = false;
          });
        }
      });
  }

  bool isCollapsed() {
    return _scrollController.hasClients &&
        _scrollController.offset > (280 - kToolbarHeight);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: _isAppBarCollapsed,
      bottom: false,
      right: false,
      left: false,
      child: Scaffold(
        body: Stack(
          children: <Widget>[
            CustomScrollView(
              controller: this._scrollController,
              slivers: <Widget>[
                SliverAppBar(
                    backgroundColor: Colors.green /*Colors.grey[50]*/,
                    expandedHeight: 200,
                    elevation: 0,
                    flexibleSpace: Container()),
                SliverList(
                    delegate: SliverChildListDelegate([
                  Container(
                    height: 2000,
                    child: Text('item 9'),
                    color: Colors.blue,
                  ),
                ]))
              ],
            ),
            Container(),
          ],
        ),
      ),
    );
  }
}

0 commentaires

0
votes

Je pense qu'il y a des problèmes avec les propriétés Appbar et SliverApppbar luminosité , en particulier sous iOS. (quelques recherches rapides sur Google ont apporté ce https://github.com/flutter/flutter/issues/41067 )

Ce que j'ai réussi dans le passé, c'était d'envelopper mon Scaffold dans un Thème et de remplacer le appBarTheme comme ci-dessous:

Theme(
    data: Theme.of(context).copyWith(
      appBarTheme: AppBarTheme(
        brightness: _isAppBarCollapsed ? Brightness.light : Brightness.dark,
      ),
    ),
    child: Scaffold(...),
);

J'espère que cela résout votre problème.

0 commentaires