You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter ListView无法滚动到底部,拖拽后回弹问题求助

Flutter ListView滚动异常修复方案

问题根源

  1. 外层嵌套了一个不可滚动的ListView,完全冗余,干扰内部组件的布局计算,导致滚动行为异常。
  2. TabBarView外层容器硬编码全屏高度MediaQuery.of(context).size.height,未扣除顶部导航栏、TabBar和底部按钮的高度,内容超出屏幕引发回弹。
  3. 重复嵌套DefaultTabController,层级冗余可能导致状态冲突。
  4. 内部ListView布局嵌套层级过多,滚动行为未与父组件正确适配。

修复步骤

  • 移除外层冗余ListView:将Expanded直接包裹DefaultTabController,去掉中间的不可滚动ListView。
  • 修正TabBarView高度:用Expanded替代固定高度,让TabBarView自动填充剩余可用空间。
  • 删除重复的DefaultTabController:只保留最外层控制器,避免状态混乱。
  • 优化内部ListView配置:确保内部ListView使用默认滚动物理效果,配合shrinkWrap时保证高度正确计算。

完整修复代码

Scaffold(
  body: SafeArea(
    child: Column(children: [
      // 顶部导航栏
      Container(
        color: AppColor.mainGreenColor,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
          child: Row(
            children: [
              InkWell(
                onTap: () {
                  Navigator.maybePop(context);
                },
                child: SvgPicture.asset("assets/images/back_arrow_white.svg"),
              ),
              const SizedBox(width: 4),
              const Expanded(
                child: Text(
                  "Alerts & Subscriptions",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.w400,
                    fontFamily: 'Museo Sans',
                    color: Colors.white,
                  ),
                ),
              ),
              const SizedBox(width: 24)
            ],
          ),
        ),
      ),
      // 替换原外层不可滚动ListView,直接用Expanded包裹Tab控制器
      Expanded(
        child: DefaultTabController(
          length: 2,
          initialIndex: 0,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              // TabBar
              Container(
                child: TabBar(
                  labelColor: AppColor.primaryColor,
                  unselectedLabelColor: CustomerColors().boughtSold,
                  labelPadding: EdgeInsets.all(0),
                  labelStyle: AppFont.customerSoldBought(),
                  indicator: const BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        color: AppColor.primaryColor,
                        width: 4,
                      ),
                    ),
                  ),
                  onTap: (index) async {
                    setState(() {
                      tabIndex = index;
                    });
                  },
                  tabs: const [
                    Tab(text: 'ALERTS'),
                    Tab(text: 'SUBSCRIPTIONS'),
                  ],
                ),
              ),
              // 用Expanded包裹TabBarView,自动适配剩余高度
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                    border: Border(
                      top: BorderSide(color: Colors.grey, width: 0.5),
                    ),
                  ),
                  child: TabBarView(
                    physics: const NeverScrollableScrollPhysics(),
                    children: <Widget>[
                      // ALERTS标签页
                      ListView(
                        children: [],
                      ),
                      // SUBSCRIPTIONS标签页
                      Column(
                        children: [
                          const SizedBox(height: 10),
                          tabIndex == 1
                              ? HeaderFilter(
                                  filterSelected: filterSelected,
                                  filterItems: filterItems,
                                )
                              : const SizedBox(),
                          Expanded(
                            child: ListView(
                              // 保持shrinkWrap但让Expanded控制高度
                              shrinkWrap: true,
                              children: subscriptionsModel.map((e) {
                                return SuscriptionItem(
                                  popupActionSelected: popupActionSelected,
                                  index: subscriptionsModel.indexOf(e),
                                  subscriptionModel: e,
                                );
                              }).toList(),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      // 底部按钮
      Padding(
        padding: const EdgeInsets.only(right: 30.0, left: 30.0),
        child: Container(
          width: MediaQuery.of(context).size.width * 0.80,
          child: ElevatedButton(
            style: AppButtonStyle.SelectedButtonLargeReport(),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => CreateSubscription(),
                ),
              );
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(Icons.add, color: Colors.white),
                SizedBox(width: 10),
                Text('New Alert Subscription'),
              ],
            ),
          ),
        ),
      ),
    ]),
  ),
);

内容的提问来源于stack exchange,提问作者Saeed

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.07 19:03:34