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

Question

我一直在做页面的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
         )
       )
     );
  }
}

Answer 1

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

这将不会重建整个屏幕，而只会重建应用栏。

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

An efficient way in Flutter to change appbar color when scrolled

appbar

flutter

scrollcontroller