Flutter中如何在ListView前放置Container并正常显示列表数据？

问题场景 #

在Flutter页面中尝试在ListView前放置一个Container，初始运行时容器未渲染；调整后容器可见，但ListView的数据无法显示，目标是实现顶部固定容器+下方滚动列表的布局（类似顶部标题栏，下方展示列表项）。

问题原因 #

1. 初始布局中，Column直接嵌套ListView.builder时，ListView默认会试图占据无限高度，导致布局约束冲突，进而挤压顶部的Container使其无法显示。
2. 调整后若未正确约束ListView的高度，会导致ListView无法获取有效布局空间，从而无法渲染列表项。

解决方案 #

在Column中使用Expanded包裹ListView.builder，让ListView占据Column的剩余空间，同时保留顶部Container的固定位置。

修改后的完整代码 #

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final String url = "https://randomuser.me/api/?results=10";

  Future<List<dynamic>> fetchPlayers() async {
    final result = await http.get(Uri.parse(url));
    return json.decode(result.body)['results'];
  }

  String name(dynamic player) {
    return "${player['name']['first']} ${player['name']['last']}";
  }

  String position(dynamic player) {
    return player['name']['last'];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        margin: const EdgeInsets.fromLTRB(35, 45, 30, 20),
        child: FutureBuilder<List<dynamic>>(
          future: fetchPlayers(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return Column(
                children: [
                  // 顶部固定容器，可自定义样式
                  Container(
                    padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 8),
                    decoration: BoxDecoration(
                      color: Colors.grey[100],
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: const Text(
                      "顶部容器标题",
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                  ),
                  // 用Expanded包裹ListView，使其占据剩余空间
                  Expanded(
                    child: ListView.builder(
                      padding: const EdgeInsets.all(8),
                      itemCount: snapshot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        return Card(
                          child: ListTile(
                            leading: CircleAvatar(
                              radius: 30,
                              backgroundImage: NetworkImage(
                                snapshot.data[index]['picture']['large'],
                              ),
                            ),
                            title: Text(name(snapshot.data[index])),
                            subtitle: Text(position(snapshot.data[index])),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              );
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }
}

关键修改点 #

1. 添加Expanded组件：将ListView.builder包裹在Expanded中，让ListView获取Column分配的剩余空间，解决布局约束冲突，同时保证顶部Container正常显示。
2. 优化顶部Container样式：添加背景色、内边距和圆角，更贴近目标布局效果。
3. 简化代码：移除了Card内多余的Column嵌套，直接使用ListTile作为Card的子组件，精简布局结构。

内容的提问来源于stack exchange，提问作者54V4G3208