Flutter 实现一个悬浮的效果

Flutter 实现一个悬浮的效果

在原来的基础布局下修改

修改 DTMessageScreen

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

  @override
  Widget 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;
  @override
  void initState() {
    _scrollController = ScrollController();
    _scrollController
      ..addListener(() {
        int offset = _scrollController.offset.ceil();
        this.setState(() {
          topQuickOpacity = offset > kSize70 ? 1.0 : 0.0;
        });
      });
    super.initState();
  }