Flutter如何实现横向可滚动GridView且容器大小随文本动态调整

问题排查 #

1. flutter_staggered_grid_view的StaggeredTile.fit(1)在横向滚动场景下仅适配垂直方向（交叉轴）尺寸，水平方向（主轴）尺寸默认统一，无法实现宽度跟随文本动态调整，不符合需求。
2. 之前Wrap实现出现空隙的原因是子元素中使用的Row默认占满可用宽度，需要设置mainAxisSize: MainAxisSize.min让Row宽度跟随内容。

最终实现方案 #

使用SingleChildScrollView + Wrap组合即可实现需求，完整代码如下：

List fu = [
  'Packing & Unpacking',
  'Cleaning',
  'Painting',
  'Heavy Lifting',
  'Shopping',
  'Watching Netflix',
  'sadfdsfe eaf',
  'ewfsfeagga,gegea',
  'gaegaewgv ewaggaa aweegaage',
  'safa asdfesadfv esfsdf',
  'sadfdsfe eaf',
  'ewfsfeagga,gegea',
  'awfgraga wsg sfage aegea',
  'gaegaewgv ewaggaa aweegaage',
  'asdfehtrbfawefa garevaa aewf a'
];

Widget build(BuildContext context) {
  return Container(
    height: 120, // 固定整体高度适配2行标签
    margin: EdgeInsets.symmetric(horizontal: 3.5.w, vertical: 0.8.h),
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Wrap(
        direction: Axis.vertical, // 垂直方向排列，高度满了自动换列
        spacing: 8, // 同列标签的垂直间距
        runSpacing: 8, // 同行标签的水平间距
        alignment: WrapAlignment.start,
        children: fu.map((title) => Container(
          padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 12),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(15),
          ),
          child: Text(
            title,
            maxLines: 1,
          ),
          // 如果需要保留Row包裹，务必添加下面这行
          // child: Row(
          //   mainAxisSize: MainAxisSize.min,
          //   children: [Text(title)],
          // ),
        )).toList(),
      ),
    ),
  );
}

注意事项 #

• 不要给Wrap的子元素添加额外的margin，所有间距统一用Wrap的spacing和runSpacing控制，避免重复叠加产生多余间隙
• 如果需要精准控制每行最多展示的标签数量，可以提前对fu数组做分组，再嵌套Row实现更细粒度的布局控制

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