Flutter中Expanded内ListView无法滚动 需仅ListTile区域可滚动

现有布局没有给列表组件设置明确的高度约束：

• ListView.builder 配置了 shrinkWrap: true 后，会一次性渲染所有子项，自身高度等于所有列表项总高度，失去了滚动所需的高度边界
• 滚动组件嵌套时没有明确的边界划分，导致手势判定冲突，点击 ListTile 区域无法触发列表滚动
• 额外套 SingleChildScrollView 会造成多层滚动组件嵌套，进一步加剧手势冲突问题

给列表区域分配明确的可用高度，移除导致列表失去滚动边界的配置，实现仅 ListTile 列表区域滚动、上方内容固定的效果。

修复后完整代码 #

SafeArea(
    child: Column(
      children: [
        Expanded(flex: 2, child: customAdminDashboard()),
        Expanded(
            flex: 3,
            child: Column(
              children: [
                const Center(
                    child: Text(
                  "Details of Member",
                  style: TextStyle(
                      fontSize: 18,
                      fontFamily: "Montserrat-BoldItalic",
                      color: Color(0xffed8073)),
                )),
                Padding(
                  padding: const EdgeInsets.only(
                      left: 20, right: 20, top: 2, bottom: 2),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: const [
                      Text(
                        "Member Name",
                        style: TextStyle(
                            fontSize: 18, color: Color(0xff925093)),
                      ),
                      Text("Balance",
                          style: TextStyle(
                              fontSize: 18, color: Color(0xff925093))),
                    ],
                  ),
                ),
                // 给列表区域分配剩余可用高度
                Expanded(
                  child: StreamBuilder<QuerySnapshot>(
                    stream: FirebaseFirestore.instance
                        .collection("User-data")
                        .snapshots(),
                    builder: (BuildContext context,
                        AsyncSnapshot<QuerySnapshot> snapshot) {
                      if (snapshot.hasError) {
                        return const Text('Something went wrong');
                      }

                      if (snapshot.connectionState ==
                          ConnectionState.waiting) {
                        return const Text("Loading");
                      }

                      return ListView.builder(
                          // 移除shrinkWrap配置，列表有明确高度后无需收缩渲染
                          physics: const AlwaysScrollableScrollPhysics(),
                          scrollDirection: Axis.vertical,
                          itemCount: snapshot.data!.docs.length,
                          itemBuilder: (_, index) {
                            DocumentSnapshot _DocumentSnapshot =
                                snapshot.data!.docs[index];
                            return ListTile(
                              leading: Text(_DocumentSnapshot['Name']),
                              trailing: Text(
                                  _DocumentSnapshot['Balance'].toString()),
                            );
                          });
                    },
                  ),
                )
              ],
            ))
      ],
    ),
  )

核心修改点 #

• 用 Expanded 包裹 StreamBuilder，让列表占满内层 Column 除标题、表头外的所有剩余空间，形成明确的滚动边界
• 移除 ListView.builder 上的 shrinkWrap: true 配置，列表有明确高度约束后只会渲染可视区域内的子项，既提升性能，也能正常响应滚动手势
• 删除额外嵌套的 SingleChildScrollView，避免多层滚动组件导致的手势冲突

当前运行效果：

内容的提问来源于stack exchange，提问作者Nur Islam Nime