Flutter中SingleChildScrollView包裹ListView.builder时Scrollbar不显示

滚动条无法正常显示是嵌套滚动逻辑和组件摆放位置错误导致的，和ScrollController传参方式无关：

• 内层ListView.builder设置了shrinkWrap: true + physics: NeverScrollableScrollPhysics()后，会完全失去独立滚动能力，自身高度和所有子项总高度相等，实际承担滚动功能的只有外层的SingleChildScrollView
• RawScrollbar需要读取直接子可滚动组件的视口高度、滚动偏移量来计算滑块位置和长度。你把RawScrollbar套在已经失去滚动能力的ListView外层，组件会判定当前区域没有可滚动内容，自然无法正常渲染滑块
• 共用同一个ScrollController时，RawScrollbar的布局范围只覆盖内层ListView区域，和外层SingleChildScrollView的滚动视口范围不匹配；用不同ScrollController时，内层ListView本身不产生滚动偏移，controller拿不到有效参数，两种方案都不可能生效。

根据你的实际交互需求二选一即可：

方案1：整页统一滚动（匹配你当前的代码结构逻辑） #

如果需要顶部标题、列表、底部提示行跟随整体页面一起滚动，直接把RawScrollbar移动到SingleChildScrollView的外层，二者绑定同一个ScrollController，内层ListView保留shrinkWrap和禁止滚动的配置即可，核心修改代码：

Expanded(
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
    // RawScrollbar移动到最外层，包裹实际生效的滚动组件SingleChildScrollView
    child: RawScrollbar(
      thumbVisibility: true,
      interactive: true,
      thumbColor: Colors.black,
      controller: _scrollController,
      radius: const Radius.circular(60),
      thickness: 6,
      child: SingleChildScrollView(
        physics: const ScrollPhysics(),
        controller: _scrollController,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'General Subjects',
              style: GoogleFonts.openSans(
                  fontWeight: FontWeight.w700,
                  fontSize: 20,
                  color: const Color(0xfff3c304)),
            ),
            const SizedBox(height: 8),
            // 移除ListView外层多余的RawScrollbar，ListView不需要绑定controller
            ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              itemCount: SubjectDetail.listOfSubjects.length,
              shrinkWrap: true,
              itemBuilder: (context, index) {
                return SizedBox(
                  width: 344,
                  height: 96,
                  child: Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12.0),
                    ),
                    child: ListTile(
                      contentPadding: const EdgeInsets.symmetric(
                          horizontal: 24, vertical: 8),
                      title: Padding(
                        padding: const EdgeInsets.only(bottom: 4),
                        child: Text(
                          SubjectDetail.listOfSubjects[index].name,
                          style: GoogleFonts.openSans(
                              fontWeight: FontWeight.w700,
                              fontSize: 15),
                        ),
                      ),
                      subtitle: Text(
                        SubjectDetail.listOfSubjects[index].description,
                        style: GoogleFonts.openSans(
                            fontWeight: FontWeight.w400,
                            fontSize: 10),
                      ),
                      trailing: Image.asset(SubjectDetail.listOfSubjects[index].imageUrl),
                    ),
                  ),
                );
              },
            ),
            const SizedBox(height: 8),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'General Subjects',
                  style: GoogleFonts.openSans(
                      fontWeight: FontWeight.w700,
                      fontSize: 20,
                      color: const Color(0xfff3c304)),
                ),
                Text(
                  '*select one subject',
                  style: GoogleFonts.openSans(
                      fontWeight: FontWeight.w300,
                      fontSize: 14,
                      color: const Color(0xfff3c304)),
                )
              ],
            ),
          ],
        ),
      ),
    ),
  ),
)

该方案下滚动条会显示在整个滚动区域右侧，和整页滚动位置完全同步，支持拖拽交互。

方案2：仅列表区域独立滚动 #

如果需要顶部标题、底部提示行固定位置，只有中间的学科列表区域独立滚动、显示对应滚动条，直接移除外层SingleChildScrollView，用Expanded给列表区域分配剩余空间，让ListView自身成为独立可滚动容器，核心修改代码：

Expanded(
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 24),
    child: Column(
      children: [
        Text(
          'General Subjects',
          style: GoogleFonts.openSans(
              fontWeight: FontWeight.w700,
              fontSize: 20,
              color: const Color(0xfff3c304)),
        ),
        const SizedBox(height: 8),
        // 用Expanded撑满Column剩余空间，让列表成为独立滚动区域
        Expanded(
          child: RawScrollbar(
            thumbVisibility: true,
            interactive: true,
            thumbColor: Colors.black,
            controller: _scrollController,
            radius: const Radius.circular(60),
            thickness: 6,
            child: ListView.builder(
              controller: _scrollController,
              // 移除shrinkWrap和禁止滚动的配置
              itemCount: SubjectDetail.listOfSubjects.length,
              itemBuilder: (context, index) {
                return SizedBox(
                  width: 344,
                  height: 96,
                  child: Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12.0),
                    ),
                    child: ListTile(
                      contentPadding: const EdgeInsets.symmetric(
                          horizontal: 24, vertical: 8),
                      title: Padding(
                        padding: const EdgeInsets.only(bottom: 4),
                        child: Text(
                          SubjectDetail.listOfSubjects[index].name,
                          style: GoogleFonts.openSans(
                              fontWeight: FontWeight.w700,
                              fontSize: 15),
                        ),
                      ),
                      subtitle: Text(
                        SubjectDetail.listOfSubjects[index].description,
                        style: GoogleFonts.openSans(
                            fontWeight: FontWeight.w400,
                            fontSize: 10),
                      ),
                      trailing: Image.asset(SubjectDetail.listOfSubjects[index].imageUrl),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
        const SizedBox(height: 8),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              'General Subjects',
              style: GoogleFonts.openSans(
                  fontWeight: FontWeight.w700,
                  fontSize: 20,
                  color: const Color(0xfff3c304)),
            ),
            Text(
              '*select one subject',
              style: GoogleFonts.openSans(
                  fontWeight: FontWeight.w300,
                  fontSize: 14,
                  color: const Color(0xfff3c304)),
            )
          ],
        ),
      ],
    ),
  ),
)

• 嵌套可滚动组件时，如果给内层组件设置shrinkWrap: true+禁用滚动物理效果，内层组件就不再是独立滚动区域，无法单独绑定滚动条
• ScrollController只需要绑定给实际生效的可滚动组件和对应的RawScrollbar即可，不要给多个嵌套组件重复传递同一个controller，避免出现滚动位置冲突。

内容的提问来源于stack exchange，提问作者Pardeep Malhi