Flutter中ListView无法显示ListTile问题求助

你的代码里存在几个关键问题导致ListTile无法显示，下面是修复方案和详细说明：

核心问题：Column嵌套ListView的高度约束缺失 #

ListView默认会尝试占用无限高度，而Column本身也没有明确的高度限制，这会导致Flutter无法计算ListView的布局空间，最终无法渲染内容。

修复后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

// 指定Map泛型类型，避免类型不安全问题
Map<String, int> players = {
  "Hello": 1468, 
  "Ableflyer": 1820, 
  "crazyman": 1536, 
  "gottoosilly": 2160
};

// 类名遵循Dart大驼峰命名规范
class Daily extends StatelessWidget {
  const Daily({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 将排序逻辑移至build方法内，确保每次构建都能获取最新排序结果（若后续数据动态更新）
    final sortedPlayers = Map.fromEntries(
      players.entries.toList()
        ..sort((e1, e2) => e2.value.compareTo(e1.value)) // 改为降序排序，符合排行榜常规需求
    );

    return Column(
      children: [
        ListView.builder(
          shrinkWrap: true, // 让ListView自适应子元素总高度，解决高度约束问题
          physics: const NeverScrollableScrollPhysics(), // 禁用ListView单独滚动，避免与外层滚动冲突（可选）
          itemCount: sortedPlayers.length,
          itemBuilder: (BuildContext context, int index) {
            // 预存排序后的玩家名称列表，避免重复调用elementAt带来的性能损耗
            final playerNames = sortedPlayers.keys.toList();
            return ListTile(
              title: Text(playerNames[index]),
            );
          },
        )
      ],
    );
  }
}

关键修改点说明 #

• 添加shrinkWrap: true：让ListView根据子元素的总高度调整自身尺寸，解决Column中高度约束缺失的核心问题。若页面需要整体滚动，也可以用Expanded包裹ListView，让它占用Column的剩余空间。
• 调整排序逻辑为降序：将e1.value.compareTo(e2.value)改为e2.value.compareTo(e1.value)，使得分高的玩家排在前面，符合排行榜的常规展示逻辑。
• 排序逻辑移至build内：如果后续players数据会动态更新，这样每次构建Widget时都能重新排序，保证展示的是最新数据。
• 预存键列表优化性能：在itemBuilder中先将keys转为List，避免重复调用elementAt(index)（Map的该操作是O(n)复杂度）带来的性能损耗。
• 规范代码格式：指定Map泛型、修正类名，遵循Dart代码规范，提升代码可读性和安全性。

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