SlidingUpPanel中ListView滚动异常：无法滚动至全部元素

我使用sliding_up_panel包实现底部弹窗，为使弹窗支持滚动，在自定义PanelWidget的build方法中返回了包含多个子组件的ListView，但滚动功能异常：ListView可进行滚动，但无法滚动到所有元素，仅滚动一小段后就会卡住。

原实现代码 #

SlidingUpPanel 代码 #

@override
Widget build(BuildContext context) {
  return ScreensMainCard(
    margin: const EdgeInsets.only(top: 105),
    child: SlidingUpPanel(
      //TODO: Add Maps Here
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
          image: DecorationImage(
            image: AssetImage("images/maps.PNG"), fit: BoxFit.cover
          )
        ),
      ),
      maxHeight: MediaQuery.of(context).size.height,
      minHeight: MediaQuery.of(context).size.height * closedPanel,
      color: Colors.transparent,
      borderRadius: const BorderRadius.vertical(top: Radius.circular(30)),
      panelBuilder: (controller) => BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
        child: PanelWidget(
          closePanel: closePanel,
          controller: controller,
        ),
      ),
    ),
  );
}

PanelWidget 代码 #

Widget build(BuildContext context) {
  return ListView(
    shrinkWrap: true,
    physics: const AlwaysScrollableScrollPhysics(),
    controller: controller,
    padding: EdgeInsets.zero,
    children: [
      SizedBox(height: 10),
      buildDragHandle(),
      SizedBox(height: 40),
      Center(
        child: Text(
          'About',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),
      SizedBox(height: 20),
      Gauges(),
      SizedBox(height: 20,),
      GestureDetector(
        onTap: () {},
        child: Container(
          margin: EdgeInsets.fromLTRB(25, 0, 20, 25),
          height: 50,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(30)),
            color: kViveLaCarViolet,
          ),
          alignment: Alignment.center,
          child: Text(
            "RESERVATION",
            style: kLoginRegisterScreenButtonTextStyle,
          ),
        ),
      ),
      LockUnlockButton(),
      Container(
        margin: EdgeInsets.symmetric(horizontal: 15),
        height: 140,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(15)),
          color: kViveLaCarWhite,
        ),
      ),
    ],
  );
}

问题原因与修复方案 #

核心问题 #

1. 控制器冲突：将SlidingUpPanel的controller直接传给内部ListView，导致面板的展开/收起逻辑与ListView的滚动逻辑互相干扰。
2. shrinkWrap限制：shrinkWrap: true会让ListView仅包裹自身内容高度，结合滑动面板的高度约束，导致滚动范围被压缩。

修复步骤 #

1. 分离控制器：不给ListView传递SlidingUpPanel的controller，为ListView创建独立的ScrollController（如果需要控制滚动位置）。
2. 移除shrinkWrap：删除shrinkWrap: true，让ListView自适应滑动面板的可用高度。
3. 调整面板高度：确保SlidingUpPanel的maxHeight适配顶部margin，避免可用高度不足（比如将maxHeight改为MediaQuery.of(context).size.height - 105）。

修改后的PanelWidget代码 #

Widget build(BuildContext context) {
  // 独立的滚动控制器（可选，根据需求添加）
  final scrollController = ScrollController();

  return ListView(
    physics: const AlwaysScrollableScrollPhysics(),
    controller: scrollController,
    padding: EdgeInsets.zero,
    children: [
      SizedBox(height: 10),
      buildDragHandle(),
      SizedBox(height: 40),
      Center(
        child: Text(
          'About',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),
      SizedBox(height: 20),
      Gauges(),
      SizedBox(height: 20,),
      GestureDetector(
        onTap: () {},
        child: Container(
          margin: EdgeInsets.fromLTRB(25, 0, 20, 25),
          height: 50,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(30)),
            color: kViveLaCarViolet,
          ),
          alignment: Alignment.center,
          child: Text(
            "RESERVATION",
            style: kLoginRegisterScreenButtonTextStyle,
          ),
        ),
      ),
      LockUnlockButton(),
      Container(
        margin: EdgeInsets.symmetric(horizontal: 15),
        height: 140,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(15)),
          color: kViveLaCarWhite,
        ),
      ),
    ],
  );
}

内容的提问来源于stack exchange，提问作者shah Jahan