Flutter中滚动时更改应用栏颜色的有效方法

如何解决Flutter中滚动时更改应用栏颜色的有效方法

我一直在处理页面的Scroll，并且同时执行以下操作：

• 滚动时更改AppBar背景的颜色
• 滚动到顶部时，将AppBar背景更改为透明

我的代码可以正常工作，但是这里的问题是，在平滑滚动方面比较缓慢。

我已经阅读了有关Flutter的文档，发现，在addListener（）中使用setState()不是您可以遵循的最佳做法。

我尝试搜索更多有关此内容的信息，但找不到有效的解决方案。

这是我的代码：

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 && !_homeController.position.outOfRange){
        //Fully expanded situation
        if(!mounted) return;
        setState(() => isAppbarCollapsing = false);
      }
      if(_homeController.offset >= 9.0 && !_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
         )
       )
     );
  }
}

解决方法

您可以尝试制作一个新的有状态小部件，该小部件返回一个应用栏。将滚动控制器传递到该小部件，并在该应用栏小部件中应用侦听器，然后在应用栏小部件中执行setState。

这将代替重建整个屏幕，而只是重建应用栏。