如何在SingleChildScrollView中添加位置指示器及多行TextField滚动指示器？

嘿，这个需求我之前做过类似的，刚好能给你捋清楚两种实用的实现方式，完全能达到WhatsApp那种滚动条效果👇

这是最直接的方案，用Flutter原生的ScrollBar组件包裹你的SingleChildScrollView，就能快速启用滚动位置指示器：

ScrollBar(
  thumbVisibility: true, // 强制显示滚动条（默认是滚动时才显示，像WhatsApp那样一直显示就开这个）
  trackVisibility: true, // 可选：显示滚动条轨道，视觉上更友好
  child: SingleChildScrollView(
    child: TextField(
      maxLines: null, // 允许内容无限换行
      expands: true, // 让TextField占满父容器空间（需要父容器有确定高度，比如套个Container设height或者用Expanded）
      decoration: InputDecoration(
        hintText: "输入你的内容...",
        border: OutlineInputBorder(),
        contentPadding: EdgeInsets.all(16),
      ),
    ),
  ),
)

小提示：如果不想一直显示滚动条，把thumbVisibility设为false，滚动条就会在用户滑动时自动出现，松手后隐藏，也是很常见的交互。

其实多行TextField本身自带滚动能力，如果你不需要在SingleChildScrollView里放其他组件，直接用ScrollBar包裹TextField就行，省掉一层嵌套：

ScrollBar(
  thumbVisibility: true,
  child: TextField(
    maxLines: null,
    expands: true,
    scrollPhysics: AlwaysScrollableScrollPhysics(), // 确保即使内容少，滚动条也能正常触发（可选）
    decoration: InputDecoration(
      hintText: "输入你的内容...",
      border: InputBorder.none,
      contentPadding: EdgeInsets.all(16),
    ),
  ),
)

如果原生样式不符合你的需求，还可以自定义滚动条的颜色、厚度、圆角，完全复刻WhatsApp的质感：

ScrollBar(
  thumbColor: Colors.grey.shade600, // 滑块颜色，和WhatsApp的灰色滑块对齐
  trackColor: Colors.grey.shade200, // 轨道颜色，淡灰色更柔和
  thickness: 4.0, // 滑块厚度，不要太粗
  radius: Radius.circular(2.0), // 滑块圆角，更圆润
  thumbVisibility: true,
  child: SingleChildScrollView(
    child: TextField(
      maxLines: null,
      decoration: InputDecoration(
        hintText: "输入你的内容...",
        border: InputBorder.none,
        contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      ),
    ),
  ),
)

另外补充一句：如果你的SingleChildScrollView里还有其他组件（比如标题、按钮），ScrollBar会自动监听整个滚动视图的位置，用法和上面完全一致，直接包裹就行~

内容的提问来源于stack exchange，提问作者Ride Sun