知乎視頻?www.zhihu.com

在原來的基礎布局下修改

江景：Flutter 實現釘釘側邊欄?zhuanlan.zhihu.com

修改 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();} 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的监听一个可下拉区域的滚动监听_Flutter 实现一个悬浮的效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。