0

我一直在处理页面的滚动，同时，做这些事情：

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

我的代码工作正常，但这里的问题是，在平滑滚动方面它是滞后的。

我已阅读有关颤振文档的信息，并发现在 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
         )
       )
     );
  }
}
4

1 回答 1

2

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

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

于 2020-09-02T13:32:05.703 回答