Flutter中List.generate生成列表无内容显示问题求助

问题场景 #

首次使用Flutter，尝试用List.generate在Column中生成DoctorCard无状态组件，运行后只显示对应数量的空白块，无任何内容，也没有报错。需求是生成可点击跳转的占位卡片。

组件代码 #

DoctorCard组件 #

import 'package:progetto_esame_febbraio/utils/config.dart';
import 'package:flutter/material.dart';

class DoctorCard extends StatelessWidget {
  const DoctorCard({Key? key, required this.route}) : super(key: key);

  final String route;

  @override
  Widget build(BuildContext context) {
  Config().init(context);
  return Container(
    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 100),
    height: 150,
    child: GestureDetector(
      child: Card(
        elevation: 5,
        color: Colors.black,
        child: Row(
            children: [
              SizedBox(
                width: Config.widthSize * 0.33,
                child: Image.asset(
                  'assets/facebook.png',
                  fit: BoxFit.fill,
                ),
              ),
           Flexible(
            child: Padding(
              padding:
              const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
               child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    const Text(
                      'Dr Richart',
                      style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                      ),
                      ),
                    const Text(
                      'Dental',
                      style: TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.normal,
                      ),
                      ),
                    const Spacer(),
                        Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: const <Widget>[
                          Icon(
                          Icons.star_border,
                          color: Colors.yellow,
                          size: 16,),
                          Spacer(
                          flex: 1,
                          ),
                          Text('4.5'),
                          Spacer(
                          flex: 1,
                          ),
                          Text('Reviews'),
                          Spacer(
                          flex: 1,
                          ),
                          Text('(20)'),
                          Spacer(
                          flex: 7,
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
          onTap: () {
          Navigator.of(context).pushNamed(route);
        }, // rinvia al dettaglio dottore
      ),
    );
  }
}

首页代码 #

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 15,
          vertical: 15,
        ),
        child: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: List.generate(5, (index) {
                return const DoctorCard(
                  route: 'doc_details',
                );
              }),
            ),
          ),
        ),
      ),
    );
  }
}

问题原因与修复方案 #

1. 容器内边距过大挤压内容 #

DoctorCard外层Container设置了vertical: 100的内边距，而容器高度仅150，上下内边距总和超过容器高度，导致内部Card完全被挤压，没有显示空间。

修复：
替换为合理的内边距或改用外边距控制卡片间距：

// 原代码
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 100),
// 修改后
margin: const EdgeInsets.only(bottom: 15), // 用margin控制卡片间距离
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),

2. 文本颜色与卡片背景色冲突 #

Card背景色设为黑色，但文本默认是黑色，导致文字完全不可见。

修复：
给所有文本添加白色样式：

const Text(
  'Dr Richart',
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
    color: Colors.white, // 添加白色
  ),
),
// 其余文本同理添加color: Colors.white

3. 图片资源潜在问题 #

如果assets/facebook.png未在pubspec.yaml中配置，会导致图片空白，加剧内容不可见问题。

检查：
确保pubspec.yaml中正确配置资源：

flutter:
  assets:
    - assets/facebook.png

4. 优化Config初始化位置 #

在StatelessWidget的build方法中重复调用Config().init(context)会造成不必要的计算，建议移到首页的initState中：

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    Config().init(context);
  }
  // 其余代码不变
}

修复后完整DoctorCard代码 #

import 'package:progetto_esame_febbraio/utils/config.dart';
import 'package:flutter/material.dart';

class DoctorCard extends StatelessWidget {
  const DoctorCard({Key? key, required this.route}) : super(key: key);

  final String route;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      margin: const EdgeInsets.only(bottom: 15),
      child: GestureDetector(
        onTap: () {
          Navigator.of(context).pushNamed(route);
        },
        child: Card(
          elevation: 5,
          color: Colors.black,
          child: Row(
            children: [
              SizedBox(
                width: Config.widthSize * 0.33,
                child: Image.asset(
                  'assets/facebook.png',
                  fit: BoxFit.fill,
                  height: double.infinity,
                ),
              ),
              Flexible(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const <Widget>[
                      Text(
                        'Dr Richart',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                      Text(
                        'Dental',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.normal,
                          color: Colors.white,
                        ),
                      ),
                      Spacer(),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: const <Widget>[
                          Icon(
                            Icons.star_border,
                            color: Colors.yellow,
                            size: 16,
                          ),
                          Spacer(flex: 1),
                          Text('4.5', style: TextStyle(color: Colors.white)),
                          Spacer(flex: 1),
                          Text('Reviews', style: TextStyle(color: Colors.white)),
                          Spacer(flex: 1),
                          Text('(20)', style: TextStyle(color: Colors.white)),
                          Spacer(flex: 7),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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