如何在无精确childAspectRatio取值时缩小Flutter中GridView项的宽度

方案1：改用GridView.extent构造直接指定子项最大宽度 #

不需要手动计算宽高比，直接设置maxCrossAxisExtent即可限定每个子项的水平方向最大宽度，框架会自动计算每行可放置的子项数量，比GridView.count灵活度更高。
调整后的代码示例：

Widget build(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  final height = MediaQuery.of(context).size.height;

  logger("width => $width");
  logger("height => $height");

  return GridView.extent(
    maxCrossAxisExtent: 400, // 直接填写你需要的子项最大宽度即可，无需手动计算比例
    childAspectRatio: 6, // 只需填写适配下拉框/输入框的宽高比即可，不需要精确匹配
    mainAxisSpacing: 10,
    crossAxisSpacing: 25,
    shrinkWrap: true,
    physics: const NeverScrollableScrollPhysics(),
    children: const <Widget>[ 
          SelectCargoDropDown(), 
          CargoCampaignDropDown(), 
          FreeCargoNumberField(), 
          IdSelectionDropDown(), 
          AuthSellingDropDown(), 
          PharmacyReferenceDropDown(), 
          InformationPersonReferenceDropDown(),
    ],
  );
}

方案2：子组件外层套约束容器，不依赖全局宽高比 #

如果要保留GridView.count的用法，无需纠结childAspectRatio的精确数值，给每个子组件外层套Center+SizedBox手动指定宽度即可，多余的布局空间会自动留白，不会拉伸子组件：

// 单个子项修改示例，所有子项都按此格式修改即可
Center(
  child: SizedBox(
    width: 350, // 直接指定你需要的子项宽度
    child: SelectCargoDropDown(),
  ),
)

方案3：代码动态计算childAspectRatio #

如果一定要使用GridView.count，可以通过代码自动计算宽高比，无需手动试值：

int crossAxisCount = width < 1510 ? 2 : width < 1537 ? 3 : 1;
double itemHeight = 60; // 填写你需要的子项高度
// 计算单个子项宽度：(屏幕宽度 - 横向间距总和)/每行子项数，如果你给GridView加了左右padding，需要再减去对应数值
double itemWidth = (width - (crossAxisCount - 1)*25) / crossAxisCount;
// 赋值给childAspectRatio即可
childAspectRatio: itemWidth / itemHeight,

方案4：改用Wrap布局适配表单项场景 #

你的子组件都是表单类控件，没有强网格高度对齐需求的话，直接用Wrap组件更灵活，不需要设置任何宽高比，子项宽高可完全自定义：

return Wrap(
  spacing: 25, // 横向子项间距
  runSpacing: 10, // 纵向行间距
  children: [
    SizedBox(width: 350, child: SelectCargoDropDown()),
    SizedBox(width: 350, child: CargoCampaignDropDown()),
    SizedBox(width: 350, child: FreeCargoNumberField()),
    // 剩余子项按相同格式添加即可
  ],
);

内容的提问来源于stack exchange，提问作者emirşah erden