如何修改SingleChildScrollView滚动条指示器颜色？及无样式选项的替代方案

SingleChildScrollView本身确实没有提供直接修改滚动条颜色或样式的配置项，但可以通过以下两种可行方案实现需求：

方案一：用Scrollbar组件包裹SingleChildScrollView #

Flutter的Scrollbar组件支持自定义滚动条样式，将SingleChildScrollView作为其子组件，即可通过Scrollbar的属性修改滚动条颜色：

Scrollbar(
  thumbColor: Colors.red, // 设置滚动条滑块颜色
  trackColor: Colors.grey.withOpacity(0.2), // 设置滚动条轨道颜色
  child: SingleChildScrollView(
    child: // 你的内容组件
  ),
)

注意：Scrollbar会自动关联子组件的滚动控制器，如果需要更精细控制，可以手动传入controller参数，保持Scrollbar和SingleChildScrollView使用同一个ScrollController。

方案二：自定义滚动条（完全定制化） #

如果需要更个性化的滚动条样式，可以通过NotificationListener监听滚动事件，结合Positioned或Stack组件自行绘制滚动条：

class CustomScrollable extends StatefulWidget {
  final Widget child;
  const CustomScrollable({super.key, required this.child});

  @override
  State<CustomScrollable> createState() => _CustomScrollableState();
}

class _CustomScrollableState extends State<CustomScrollable> {
  final ScrollController _controller = ScrollController();
  bool _showScrollbar = false;

  @override
  void initState() {
    super.initState();
    // 监听滚动状态，控制滚动条显隐
    _controller.addListener(() {
      setState(() {
        _showScrollbar = _controller.position.extentAfter < _controller.position.maxScrollExtent;
      });
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        SingleChildScrollView(
          controller: _controller,
          child: widget.child,
        ),
        if (_showScrollbar)
          Positioned(
            right: 2,
            top: _controller.position.pixels / _controller.position.maxScrollExtent * MediaQuery.of(context).size.height,
            height: MediaQuery.of(context).size.height * (_controller.viewportDimension / _controller.position.maxScrollExtent),
            width: 6,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(3),
              ),
            ),
          ),
      ],
    );
  }
}

使用时直接将内容传入CustomScrollable即可，这种方式可以完全控制滚动条的大小、形状、颜色以及显隐逻辑。

内容的提问来源于stack exchange，提问作者e Res