Flutter开发问题：GridView子项嵌套多行布局报错及需求实现

首先，咱们先搞定那个'Incorrect Use of ParentDataWidget'错误——问题出在你generateIgluGridView方法里的Expanded使用逻辑不对。Expanded是专门给Row、Column这类Flex容器的直接子widget用的，你现在把它直接塞在Container下面，这就违背了它的使用规则，自然会抛出错误。

接下来咱们一步步实现你要的效果：每个网格项包含两行文本，并且文本能自动适配容器大小。

修正后的完整代码（关键部分标注） #

return Scaffold(
  body: Column(
    children: [
      Card(
        color: Theme.of(context).primaryColor,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.only(left: 16, top: paddingSize, bottom: 16),
              child: Icon(
                Icons.wb_sunny,
                size: 50,
                color: color,
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 16, top: paddingSize, bottom: 16),
              child: Text(
                "73°F",
                style: TextStyle(
                  fontSize: 50,
                  fontWeight: FontWeight.w400,
                  color: color,
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                width: 100,
                height: 40,
                margin: EdgeInsets.only(left: 8, top: paddingSize, bottom: 16),
                alignment: FractionalOffset.bottomLeft,
                child: Text(
                  "Outside",
                  style: TextStyle(
                    fontSize: 17,
                    fontWeight: FontWeight.w400,
                    color: color,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      Flexible(
        child: GridView.count(
          scrollDirection: Axis.vertical,
          primary: false,
          padding: EdgeInsets.all(10),
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 2,
          children: generateIgluGridView(), // 调用修正后的网格项生成方法
        ),
      ),
    ],
  ),
  bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    currentIndex: selectedIndex,
    onTap: onItemTapped,
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
      BottomNavigationBarItem(icon: Icon(Icons.chair), label: 'Mail'),
      BottomNavigationBarItem(
        icon: Icon(Icons.add_circle, size: 50, color: Colors.blue),
        label: '',
      ),
      BottomNavigationBarItem(icon: Icon(Icons.app_settings_alt), label: 'Contacts'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Contacts')
    ],
  ),
);

// 修正后的网格项生成方法
generateIgluGridView() {
  return List.generate(4, (index) {
    return Container(
      padding: const EdgeInsets.all(20),
      color: Theme.of(context).primaryColor,
      // 用Column实现两行垂直布局，替换原来错误的Row+Expanded组合
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center, // 可选：让文本在容器内居中
        children: [
          // 用FittedBox让文本自动适配容器大小
          FittedBox(
            fit: BoxFit.scaleDown, // 自动缩小文本以适应容器，避免溢出
            child: Text("HEY", style: TextStyle(color: Colors.white)),
          ),
          SizedBox(height: 8), // 可选：给两行文本添加间距，提升视觉效果
          FittedBox(
            fit: BoxFit.scaleDown,
            child: Text("Ho", style: TextStyle(color: Colors.white)),
          ),
        ],
      ),
    );
  });
}

关键修改点说明 #

• 移除错误的Expanded：删掉网格项里多余的Expanded，它的父widget不是Flex容器，完全没必要使用，这是导致错误的核心原因。
• 改用Column实现两行布局：把原来的Row换成Column，让两个文本垂直排列成两行，完美匹配你要的布局效果。
• 添加FittedBox适配文本：给每个Text包裹FittedBox并设置fit: BoxFit.scaleDown，文本会自动缩小以适应网格项容器的大小，不会出现溢出或显示不全的问题。
• 可选视觉优化：添加SizedBox给两行文本增加间距，用mainAxisAlignment让文本在容器内居中，提升整体界面美观度。

这样修改后，不仅能彻底解决ParentDataWidget错误，还能实现你想要的每个网格项两行文本、文本自动适配容器的效果。

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