钉钉标记项滚动吸附效果

    思路： 使用 Stack 布局，一开始把 DTMessageTopQuick 组件加入到容器中，监听滚动，来改变 opacity 值显示出 DTMessageTopQuick

    • 修改 DTMessageScreen extends StatefulWidget
    1. class DTMessageScreen extends StatefulWidget {}
    • 使用 Stack 布局 + Positioned实现，修改 build 方法
    1. @override
    2.   Widget build(BuildContext context) {
    3.     return Scaffold(
    4.       backgroundColor: Colors.white,
    5.       appBar: buildAppBar(context),
    6.       body: Stack(
    7.         children: <Widget>[
    8.           SingleChildScrollView(
    9.             controller: _scrollController,
    10.             child: Column(
    11.               children: <Widget>[
    12.                 DTMessageSearchDecoration(),
    13.                 DTMessageTopQuick(),
    14.                 DTMessageTopMask(),
    15.                 DTMessageListView(),
    16.               ],
    17.             ),
    18.           ),
    19.           Positioned(
    20.             top: 0,
    21.             left: 0,
    22.             right: 0,
    23.             child: AnimatedOpacity(
    24.                 opacity: topQuickOpacity,
    25.                 duration: Duration.zero,
    26.                 child:
    27.                     Container(color: Colors.white, child: DTMessageTopQuick())),
    28.           ),
    29.         ],
    30.       ),
    31.     );
    32.   }

    • 监听 SingleChildScrollView 滚动，改变 Positioned 的 opacity 值

      2. ScrollController _scrollController;
      4. double topQuickOpacity = 0.0;
      6. @override
      7. void initState() {
      8.   _scrollController = ScrollController();
      10.   _scrollController
      11.     ..addListener(() {
      12.       int offset = _scrollController.offset.ceil();
      13.       this.setState(() {
      14.         topQuickOpacity = offset > kSize70 ? 1.0 : 0.0;
      15.       });
      16.     });
      17.   super.initState();
      18. }

    这样方法只是实现的一种，还可以使用其他方法实现（其他方法暂时没有想到，TODO：）