监听一个可下拉区域的滚动监听_Flutter 实现一个悬浮的效果

知乎视频​

在原来的基础布局下修改

江景：Flutter 实现钉钉侧边栏​

修改 DTMessageScreen

使用 Stack 作为容器且套 SingleChildScrollView ，监听 controller 滚动事件再 Stack 容器中多添加一个DTMessageTopQuick，使用 Positioned 包裹通过监听 controller 控制 AnimatedOpacity 透明度显示和隐藏

@overrideWidget build(BuildContext context) {return Scaffold(backgroundColor: Colors.white,appBar: buildAppBar(context),body: Stack(children: <Widget>[SingleChildScrollView(controller: _scrollController,child: Column(children: <Widget>[DTMessageSearchDecoration(),DTMessageTopQuick(),DTMessageTopMask(),DTMessageListView(),],),),Positioned(top: 0,left: 0,right: 0,child: AnimatedOpacity(opacity: topQuickOpacity,duration: Duration.zero,child:Container(color: Colors.white, child: DTMessageTopQuick())),),],),);}

添加滚动监听

ScrollController _scrollController;double topQuickOpacity = 0.0;@overridevoid initState() {_scrollController = ScrollController();_scrollController..addListener(() {int offset = _scrollController.offset.ceil();this.setState(() {topQuickOpacity = offset > kSize70 ? 1.0 : 0.0;});});super.initState();}