flutter - flutter 中过度滚动指示器的不同颜色？

Question

是否可以有不同的 color用于顶部和底部 Overscroll ListView 的指标?
我有ListView的背景颜色渐变并希望它位于顶部 Overscroll指示器匹配渐变的顶部，底部指示器匹配渐变的底部。

Answer 1

您可以包装 ListView与 GlowingOverscrollIndicator并设置其 color范围。要更改顶部和底部的颜色，您可以在 ListView 的滚动 Controller 中添加一个监听器。 .

 var _color = Colors.blue;

  _listener() {
    if (_scrollController.offset >=
            _scrollController.position.maxScrollExtent &&
        !_scrollController.position.outOfRange) {
      // bottom
      setState(() {
        _color = Colors.red;
      });
    }
    if (_scrollController.offset <=
            _scrollController.position.minScrollExtent &&
        !_scrollController.position.outOfRange) {
      // top
      setState(() {
        _color = Colors.blue;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_listener);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GlowingOverscrollIndicator(
        axisDirection: AxisDirection.down,
        color: _color,
        child: ListView.builder(
          controller: _scrollController,
          physics: ClampingScrollPhysics(),
          itemCount: 30,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('$index'),
            );
          },
        ),
    ));
  }

结果: