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

Flutter:实现标题固定、ListView在指定容器内滚动的效果

需求与问题

需要实现以下效果:

  • 标红的Container内可滚动查看管理员列表
  • "Admins"文本固定在容器顶部,不随列表滚动
  • ListView.builder生成的ListTile仅在标红Container区域内滚动

示意图:
标红容器区域示意图

尝试的代码:

Container(
  height: 300,
  child: Column(
    children: [
      const CustomText(
        align: TextAlign.start,
        size: 20,
        text: "Admins",
        textColor: Colors.white,
        fontWeight: FontWeight.w500,
      ),
      ListView.builder(
        physics: AlwaysScrollableScrollPhysics(),
        scrollDirection: Axis.vertical,
        itemCount: itlength,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          return Container(
            padding: const EdgeInsets.symmetric(
                horizontal: 5, vertical: 10),
            child: ListTile(
              title: Text(name),
              subtitle: Text(sub),
            ),
          );
        },
      ),
    ],
  ),
)
解决方案

问题出在Column和ListView.builder的布局组合上:Column默认不会限制子组件的高度,而ListView.builder设置shrinkWrap: true后会自适应内容高度,导致列表无法在固定容器内滚动。

修改方式:给ListView.builder外层包裹Expanded组件,让它占据Column中除标题外的剩余空间,同时移除shrinkWrap: true(因为Expanded已经为列表提供了明确的高度限制)。

修改后的代码:

Container(
  height: 300,
  child: Column(
    children: [
      const CustomText(
        align: TextAlign.start,
        size: 20,
        text: "Admins",
        textColor: Colors.white,
        fontWeight: FontWeight.w500,
      ),
      // 添加Expanded让ListView占据剩余空间
      Expanded(
        child: ListView.builder(
          physics: const AlwaysScrollableScrollPhysics(),
          scrollDirection: Axis.vertical,
          itemCount: itlength,
          // 移除shrinkWrap: true
          itemBuilder: (context, index) {
            return Container(
              padding: const EdgeInsets.symmetric(
                  horizontal: 5, vertical: 10),
              child: ListTile(
                title: Text(name),
                subtitle: Text(sub),
              ),
            );
          },
        ),
      ),
    ],
  ),
)

修改说明:

  • Expanded会强制子组件(ListView)填充Column的剩余可用空间,确保列表在固定高度的Container内有可滚动的区域;
  • 移除shrinkWrap: true后,ListView会使用Expanded提供的高度,避免自适应内容高度导致的滚动异常;
  • "Admins"标题位于Column的顶部,不会随列表滚动而移动,满足固定需求。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.09 00:35:20