Flutter技术问询：消除Card内GridView顶部偏移及高度匹配问题

嘿，我之前也碰到过一模一样的问题，这其实是GridView的默认内边距在搞鬼，咱们来一步步搞定它：

首先，顶部偏移的根源：GridView继承自ScrollView，默认会自带一组内边距（实际渲染时顶部会有隐含的偏移），这就是导致它和Card顶部不对齐的核心原因。

然后，高度不匹配的补充调整：你已经设置了shrinkWrap: true和NeverScrollableScrollPhysics()，这俩是对的，配合消除内边距的操作，就能让GridView完美贴合Card的内部空间。

直接看修改后的代码：

Widget _buildGridView({BuildContext context, List<TileWidget> children}) {
  return Card(
    margin: padding(context),
    borderOnForeground: true,
    color: Colors.black45,
    semanticContainer: true,
    clipBehavior: Clip.antiAlias,
    elevation: 5,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    child: GridView.count(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      // 关键：消除GridView的默认内边距，解决顶部偏移
      padding: EdgeInsets.zero,
      crossAxisCount: sqrt(children.length).toInt(),
      children: children,
    ),
  );
}

额外注意点： #

• 如果调整后高度还是没匹配上，先检查你的padding(context)函数返回的margin值是否合理，有没有给Card加了不必要的外部间距。
• 如果这个组件是放在Column、ListView这类滚动组件里面的话，记得把整个Card用Expanded或者Flexible包裹，这样它能获取到父组件的可用空间，避免高度被压缩。

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