Блог

Я работал над прокруткой страницы и в то же время делал эти вещи:

• Изменение цвета фона панели приложений при прокрутке
• Изменение фона панели приложений на прозрачный при прокрутке вверх

Мой код работает нормально, но проблема здесь в том, что он отстает, когда дело доходит до плавной прокрутки.

Я прочитал о документации flutter и обнаружил, что использование setState() внутри addListener() — не лучшая практика, которой вы можете следовать.

Я пытался найти больше информации об этом, но не смог найти эффективного решения.

Вот мой код:

 class HomePageState extends State<HomePage> {
  int _selectIndex = 0;
  bool isAppbarCollapsing = false;
  final ScrollController _homeController = new ScrollController();

  @override
  void initState() {
    super.initState();

    // for adding appbar background color change effect 
    // when scrolled
    _initializeController();
  }

  @override
  void dispose(){
    _homeController?.dispose();
    super.dispose();
  }

  void _initializeController(){
    _homeController.addListener(() {
      if(_homeController.offset == 0.0 amp;amp; !_homeController.position.outOfRange){
        //Fully expanded situation
        if(!mounted) return;
        setState(() => isAppbarCollapsing = false);
      }
      if(_homeController.offset >= 9.0 amp;amp; !_homeController.position.outOfRange){
        //Collapsing situation
        if(!mounted) return;
        setState(()  => isAppbarCollapsing = true);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
          // here is how I am changing the color
          backgroundColor: isAppbarCollapsing ? Colors.white.withOpacity(0.8) : Colors.transparent
       ),
       body: Container(
         height: MediaQuery.of(context).size.height,
         width: MediaQuery.of(context).size.width,
         child: ListView(
           controller: _homeController
         )
       )
     );
  }
}
  

Вы можете попробовать создать новый виджет с отслеживанием состояния, который возвращает панель приложений. Передайте контроллер прокрутки этому виджету и примените прослушиватели в этом виджете appbar, а затем выполните setState в виджете appbar.

Вместо того, чтобы перестраивать весь экран, он просто перестроит только панель приложений.