Flutter：根据前一个Widget的宽度对齐标签

问题出在当前布局中，每个图片+标签的Column默认会拉伸至ListView的宽度，再加上标签外层的SizedBox设置了width: double.infinity，导致标签占满整个可用宽度，而图片按自身尺寸显示时无法与标签对齐。

可以通过两种简单方式解决：

方法一：使用IntrinsicWidth约束宽度 #

IntrinsicWidth会让容器宽度匹配子组件中最宽的元素（这里就是图片），再配合CrossAxisAlignment.start让标签靠左对齐：

import 'package:flutter/material.dart';

class Example extends StatelessWidget {
  const Example({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const List<Map<String, String>> images = [
      {
        'name': 'img1.jpg',
        'path': 'https://dummyimage.com/238x318/000/fff',
      },
      {
        'name': 'img2.jpg',
        'path': 'https://dummyimage.com/318x300/000/fff',
      },
      {
        'name': 'img3.jpg',
        'path': 'https://dummyimage.com/195x258/000/fff',
      },
      {
        'name': 'img4.jpg',
        'path': 'https://dummyimage.com/336x317/000/fff',
      },
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 8.0,
        ),
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView(
                children: images
                    .map((imageItem) => IntrinsicWidth(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Image.network(
                                imageItem['path']!,
                                fit: BoxFit.cover,
                              ),
                              Text(
                                imageItem['name']!,
                              ),
                            ],
                          ),
                        ))
                    .toList(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

方法二：使用Align让容器靠左对齐 #

如果不想用IntrinsicWidth（避免少量性能开销），可以用Align将每个图片+标签的容器整体靠左，确保标签与图片左对齐：

// 修改ListView的children部分
children: images
    .map((imageItem) => Align(
          alignment: Alignment.centerLeft,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Image.network(
                imageItem['path']!,
                fit: BoxFit.cover,
              ),
              Text(
                imageItem['name']!,
              ),
            ],
          ),
        ))
    .toList(),

两种方法都能实现标签与对应图片左对齐的效果，可根据需求选择。

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