Flutter使用GridView.count时如何让子组件不继承父容器高度

问题原因 #

GridView 默认会强制子组件匹配它的布局委托分配的尺寸，不会自适应子组件自身内容大小。你给GridView外层的Container设置了固定高度，子组件的Container就会被拉伸填满分配的垂直空间，无法跟随文本内容适配高度。

最优解决方案：用 Wrap + SingleChildScrollView 替代GridView #

你的需求是横向滚动的双行标签流，Wrap组件天生支持自动换行、子组件自适应内容尺寸，配合SingleChildScrollView就能实现你要的效果，修改代码如下：

Container(
  height: MediaQuery.of(context).size.height * 0.2,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Wrap(
      direction: Axis.vertical,
      spacing: 10, // 水平方向标签间距
      runSpacing: 10, // 垂直方向两行标签的间距
      children: [
        RoudedCategories("Busines"),
        RoudedCategories("social"),
        RoudedCategories("incubation"),
        RoudedCategories("incubation"),
        RoudedCategories("incubation"),
        RoudedCategories("incubation"),
        RoudedCategories("fire"),
        RoudedCategories("Stupid"),
        RoudedCategories("Stupid"),
        RoudedCategories("Stupid"),
        RoudedCategories("Stupid"),
        RoudedCategories("Stupid"),
      ],
    ),
  ),
)

你可以把RoudedCategories里的margin参数去掉，用Wrap的spacing和runSpacing统一控制间距即可。

可选方案：保留GridView，修改子组件结构 #

如果你坚持要使用GridView，可以给子组件外层套一层Align，避免子Container强制填充分配的父空间：
修改RoudedCategories的build方法：

@override
Widget build(BuildContext context) {
  return Align(
    alignment: Alignment.centerLeft,
    child: Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      margin: EdgeInsets.only(right: 10, bottom: 10),
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(15)
      ),
      child: Text(
        text,
        style: Theme.of(context).textTheme.bodyText2,
      ),
    ),
  );
}

该方案的缺点是GridView仍会按默认宽高比分配子组件空间，容易出现标签间隙过大的问题，适配性不如第一种方案。

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