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

【问题标题】：Flutter Aligning label based on the previous Widget's widthFlutter 根据前一个 Widget 的宽度对齐标签
【发布时间】：2022-10-17 14:52:42
【问题描述】：

早上好，我有一个关于小部件对齐的小问题。

我有一个不同尺寸的图像列表，我想将它们显示在一个列中，每个列下都有一个小标签。标签必须在开始时根据其相对图像对齐。

标签使用父级的约束而不是图像的约束，我如何根据前一个小部件的宽度来约束它？

我想要达到的目标：

我得到的结果：

代码：

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) => Column(
                          children: <Widget>[
                            Image.network(
                              imageItem['path']!,
                              fit: BoxFit.cover,
                            ),
                            SizedBox(
                              width: double.infinity,
                              child: Text(
                                imageItem['name']!,
                                textAlign: TextAlign.left,
                              ),
                            ),
                          ],
                        ))
                    .toList(),
              ),
            )
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

从 SizedBox 中删除宽度并在 Column 小部件上使用 crossAxisAlignment: CrossAxisAlignment.start,。

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) => Center(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,// add this, default is center
                        children: <Widget>[
                          Image.network(
                            imageItem['path']!,
                            fit: BoxFit.cover,
                          ),
                          SizedBox( // you can remove this 
                            child: Text(
                              imageItem['name']!,
                              textAlign: TextAlign.left,
                            ),
                          ),
                        ],
                      ),
                    ))
                .toList(),
          ),
        )
      ],
    ),
  ),
);

【讨论】：