Flutter 高效的组件HiFlexibleHeader封装

封装可动态改变位置的Header，适用于需要局部刷新的应用

class HiFlexbleHeader extends StatefulWidget {
  final String name;
  final String face;
  final ScrollController controller;

  const HiFlexbleHeader({Key key, this.name, this.face, this.controller})
      : super(key: key);

  @override
  _HiFlexbleHeaderState createState() => _HiFlexbleHeaderState();
}

class _HiFlexbleHeaderState extends State<HiFlexbleHeader> {
  static const double MAX_BOTTOM = 30;
  static const double MIN_BOTTOM = 10;

  // 滚动范围
  static const MAX_OFFSET = 80;

  double _dyBottom = MIN_BOTTOM;

  @override
  void initState() {
    super.initState();
    widget.controller.addListener(() {
      var offset = widget.controller.offset;
      // 计算出padding变化 0-1
      var dyOffset = (MAX_OFFSET - offset) / MAX_OFFSET;
      // 根据dyOffset算出具体变化的padding值
      var dy = dyOffset * (MAX_BOTTOM - MIN_BOTTOM);
      // 临界值保护
      if (dy > (MAX_BOTTOM - MIN_BOTTOM)) {
        dy = MAX_BOTTOM - MIN_BOTTOM;
      } else if (dy < 0) {
        dy = 0;
      }
      setState(() {
        // 计算出实际的padding
        _dyBottom = MIN_BOTTOM + dy;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.bottomLeft,
      padding: EdgeInsets.only(bottom: _dyBottom, left: 10),
      child: Row(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(23),
            child: cacheImage(widget.face, width: 46, height: 46),
          ),
          hiSpace(width: 8),
          Text(
            widget.name,
            style: TextStyle(fontSize: 11, color: Colors.black54),
          )
        ],
      ),
    );
  }
}

使用

ScrollController _controller = ScrollController();
HiFlexbleHeader(
      name: _profileMo.name,
      face: _profileMo.face,
      controller: _controller,
 )