Flutter开发Android桌面启动器时Carousel下方应用列表无法显示问题

问题根因 #

你在垂直滚动的ListView中直接放置了水平滚动的GridView，GridView默认会占用父组件提供的所有可用空间，但ListView在垂直方向是无限延伸的，无法给GridView提供明确的垂直高度约束，导致Flutter布局计算失败抛出错误。单独使用GridView时，其父组件为Scaffold的body，会提供明确的最大可用尺寸约束，因此可正常展示。

解决方案 #

按以下步骤修改代码即可正常运行：

• 给GridView外层添加明确的高度约束
• 增加快照数据非空判断，避免空数据场景崩溃
• 可选优化：将应用列表获取逻辑放在initState中缓存，避免页面重绘时重复调用系统接口拉取应用列表

关键修改代码段

// 先在_HomepageState类中添加变量，缓存应用列表异步请求
Future<List<Application>> _appFuture;

@override
void initState() {
  super.initState();
  _appFuture = DeviceApps.getInstalledApplications(
    includeSystemApps: true,
    onlyAppsWithLaunchIntent: true,
    includeAppIcons: true,
  );
}

// FutureBuilder部分修改为
FutureBuilder(
  future: _appFuture,
  builder: (context, snapshot){
    if(snapshot.connectionState == ConnectionState.done && snapshot.hasData){
      List<Application> allApps = snapshot.data;
      
      // 给GridView包裹固定高度的SizedBox
      return SizedBox(
        height: 280, // 可根据你的设计需求调整高度值
        child: GridView.count(
          scrollDirection: Axis.horizontal,
          crossAxisCount: 3,
          children: List.generate(allApps.length, (index) {
            return Column(
              children: [
                Image.memory(
                  (allApps[index] as ApplicationWithIcon).icon,
                  width: 64,
                ),
                Text(
                  allApps[index].appName,
                  style: const TextStyle(
                    color: Colors.black
                  ),
                  textAlign: TextAlign.center,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                )
              ],
            );
          }),
        ),
      );
    }
    return Container(
      height: 280, // 加载状态也保持和GridView同高，避免布局跳动
      child: const Center(
        child: CircularProgressIndicator(),
      ),
    );
  },
)

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